CommonsChunkPlugin

CommonsChunk 插件的做用就是提取代碼中的公共代碼，而後將公共模塊打包到一個獨立的文件中，以便在其它的入口和模塊中使用，原理就是把多個入口共同的依賴都給定義成一個新入口

多種打包狀況：

單一入口，模塊單一引用

var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
  entry: 
  {
    main:'./main.js',
  },
  output: {
    path:__dirname+'/dist',
    filename: 'build.js'
  },
  plugins: [
   
  ]
};

　　jquery 模塊被一塊兒打包到 build.js

 

單一入口，模塊重複引用

 

相同的模塊重複引用，webpack 只打包一份 webpack 打包的原理爲，在入口文件中，對每一個 require 資源文件進行配置一個 id，也就是說，對於同一個資源，就算是 require 屢次，它的 id 也是同樣的，因此不管在多少個文件中 require，它都只會打包一份 即內部的 __webpack_require__ 函數傳入統一 id 時，不會導入新的模塊，直接返回

個人理解是，只有在多入口，模塊重複引用時，使用 CommonsChunkPlugin 才能提取出重複打包的模塊。固然，也能夠在單入口時，提取出某些框架的代碼，減小請求次數

單一入口，提取框架模塊

var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
  entry: 
  {
    main:'./main.js',
    vendor: ["react", "react-dom", '其餘模塊'],//插件中 name，filename 以這個key爲值
  },
  output: {
    path:__dirname+'/dist',
    filename: '[name].js'//不使用[name]，而且插件中沒有filename，
    },
  plugins: [
   new CommonsChunkPlugin({
       name: 'vendor'
      // filename:"vendor.js"//忽略則以name爲輸出文件的名字，不然以此爲輸出文件名字
   })
  ]
};

　　打包出不變的框架模塊，能夠緩存在客戶端，服務端更新後客戶端只須要獲取新的 main.js

多入口，模塊重複引用，分文件輸出

多入口就是分別執行的單入口，彼此之間互不影響，而該插件的原理就是把多個入口共同的依賴都給定義成一個新入口

var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
    entry: {
        main: './main.js',
        main1: './main1.js',
        common1: ['jquery'],
        common2: ['vue']
    },
    output: {
        path: __dirname + '/dist',
        filename: '[name].js'//不使用[name]，而且插件中沒有filename，
        //這輸出文件中只用chunk.js的內容，main.js的內容不知跑哪裏去了
    },
    plugins: [
        new CommonsChunkPlugin({
            name: ["chunk","common1","common2"],//瀏覽器頁面上使用的時候 common2 必須最早加載
            // filename:"chunk.js"//忽略則以name爲輸出文件的名字，
                //不然以此爲輸出文件名字
            minChunks: 2 //默認值
        })
    ]
};

　　jquery 被打包到 common1.js ,vue 被打包到 common2.js,chunk.js 打包的是公共的業務模塊(webpack用插件CommonsChunkPlugin進行打包的時候，將符合引用次數(minChunks)的模塊打包到 name 參數的數組的第一個塊裏（chunk）,而後數組後面的塊依次打包(查找 entry 裏的 key,沒有找到相關的 key 就生成一個空的塊)，最後一個塊包含 webpack 生成的在瀏覽器上使用各個塊的加載代碼，因此頁面上使用的時候最後一個塊必須最早加載)