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属性决定的。

(完了 代码还没交，万一有更好的解决方案呢)