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

歡迎轉載，但請注明出處，謝謝！