webpack-babel-转换ES678语法，兼容低版本浏览器

1、webpack-babel

将ES678高级语法转换为ES5低级语法，兼容低级版本浏览器

2、如何使用babel?

https://babeljs.io/

安装:

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

配置babel：

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

3、presets优化:

配置presets告诉webpack我们需要兼容哪些浏览器，babel会去兼容这些浏览器。

https://babeljs.io/docs/en/babel-preset-env

// 打包JS规则

{
     test: /\.js$/,
     exclude: /node_modules/, // 告诉webpack不处理哪一个文件夹
     loader: "babel-loader",
     options: {
            "presets": [["@babel/preset-env", {
                targets: { // 告诉babel你需要兼容哪些浏览器
                    "chrome": "58",
                },
             }]]
     }
},

4、实现低版本语法–没有对应关系的转换

利用babel实现低版本语法，对于有对应关系的语法而言, 经过我们上节课的配置就已经能够实现自动转换了，但是对于没有对应关系的语法而言, 还不能实现自动转换，需要用到polyfill。
①　第一种配置（不推荐，通过全局变量的方式来注入代码, 会污染全局环境）

安装：npm install --save @babel/polyfill

在用到不存在代码的文件中导入包：import "@babel/polyfill";

// 打包js规则
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          presets: [
            [
              '@babel/preset-env',
              {
                targets: {
                  chrome: 40,
                },
                useBuiltIns: "usage"  //只将用到的不存在语法打包到文件中
              },
            ],
          ],
        },
      },

②　第二种配置方式（使用插件，推荐）
安装相关模块：

npm install --save @babel/polyfill
npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime
npm install --save @babel/runtime-corejs2（corejsX，X取决于配置）

配置相关信息：

{
    test: /\.js$/,
    exclude: /node_modules/, // 告诉webpack不处理哪一个文件夹
    loader: "babel-loader",
      options: {
        "presets": [["@babel/preset-env", {  //可转换有对应关系的代码
            targets: {
               chrome: 58,
            },
             useBuiltIns: 'usage', //只将用到的不存在语法打包到文件中
        }]],
        "plugins": [
            [
               "@babel/plugin-transform-runtime",  //可转换没有对应关系的代码
                {
                   "absoluteRuntime": false,
                      "corejs": 2,//false:全局注入，会污染全局环境；2：不会污染全局环境
                      "helpers": true,
                      "regenerator": true,
                      "useESModules": false
                  }
              ]
         ]
     }
},

5、babel-使用技巧

①　查看错误提示
②　根据错误信息查询文档
③　根据文档缺什么安装配置什么