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值没有改变,这样才是我要的正确打开方式嘛,对缓存有需求的同学可以照此方法试下