重構之路：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的語法