webpack CommonsChunkPlugin的一些总结，以及如何分别打包公共代码和第三方库

CommonsChunkPlugin

官方文档地址
https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin

new webpack.optimize.CommonsChunkPlugin(options)

---

相关设置总结

• options.name or options.names (string|string[])
  设置公共代码块的name。
  • 如果name的值不与任何已存在的chunk相同，则会从options.chunks中提取出公共代码，并形成新的chunk，并以options.name去设置该chunk的name
  • 如果name选中的是已存在的chunk，则会从options.chunks中提取出被name选中的chunk。
  • 如果name是不存在的chunk，则会根据其他配置提取出公共chunk，并将该chunk的name值设为opitons.name的值
  • 如果name是个数组，则等同于每个name轮番调用该插件。
  • 与options.filename的区别。options.filename是chunk的文件名的，而options.name相当于chunk的唯一标识符，在filename值省略的情况下，options.filename会默认取options.name的值。

官方文档及个人翻译

The chunk name of the commons chunk. An existing chunk can be selected by passing a name of an existing chunk. If an array of strings is passed this is equal to invoking the plugin multiple times for each chunk name. If omitted and options.async or options.children is set all chunks are used, otherwise options.filename is used as chunk name.

公共chunk（代码块，个人习惯叫chunk）的chunk name值。通过传入一个已存在的chunk name的值可以选中该chunk。传入一个数组的话就等同于用每一个name轮番调用。如果省略该值并且options.async或options.children被设为了全部chunks可用，则options.filename会被用作name的值。

• options.filename (string)
  设置代码块的文件名称
• options.chunks (string[])
  设置公共代码的入口文件。默认是所有的entry。
• options.minChunks (number|Infinity|function(module, count) -> boolean)
  设置最小被引用次数，最小是2
• options.children (string[])

If true all children of the commons chunk are selected.

• options.async (boolean|string)

If true a new async commons chunk is created as child of options.name and sibling of options.chunks. It is loaded in parallel with options.chunks. It is possible to change the name of the output file by providing the desired string instead of true.

• options.minSize (number)

Minimum size of all common module before a commons chunk is created.

---

如何分别打包第三方库和公共代码库

{
  entry: {
    // 主入口文件1
    main1: './mian1.js',
    
    // 主入口文件2
    mian2: './mian2.js',
    
    // 第三方库
    vendor: [
      'vue',
      'vuex',
      'whatwg-fetch',
      'es6-promise'
    ],
  },

  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'js/[name].bundle.js'
  },
  
  // ...
  // ...
  // ...
  
  plugins: {
    // 将 main1 和 main2 的公共代码提取出来打包
    new webpack.optimize.CommonsChunkPlugin({
      name: 'common',
      chunks: ['main1', 'main2'],
      filename: 'js/common.bundle.js',
      minChunks: 2,
    }),

    // 将 vendor 从 common 中提取出来分别打包
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      chunks: ['common'],
      filename: 'js/vendor.bundle.js',
      minChunks: Infinity,
    }),
  },
}

结果：
打包出四个文件。

1. main1.bundle.js // 仅包含 main1.js 独有代码
2. main2.bundle.js // 仅包含 main2.js 独有代码
3. common.bundle.js // 包含main1 和 main2 的公共代码（不包含第三方库）
4. vendor.bundle.js // 仅包含第三方库

---

作者博客：pspgbhu http://www.cnblogs.com/pspgbhu/

作者GitHub：https://github.com/pspgbhu

欢迎转载，但请注明出处，谢谢！