CommonsChunkPlugin正确打开方式
说来惭愧，用了这么久的webpack，从最开始的一通全部打包进一个文件
module.exports = {
entry: './app.js'
}
发现这样无法利用缓存，只要一修改代码，hash肯定会变，客户端缓存的文件就没意义了，就得全部reload。
于是再次查阅webpack，找到了CommonsChunkPlugin的插件，这下好了，可以把公共第三方模块提出来了，于是变成了
module.exports = {
entry: {
app: './app.js',
vendor: ['react', 'react-dom', 'moment' /*等等其他的模块*/]
},
//其他配置
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor'
})
]
}
打包后会多出一个vendor.[chunkHash].js的文件，大致查看内容，不错，已经把第三方库给分离开了，也就再没往下细看了，在index.html中引入进去，觉得也就万事大吉了。
但最近自己做vue-cnode-mobile无意中刚发现，vendor的hash在每次不管修改哪个文件后重新打包其实都在变化的，泪奔，原来当初把vendor搞出来，只是提出了公共模块，但只要一发布版本，hash肯定变了，对缓存没有半毛钱的作用啊，才发现这个问题，真是惭愧啊
随意修改入口文件任意地方
再次打包
可以看出，再次打包后的vendor文件hash值改变了，为了解决这个问题，再次查阅webpack，在webpack2的文档中，翻到了解决方法，主要是为了学习webpack2，顺便翻到了
module.exports = {
entry: {
app: './app.js',
vendor: ['react', 'react-dom', 'moment' /*等等其他的模块*/]
},
//其他配置
plugins: [
new webpack.optimize.CommonsChunkPlugin({
names: ['vendor', 'manifest']
})
]
}
打包后，会多出个mainfest文件，但我们需要的vendor的hash值没有改变，这样才是我要的正确打开方式嘛，对缓存有需求的同学可以照此方法试下
回复 (27)
多出的mainfest文件是什么
哈哈，这个问题也是困扰我啊，我之前也是想，要是 vendor 的 hash 都变了。做这个 vendor 的意义好像就少了一点。 这个解决办法之后我试试
The issue here is that on every build, webpack generates some webpack runtime code, which helps webpack do it's job. When there is a single bundle, the runtime code resides in it. But when multiple bundles are generated, the runtime code is extracted into the common module, here the vendor file.
webpack每次build的时候都会生成一些运行时代码。当只有一个文件时，运行时代码直接塞到这个文件中。当有多个文件时，运行时代码会被提取到公共文件中，也就是楼主的vendor
@Hi-Rube 多出的mainfest，感觉应该是服务器run时的一些code，直接影响到hash值，用mainfest单独抽出来了，这样vendor的hash就不会变了，就可以将vendor缓存掉了，mainfest的hash虽然每次在变，但很小，比起vendor，要好得多vue-cnode-mobile
@alsotang 恩恩，我也是在尝试，vendor的hash确实没有变
vue-cnode-mobile
@wengqianshan 接着把下面一句翻译了 To prevent this, we need extract out the runtime into a separate manifest file. Even though we are creating another bundle, the overhead is offset by the long term caching benefits that we obtain on the vendor file. 为了阻止这种情况，我们需要将运行环境提取到一个单独的manifest文件里。及时我们创建了另一个bundle，但从长远来看，这种消耗比单独放在一个vendor中获得的收益要大
nice
webpack 1 不知道行不行 晚些试验下
@Galen-Yip 嗯，可以用的vue-cnode-mobile
@soliury ddl这个看着也不错，到时候试下，貌似能提高打包效率vue-cnode-mobile
这里面讨论了这个奇葩问题： https://github.com/webpack/webpack/issues/1315， webpack-md5-hash 可以临时解决这个问题
其实只要这样即可
plugins: [
new webpack.optimize.CommonsChunkPlugin({name: 'vendor'}),
new webpack.optimize.CommonsChunkPlugin({name: 'mainifest', chunks: ['vendor']})
]
不错 来自吊吊的 cnode-vue
@OYsun 赞
我一直以为 manifest 是缓存文件的路过，原来是 runtime 的代码。我说为啥这个用 js 结尾。。
mark
manifest 是 webpack 的 runtime，里面包含了 jsonp 方法的定义和其它 JS 的路径 mapping，因为你改了 app 会导致 runtime 里的路径改变，如果放在 vendor 中，会导致 vendor 无法长缓存。所以多出一个文件。
@XGHeaven haha...
@Galen-Yip webpack1 还是可以使用的 但是，不能和OccurrenceOrderPlugin 一起使用，如果没有OccurrenceOrderPlugin那么 导出html的顺序是 manifet->vendor->app 但是 如果用了OccurrenceOrderPlugin 那么顺序就错了 变成manifet->app->vendor 有人知道理由么 @Hi-Rube @alsotang @wengqianshan @soullcm
6666
mark
@yongningfu
plugins: [
// webpack 1
- new webpack.optimize.OccurenceOrderPlugin()
// webpack 2
- new webpack.optimize.OccurrenceOrderPlugin()
]
@wengqianshan 还能有这样子的 我得重新试试 感谢回复哈
可以参考这篇文章webpack代码分割技巧
如果说我早就知道了呢能汉有给我加精。加不加hash就是为了缓不缓存如果是在开发阶段肯定要加上去的啊。
@JasonBoy 我用了这个插件之后，manifest.js 的hash一直没变，但是manifest.js 的内容变了，这个问题有人遇到过么，怎么解决呢