webpack之使用babel把ES6语法转为ES5语法

安装：
npm i -D babel-loader @babel/core
npm i -D babel-loader@8 // 安装版本号是8的

{
    test: /\.js$/,
    exclude: /node_modules/, // 如果js在node_modules则不使用
    loader: "babel-loader",
    options: { // 放到单独的.babelrc文件
        presets: [["@babel/preset-env", { // 会污染全局环境
            targets: {
                chrome: "67", // 设置chrome版本67以上不需要es6转es5
            },
            useBuiltIns: 'usage' 
            // 当使用@babel-polyfill时，只把当前使用的es6语法给引入
            // 不引入全部的，可以减少js的大小
        }]]
    }
},

babel-loader是babel和webpack的通信桥梁，还要继续安装@babel/preset-env 

npm i -D @babel/preset-env // 把es6语法翻译成es5语法

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

 还需要 @babel/polyfill 补充变量和函数在低版本中无法使用的情况

npm i --save @babel/polyfill // 弥补低版本浏览器不支持转es5语法 可直接在js文件中使用 import "@babel/polyfill"; 

useBuiltIns: 'usage' 
// 当使用@babel-polyfill时，只把当前使用的es6语法给引入
// 比如使用了promise，只引入promise,
// 不引入全部的，可以减少js的大小

 =====

npm i -D @babel/plugin-transform-runtime npm i --save @babel/runtime npm i --save @babel/runtime-corejs2

{
    test: /\.js$/,
    exclude: /node_modules/, // 如果js在node_modules则不使用
    loader: "babel-loader",
    options: { // 放到单独的.babelrc文件
        "plugins": [ // 可避免polyfill污染全局环境
            [
                "@babel/plugin-transform-runtime",
                {
                    "absoluteRuntime": false,
                    "corejs": 2, // npm i --save @babel/runtime-corejs2
                    "helpers": true,
                    "regenerator": true,
                    "useESModules": false
                }
            ]
        ]
    }
},

 可在主目录下创建.babelrc文件，内容为options下的内容

{
    presets: [
        [
            "@babel/preset-env",
            {
                targets: {
                    chrome: "67"
                },
                useBuiltIns: 'usage'
            }
        ]
    ],
    "plugins": ["@babel/plugin-syntax-dynamic-import"]
}