webpack的Babel加載器

Babel

Babel的轉譯過程分爲三個階段: parsing, transforming, generating。babel只是轉譯新標準引入的語法，好比ES6的箭頭函數轉譯成ES5的函數；而新標準引入的原生對象，部分原生對象新增的原型方法，新增API等(如Proxy, Set等)，這些babel是不會轉譯的，須要用戶自行引用polyfill來解決。

Babel轉譯過程：
解析parsing：將代碼字符串解析成抽象語法樹
變換transforming：對抽象語法樹進行轉換操做
生成generating：根據變換後的抽象語法樹再生成代碼字符串

plugins

插件應用於babel的轉譯過程，尤爲是第二階段transforming，若是這個階段不使用任何插件的話，babel會原樣輸出代碼。咱們主要關注第二階段使用的插件，由於tranform插件會自動使用對應的詞法插件，因此parsing階段的插件不須要配置

presets預設

爲了減小配置轉譯過程當中使用的各種插件的麻煩，babel官方作了一些預設的插件集。
JS標準爲例，babel提供了以下的一些preset:
es2015, es2016, es2017, env
es20xx的preset只轉譯該年份批准的標準，而env則代指最新的標準，包括lastest和es20xx。
另外，stage-0到stage-4的標準成型以前的各個階段，實驗版的presets

stage-0: 稻草人，只是一個想法，多是babel插件
stage-1: 提案，初步嘗試
stage-2: 初稿，完成初步規範
stage-3: 候選，完成規範和初步的瀏覽器實現
stage-4: 完成，將被添加到下一年度發佈

babel-loader

用來處理ES6語法，將其編譯成瀏覽器能夠執行的js語法。

module.exports = {
  ...
  module: {
    rules: [{
      test: /\.jsx$/
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env'],//presets設置的就是當前js版本
          plugins: [require('@babel/plugin-transform-object-rest-spread')]//須要的插件
        }
      }
    }]
  }
};

options屬性來給loader傳遞選項

babel-poyfill

polyfill會把ES2015+環境總體引入代碼環境中，讓你的代碼能夠直接使用新標準所引入的新原生對象。

要確保在入口處導入 polyfill，由於 polyfill代碼須要在全部代碼前先被調用

module.exports = {
  entry: ['babel-polyfill', './app/js']
};

babel-plugin-transform-runtime

babel-plugin-transform-runtime插件依賴babel-runtime, babel-plugin-transform-runtime插件是把js代碼中使用的新原生對象和靜態方法轉換成對babel-runtime包的引用。

未完待續，繼續學習繼續補充哦~

參考文獻
【JavaScript】深刻理解Babel原理及其使用