webpack中配置Babel

　　Babel是一個javascript編譯器，可以將ES6和更新的js語法轉換成ES5的，使代碼在較老的瀏覽器里也能正常運行。

一、安裝

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

二、在webpack.config.js中配置module

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      loader: 'babel-loader'
    }
  ]
}

三、新建.babelrc配置文件

　　如下是vue-cli自動生成的babel配置。如果要配置plugins，需要npm install對應插件和依賴。

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime"]
}

四、polyfill：完整模擬ES2015+ 

　　Babel默認只轉換新的JavaScript句法，而不轉換新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局對象，以及一些定義在全局對象上的方法（比如Object.assign）都不會轉碼。如果想讓這些方法運行，就需要使用babel-polyfill，為當前環境提供一個墊片。

npm install --save babel-polyfill

// 方法一：在webpack中引用
module.exports = {
  entry: ["babel-polyfill", "./app/js"]
};

// 方法二：在js入口頂部引入
import "babel-polyfill";