webpack4系列教程（七）：使用 babel-loader

1. 什麼是Babel

現在 ES6 語法在開發中已經很是普及，甚至也有許多開發人員用上了 ES7 或 ES8 語法。然而，瀏覽器對這些高級語法的支持性並非很是好。所以爲了讓咱們的新語法能在瀏覽器中都能順利運行，Babel 應運而生。
Babel是一個JavaScript編譯器，可以讓咱們放心的使用新一代JS語法。好比咱們的箭頭函數：

() => console.log('hello babel')

通過Babel編譯以後：

(function(){
    return console.log('hello babel');
});

會編譯成瀏覽器可識別的ES5語法。

2. 在webpack中使用babel-loader

安裝：

npm install -D babel-loader @babel/core @babel/preset-env webpack

修改 webpack.config.js，加入新的loader：

{
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: /node_modules/
}

遇到JS文件就先用babel-loader處理，exclude表示排除 node_modules 文件夾中的文件。loader的配置就OK了，但是這樣還不能發揮Babel的做用。在項目根目錄下建立一個 .babelrc 文件，添加代碼：

{
  "presets": [
    "@babel/preset-env"
  ]
}

咱們還但願可以在項目對一些組件進行懶加載，因此還須要一個Babel插件：

npm i babel-plugin-syntax-dynamic-import -D

在 .babelrc 文件中加入plugins配置：

{
  "presets": [
    "@babel/preset-env"
  ],
  "plugins": [
    "syntax-dynamic-import"
  ]
}

在src 目錄下建立 helper.js：

console.log('this is helper')

再來修改咱們的 main.js ：

import 'babel-polyfill'
import Modal from './components/modal/modal'
import './assets/style/common.less'
import _ from 'lodash'
const App = function () {
  let div = document.createElement('div')
  div.setAttribute('id', 'app')
  document.body.appendChild(div)
  let dom = document.getElementById('app')
  let modal = new Modal()
  dom.innerHTML = modal.template({
    title: '標題',
    content: '內容',
    footer: '底部'
  })
  let button = document.createElement('button')
  button.innerText = 'click me'
  button.onclick = () => {
    const help = () => import('./helper')
    help()
  }
  document.body.appendChild(button)
}
const app = new App()
console.log(_.camelCase('Foo Bar'))

當button點擊時，加載 helper 而後調用。打包以後可見：

多了一個 3.bundle.js，在瀏覽器打開 dist/index.html ，打開 network查看，3.bundle.js並未加載：

當點擊button以後，發現瀏覽器請求了3.bundle.js，控制檯也打印出了數據。

因爲 Babel 只轉換語法(如箭頭函數)， 你可使用 babel-polyfill 支持新的全局變量，例如 Promise 、新的原生方法如 String.padStart (left-pad) 等。

安裝：

npm install --save-dev babel-polyfill

在入口文件引入就能夠了：

import 'babel-polyfill'