webpack中配置babelBabel是JavaScript编译器，能将ES6代码转换成ES5代码，让我们开发过程中放

Babel是JavaScript编译器，能将ES6代码转换成ES5代码，让我们开发过程中放心使⽤JS新特性⽽不用担⼼兼容性问题。并且还可以通过插件机制根据需求灵活的扩展。

Babel在执⾏编译的过程中，会从项⽬根目录下的 .babelrc JSON⽂件中读取配置。没有该⽂件会从loader的options地⽅读取配置。

1.babel-loader是webpack 与 babel的通信桥梁，不会做把es6转成es5的工作，这部分工作需要用到@babel/preset-env来做

2.@babel/preset-env⾥包含了es，6，7，8转es5的转换规则

env是babel7之后推⾏的预设插件 env{ ecma 5、ecma 6、 ecma 7、 ecma 8 。。。 }

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

通过上⾯的⼏步还不够，默认的Babel只⽀持let等一些基础的特性转换，Promise等⼀些还有转换过来，这时候需要借助@babel/polyfill，把es的新特性都装进来，来弥补低版本浏览器器中缺失的特性

@babel/polyfill

以全局变量的⽅式注⼊进来的。windows.Promise，它会造成全局对象的污染

按需加载，减少冗余

 // webpack.config.js
options: {
        presets: [
            [
              "@babel/preset-env",
              {
                targets: {
                  edge: "17",
                  firefox: "60",
                  chrome: "67",
                  safari: "11.1"
                },
                corejs: 2,//新版本需要指定核心库版本
                useBuiltIns: "usage"//按需注入
              }
            ]
        ] 
    }

useBuiltIns 选项是 babel 7 的新功能，这个选项告诉 babel 如何配置 @babel/polyfill 。

它有三个参数可以使用:

entry: 需要在 webpack 的⼊口⽂件里 import "@babel/polyfill" 一次。 babel 会根据你的使用情况导入垫⽚，没有使用的功能不会被导入相应的垫片。
usage: 不需要 import ，全⾃动检测，但是要安装 @babel/polyfill 。(试验阶段)
false: 如果你 import "@babel/polyfill" ，它不会排除掉没有使用的垫片，程序体积会庞大。(不推荐)

请注意: usage 的⾏为类似 babel-transform-runtime，不会造成全局污染，因此也会不会对类似 Array.prototype.includes() 进⾏ polyfill。

//.babelrc
{
    presets: [
        [
          "@babel/preset-env",
          {
            targets: {
              edge: "17",
              firefox: "60",
              chrome: "67",
              safari: "11.1"
            },
            corejs: 2, //新版本需要指定核⼼库版本
            useBuiltIns: "usage" //按需注⼊入
          }
        ],
        "@babel/preset-react"// 处理jsx
    ] 
}

//webpack.config.js
{
  test: /\.js$/,
  exclude: /node_modules/,
  loader: "babel-loader"
}

总结

@babel/polyfill是让不支持es6、7、8、9等语法的浏览器支持新语法

@babel/preset-env 是把代码转换成低端浏览器可以识别的代码比如es5、es3

看官方解释

A Babel preset that compiles ES2015+ down to ES5 by automatically determining the Babel plugins and polyfills you need based on your targeted browser or runtime environments.


通过根据目标浏览器或运行时环境自动确定所需的Babel插件和polyfill，
Babel预设可将ES2015 +编译为ES5。