webpack配置polyfill 按需引入配置踩坑记录

polyfill 按需导入

ES6语法转换

1、我们在webpack打包得过程中都会遇到ES6语法转ES5的问题，而ES6转ES5分为两部分，一部分是let、箭头函数等语法转换； 另一部分是ES6新增像Promise、async等方法的转换。
2、语法转换配置简单如下：

3、新增方法转换如下：

当然记得提前下载对应的依赖
4、在通过上图配置转换ES6语法有一个问题，转换后的内容引入全部新增语法，而实际开发中你可能只用到了一小部分，这会造成不必要的资源浪费，所以我们需要的是，开发过程中用到哪些方法，引入哪些。配置如下：

entry: {
   index: './src/index.js'
},
module: {
    rules: [
        {
            test: /\.js$/,
            exclude: /node_modules/, //排除转换文件夹
            use: {
                loader: 'babel-loader',
                options: {
                    presets: [[
                        "@babel/preset-env",
                        {
                            useBuiltIns: "usage",
                        }
                    ]], //preset 转箭头函数和let等基础语法，
                }
            },
        },
    ]
},

需要注意的就是入口文件去掉’babel-polyfill’然后presets下配置useBuiltIns：“usage”，既可实现ES6+新增语法的按需加载。如果打包失败记得下载相应的依赖，我也不确定功能对应依赖的关系，所以，看报错自己添加吧，抱歉了，以下是我已安装依赖参考，