webpack處理ES6語法

說明： 我們在項目中書寫的ES6代碼，由於考慮到低版本瀏覽器的兼容性問題，需要把ES6代碼轉換成低版本瀏覽器能夠識別的ES5代碼。使用 babel-loader 和 @babel/core 來進行ES6和ES5之間的鏈接，使用 @babel/preset-env 來進行ES6轉ES5

在處理ES6代碼之前，我們先來清理一下前面小節的中的代理，我們需要刪除counter.js、number.js和style.css這個三個文件，刪除後的文件目錄大概是下面這樣子的：

|-- dist
|   |-- index.html
|   |-- main.js
|-- src
|   |-- index.html
|   |-- index.js
|-- package.json
|-- webpack.config.js

要處理ES6代碼，需要我們安裝幾個npm包，可以使用如下的命令去安裝

// 安裝 babel-loader @babel/core
$ npm install babel-loader @babel/core --save-dev

// 安裝 @babel/preset-env
$ npm install @babel/preset-env --save-dev

// 安裝 @babel/polyfill進行ES5代碼補丁
$ npm install @babel/polyfill --save-dev

安裝完畢後，我們需要改寫src/index.js中的代碼，可以是下面這個樣子：

import '@babel/polyfill';
const arr = [
  new Promise(() => {}),
  new Promise(() => {}),
  new Promise(() => {})
]

arr.map(item => {
  console.log(item);
})

處理ES6代碼，需要我們使用loader，所以需要在webpack.config.js中添加如下的代碼：

module.exports = {
  // 其它配置
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  }
}

@babel/preset-env需要在根目錄下有一個.babelrc文件，所以我們新建一個.babelrc文件，它的代碼如下：

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

爲了讓我們的打包變得更加清晰，我們可以在webpack.config.js中把source-map配置成none，像下面這樣：

module.exports = {
  // 其他配置
  mode: 'development',
  devtool: 'none'
}

本次打包，我們需要使用npx webpack，打包的結果如下圖所示： 

在以上的打包中，我們可以發現：

• 箭頭函數被轉成了普通的函數形式
• 如果你仔細觀察這次打包輸出的話，你會發現打包體積會非常大，有幾百K，這是因爲我們將@babel/polyfill中的代碼全部都打包進了我們的代碼中

針對以上最後一個問題，我們希望，我們使用了哪些ES6代碼，就引入它對應的polyfill包，達到一種按需引入的目的，要實現這樣一個效果，我們需要在.babelrc文件中做一下小小的改動，像下面這樣：

npm i --save core-js@3

{
  "presets": [["@babel/preset-env",{
    "useBuiltIns": "usage",
    "corejs": 3
  }]]
}

同時需要注意的時，我們使用了useBuiltIns:"usage"後，在index.js中就不用使用import '@babel/polyfill'這樣的寫法了，因爲它已經幫我們自動這樣做了。

在以上配置完畢後，我們再次使用npx webpack進行打包，如下圖，可以看到此次打包後，main.js的大小明顯變小了。