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 生成的在浏览器上使用各个块的加载代码，所以页面上使用的时候最后一个块必须最先加载)