转载

webpack 学习笔记 —— 打包公共代码

在多页应用中，存在多个入口，每一个入口都意味着一整套的 js 代码（包括业务逻辑、加载的第三方库），如果我们只是配置入口，那么后果就是打包出来的每一个入口文件都包含完整的代码。

CommonsChunkPlugin

CommonsChunkPlugin 做的事情是：在你的多个入口所引用的代码中，找出其中被多个页面引用过的代码段，判定为公共代码打包成一个独立的 js 文件。至此，只需要在每个页面加载这个公共代码段的 js 文件，既可以保持代码的完整性，又不会下载公共代码。

使用 Plugin

大部分 Plugin 的使用方法都有一个固定的套路

利用 Plugin 的初始方法并传入预设参数进行初始化，生成一个实例
将此实例插入到 webpack 配置文件中的 plugins 参数即可

CommonsChunkPlugin 的初始化参数

name ：给这个包的公共代码一个统一标识
filename ：如何命名打包后产生的 js 文件，可以用 [name] [hash] [chunkhash]
minChunks ：某个 js 模块被多少个 chunk 加载才算是公共代码
chunks ：表示在哪些 chunk 里面寻找公共代码进行打包，默认提取范围所有的 chunks

var commonsChunkPlugin = new webpack.optimize.CommonsChunkPlugin({
 name: 'commons', // 这公共代码的 chunk 名为 'commons'
 filename: '[name].bundle.js', // 生成后的文件名 commons.bundle.js
 minChunks: 4 // 设定要有 4 个 chunk（即4个页面）加载的 js 模块才会被纳入公共代码
});

原文 http://mertensming.github.io/2017/01/29/commons-chunk/

正文到此结束