重构之路：webpack配置es6语法

开始

以前已经写好了最简单的一个webpack配置，而且已经能够运行js了，可是，新时代的前端确定要写es6啊，可是咱们在index.js里写上es6的语法时，好比：

//使用es6里的set和扩展运算符来实现数组去重
var set=new Set([1,2,2,3,3,4,4,5,5]);
console.log([...set]);//[1,2,3,4,5]

//顺便写一个一行代码实现数组去重，这个也算个面试题了
[...new Set([1,2,2,3,3,4,4,5,5])]//[1,2,3,4,5]
复制代码

这个时候打包运行代码，在谷歌下能够正常运行，这是由于谷歌自己就支持这样的语法，可是在IE下会报这样的错（万恶的IE），因此咱们要使用polyfill来转化它。

默认状况下babel能够将箭头函数，class等语法转换为ES5兼容的形式，可是却不能转换Map，Set，Promise等新的全局对象，这时候就须要使用polyfill去模拟这些新特性

咱们在控制台执行：

yarn add @babel/polyfill @babel/runtime //注意这里不加-D
yarn add @babel/plugin-transform-runtime -D
复制代码

而后咱们在webpack.config.js里配置：

{
                test:/\.(js)$/,
                exclude: '/node_modules/',
                include:path.resolve(__dirname,'src'),
                use:[
                    {
                        loader:'babel-loader',
                        options:{
                            presets:[
                                '@babel/preset-env',
                            ],
                            plugins:[
                                "@babel/plugin-transform-runtime"
                            ]
                        }
                    }
                ]
            }
复制代码

而后在index.js里的顶部写上：

import "@babel/polyfill" //添加这一行

var set=new Set([1,2,2,3,3,4,4,5,5]);
console.log([...set]);
复制代码

而后咱们再去控制台里执行webpack，咱们发现打包后的体积忽然变得这么大？以前明明只有几kb的。这是由于polyfill本身实现es6的兼容语法，将不少不少的兼容语法打包到一块儿了，致使包体积变大。

上面咱们还添加了runtime插件，这个插件后期能够和@babel/preset-env实现按需加载，因此这里先配置了。 （ps：咱们在后面的章节会说如何去优化包体积的）

而后咱们打开index.html页面，在IE下变成了下面这样，咱们就完成了配置es6的语法