全面回忆

张棣

webpack基础配置（一）

• 分类: 工程化 • 标签: webpack

Entry、Chunk、Vendor以及CommonsChunkPlugin

1. Entry

webpack打包编译的入口，可以指定多个入口。

2. Chunk

webpack会按照依赖关系，将所有文件打包到一个bundle当中，如果需要将某些文件单独打包，则需要chunk，使用chunk需要在代码中建立分割点（require.ensure('module', fn)|require('mudule', fn)）,前面的方法是commonjs的实现，后面的是requirjs的实现。这样webpack在打包的时候就会单独打包。

3. Vendor

第三方库不需要打包到发布的文件中，这时就需要vendor，将第三方包打包成一个chunk。

webpack将chunk类型分为三种Entry chunk，Normal chunk，Initial chunk。

(1) Entry chunk

包括两部分内容，webpack运行代码和打包的模块。

(2) Normal Chunk

只包含打包的模块

(3) Initial Chunk

实质为Normal Chunk，只包括打包的模块，但是他会计入载入时间，比Normal Chunk更重要。

4. Commons chunk

通过CommonsChunkPlugin可以将各模块的公共依赖单独打包成一个chunk，这时webpack的运行代码会被移到common chunk中，原来的entry chunk也将变为initial chunk。

通过vendor entry和CommonsChunkPlugin的配合，可以实现第三方库和app代码的分离。

1
2
3
4
5
6
7
8
entry: {
   app: './app.js',
   vendor: ['jquery', 'lodash']
},
plugins: {
	new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js')   
}

这样app里面对第三方的依赖都将被删除掉，只保留依赖关系，第三方库将单独打包成vendor.bundle.js。

CommonsChunkPlugin配置项：

  1. nameornames chunk的名称。
  2. filenamechunk文件名称，默认为output.filename或者output.chunkFilename
  3. minChunks被几个chunk调用的moudule才会加入common chunk中，最小值为2。如果设置为Infinity，则不会有module加入到common chunk中
  4. chunks需要提前common的源文件，默认为全部入口文件。