在webpack配置babel转换es6，兼容ie11，在webpack中使用babel-preset，babel-polyfill

首先安装babel-loader和babel核心库：

npm install --save-dev babel-loader @babel/core

然后在webpack.config.js中modules中配置babel

module: {
  rules: [
    { 
        test: /\.js$/, 
        exclude: /node_modules/, 
        loader: "babel-loader" 
    }
  ]
}

exclude:/node_modules/是因为在打包js文件时，如果引入的是第三方模块就不进行Babel转换，因为第三方模块别人都是给你转换好了的。

我们现在只是打通了webpack和Babel的联系，还没有用Babel干任何事情，这时候需要用到babel-preset来将es6语法转化为es5语法。

安装：

npm install @babel/preset-env --save-dev

然后配置env预设，他为语法转化提供支持：

module: {
  rules: [
    { 
        test: /\.js$/, 
        exclude: /node_modules/, 
        loader: "babel-loader" 
        options:{
            presets: ["@babel/preset-env"]
        }
    }
  ]
}

当然你觉得把这个配置写在配置项中不美观还可以单独在根目录下建立一个.babelrc的文件用来存放有关Babel的配置：

.babelrc文件

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

好了，到目前为止我们已经完成了将es6语法转化为es5语法的配置，比如会将const，let转为var，将=>函数转为function，但是使用新的内置函数，如promise或weakmap、静态方法（如array.from或object.assign）、实例方法（如array.prototype.includes）和生成器函数（前提是您使用再生器插件）时是不会转换的。这时候就需要用到polyfill了：

安装polyfill:

npm install --save @babel/polyfill

以前我们在使用的时候需要引入polyfill，import "@babel/polyfill"或者单独在webpack中配置引入polyfill。但是现在不用了，使用useBuiltIns:"useage"即可

module: {
  rules: [
    { 
        test: /\.js$/, 
        exclude: /node_modules/, 
        loader: "babel-loader" 
        options:{
            presets: [["@babel/preset-env",{
                useBuiltIns:'usage'
            }]]
        }
    }
  ]
}

useBuiltIns配置项两个作用：

1. 帮助我们在打包js文件时自动引入polyfill
2. 仅引入需要转换的polyfill，比如你使用了promise，那么只引入promise相关的polyfill而不会将整个polyfill文件引入，大大减小文件体积

不仅如此，还可以配置兼容的目标浏览器版本，使用targets属性：

module: {
  rules: [
    { 
        test: /\.js$/, 
        exclude: /node_modules/, 
        loader: "babel-loader" 
        options:{
            presets: [["@babel/preset-env",{
                targets:{
                    edge:"17",
                    firefox:"60",
                    chrome:"67",
                    safari:"11.1",
                    ie:"11"
                }
                useBuiltIns:'usage'
            }]]
        }
    }
  ]
}

在.babelrc中配置：

{
    "presets": [["@babel/preset-env",{
        "targets":{
            "edge":"17",
            "firefox":"60",
            "chrome":"67",
            "safari":"11.1",
            "ie":"11"
        },
        "useBuiltIns":"usage"
     }]]
}

这里说一下：如果你在targets中只写了"chrome":67,那么你会看到你的生成的js文件语法等可能没有任何转化，因为chrome67版本已经支持了大部分es6的语法和方法，所以polyfill就不会再转化了。

到这里已经完成了babel关于es6转es5兼容性的相关配置。

关于babel的详细内容请参见babel官网中SetUp的webpack，Docs中Usage Guide和polyfill。

查看babel官网