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的大小明显变小了。