webpack 提出babel相關代碼做爲獨立文件1

webpack配置中對js的編譯通常都用的babel-loader.

咱們能夠創建一個.babelrc文件，在根目錄下，和pakeage.json平級。babel-loader會自動去讀取其中的代碼。
webpack配置：

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

.babelrc文件:(具體能夠去babel官網瞭解一下)

{
    "presets": ["react", "es2015", "stage-0"],
    "plugins": [
        ["transform-runtime",{
             "helpers": true, // defaults to true; v6.12.0 (2016-07-27) 新增;
             "polyfill": false, // defaults to true
             "regenerator": true, // defaults to true
             // v6.15.0 (2016-08-31) 新增
             // defaults to "babel-runtime"
             // 能夠這樣配置
             // moduleName: path.dirname(require.resolve('babel-runtime/package'))
             "moduleName": "babel-runtime"
        },"lodash"],
        "transform-decorators-legacy"
    ],
    "env": {
        "development": {
            "presets": ["react-hmre"]
        }
    }
}

babel-loader源碼：(能夠看就在讀取babelrc)

var defaultOptions = {
    metadataSubscribers: [],
    inputSourceMap: inputSourceMap,
    sourceRoot: process.cwd(),
    filename: filename,
    cacheIdentifier: JSON.stringify({
      "babel-loader": pkg.version,
      "babel-core": babel.version,
      babelrc: exists(userOptions.babelrc) ? read(userOptions.babelrc) : resolveRc(path.dirname(filename)),
      env: userOptions.forceEnv || process.env.BABEL_ENV || process.env.NODE_ENV || "development"
    })
  };

看源碼的時候能夠先去看包下的package.json文件，找main屬性，會有當前包的入口文件，從入口文件看起，默認是index.js

關於.babelrc的pulgins能夠去看babel-polyfill和babel-runtime，如今回到正題

當不配置transform-runtime,打包後生成的文件，好比你建立一個類，他就會建立一個_createClass函數，因此當你有不少類時，重複代碼就太多了。因此咱們選擇使用transform-runtime,它包含了babel-runtime,在這種狀況下，打包出來就又是很大，直接在當前文件內部就引入了babel-runtime相關的modules.(QAQ 表達的不太好...)

不配置transform-runtime時：
打包後app.js大概5KB
文件內部會有對應的函數，相似代碼塊比較多的時候就很差了。

配置transform-runtime時：
文件打包大概60多KB:
文件內部有不少babel-runtime core-js的module

大概這就是區別吧。而後把這些babel-runtime提出去，讓編譯後文件更加易讀，更加有分類。

原理：
compilation 監聽 optimize-chunks，會返回一個chunks，包含了全部已經處理好的chunks，而後經過compilation添加一個chunks，名字就叫babel吧，就有個新的空的chunks。

1. 遍歷全部的chunks的modules,查看每一個模塊的來源名稱，匹配相關babel-runtime和core-js的路徑，(我目前找不到屬性能代表當前module屬於babel的)，而後存放到一個modules數組裏。

2. 判斷modules數組是否不爲null，在不爲null的狀況下，建立一個新的chunks，名字你能夠本身起啊，我就先叫babel了，如今就有一個空的babelchunk和modules數組。

3. 先刪除chunk裏面的modules,再把modules數組裏的module放入babelchunk裏面。

4. 處理依賴，babelchunk至關因而父親節點了。以前含有modules數組裏的module的usedchunk的parents添加babelchunk,babelchunk的chunk添加usedchunk。順便處理下編譯文件輸出的路徑位置。用entrypoint屬性決定的。

(完了 代碼還沒交，萬一有更好的解決方案呢)