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

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