CommonChunks 插件

作用就是提取代码中的公共模块, 然后将公共模块打包到一个独立的文件中, 以便在其他的入口和模块中使用.

// in main.js
var a = require('./a');
a.sayHello();

var b = require('./b');
b.sayHello();

var c = require('./c');
c.sayHello()
`</pre>

<pre>`// in main2.js
var a = require('./a');
a.sayHello();

var b = require('./b');
b.sayHello();
`</pre>

a, b, c 和之前一样, 只有一个 sayHello 方法.

打包后看到`bundle.main.js` 和`bundle.main2.js` 中分别包含了 a, b, c 三个模块, 其中 a, b 是要使用`CommonChunksLoader` 提取出来的公共模块.

### 配置 CommonChunksLoader

<pre>`var webpack = require('webpack');
module.exports = {
  entry:{
    main1: './main',
    main2: './main2'
  },
  output:{
    filename: 'bundle.[name].js'
  },
  plugins:[
    new webpack.optimize.CommonsChunkPlugin('common.js',['main1','main2'])
  ]
} ;
`</pre>

第一行中, 添加 webpack 引用, 然后添加`plugins` 选项, 引用`webpack.optimize.CommonsChunkPlugin` 来提取公共模块, 参数`common.js` 表示公共模块的文件名, 后面的数组表示依赖这个模块的入口文件.

重新打包后, 生成三个文件

<pre>`bundle.main1.js,
bundle.main2.js
common.js

其中 bundle.main1.js 只包含了c模块, bundle.main2.js则没包含任何模块.

当然, 生成了common.js 还需要在 html 中进行引用, 而且要先于 main1, main2