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'

---

本人才疏學淺，不當之處歡迎批評指正。

傳送門：

webpack4系列教程（一）：初識webpack
webpack4系列教程（二）：創建項目，打包第一個JS文件
webpack4系列教程（三）：自動生成項目中的HTML文件
webpack4系列教程（四）：處理項目中的資源文件（一）
webpack4系列教程（五）：處理項目中的資源文件（二）
webpack4系列教程（六）：使用SplitChunksPlugin分割代碼
webpack4系列教程（七）：使用 babel-loader