CommonsChunkPlugin详解

在不指定的情况下，要提取的公共模块需要在入口文件里显式声明。

// main.js
import Vue from 'vue'
import App from './App.vue'
import _ from "underscore";

new Vue({
  el: '#app',
  render: h => h(App)
})

// main2.js
import _ from "underscore";

这种情况下，plugin会自动判断出 import 了两次 underscore，把他当作公共模块提出去。上文中 vue 实例所有对于 underscore 的引用在打包的时候都不会被重复打包。

---

在非指定的情况下，如果多入口文件，一定要每个入口都引用。这个才被认为是公用模块。minchunk可以控制这种颗粒度。

// main.js
import Vue from 'vue'
import App from './App.vue'
import _ from "underscore";

new Vue({
  el: '#app',
  render: h => h(App)
})

// main2.js
import _ from "underscore";

// main3.js
console.log('啥都没有');

由于 main3.js 里没有引入，这种情况下不会有提取动作。如果配置了 minchunk = 2,则由于确实出现过两次，则会有提取动作。言下之意就是，只要设置了minchunk = 2，如何被引入两次的都会被打包，往上加就是控制精细度。

  entry: {
      main: './src/main',
      main2: './src/main2',
      main3: './src/main3',
  },

  // ... some code

  new webpack.optimize.CommonsChunkPlugin({
      name: 'minifest',
      minChunks: 2,
   }),

---

关于指定提取公共模块以及模块寻址。

可以通过在入口文件传入模块名字来指定要提取的模块。传递的可以是模块名，也可以是路径。按照 node 默认的查找模块的方式来寻址：

entry: {
    main: './src/main',
    minifest: ['underscore'], // 传入名称
    main2: './src/main2',
    main3: './src/main3',
},

// ...some code 

new webpack.optimize.CommonsChunkPlugin({
       name: 'minifest', // 这个是唯一的必填项，指定入口文件的名字
}),

也可以多个实例，第一个用来制定模块，第二个用来让程序自己判断（但是实际上不会有这么多入口文件）。注意一下实例的顺序，不然会报错。
自动判断和指定模块两个模式并存不会有重复打包的问题。

  entry: {
      main: './src/main',
      minifest: ['underscore'],
      main2: './src/main2',
      main3: './src/main3',
  },

    new webpack.optimize.CommonsChunkPlugin({
        name: 'minifest',
    }),

    new webpack.optimize.CommonsChunkPlugin({
        name: 'minifest2',
        minChunks: 2,
    }),

---

关于缓存

用 CommonsChunkPlugin 不用关心缓存的问题，只要出口文件配置的是 hashchunk 每次提取后都会用内容生产 hash 来做缓存。

---

模块标识符

简单来说，webpack 对于每个入口文件中 import 的模块都会给一个 module.id，所以一旦入口文件多 import 或者少 import 了一个，原本 module.id 就发生了变化（可能因为这个 module.id 不是单纯的增量变化，不是简单的数字）。
具体点击【webpack-缓存】查看

这个时候推荐使用内置插件，hashedModuleIdsPlugin来处理。

其他没了，基本上。