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

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