常用hash的种类
-
hash 每次编译都会改变
output: { filename: '[name].[hash:8].js', },
-
chunkhash chunk文件的hash变动
output: { path: path.resolve(__dirname, '../dist'), filename: '[name].[chunkhash].js', },
-
contenthash 使css的hash不会随着entry改变需配合插件mini-css-extract-plugin使用
plugins: [ new MiniCssExtractPlugin({ filename: '[name].[contenthash:8].css' }) ]
兼容处理
使用chunkhash来output后,使用dll插件的时候, vendor.js文件的hash值每次打包都会发生变化
为什么发生变化呢
- chunkhash依赖于runtime
- webpack runtime由于entry对应的Id变化而发生了变化
如何解决这个问题呢
HashedModuleIdsPlugin
new webpack.optimize.CommonsChunkPlugin({ names: ['vendor', 'manifest'], minChunks: Infinity})
new webpack.HashedModuleIdsPlugin()
使用插件 HashedModuleIdsPlugin
NamedModulesPlugin
这个插件是根据chunk在项目的相对路径命名模块id,只要vendor中的模块在根目录下的路径不变,但是路径字符会导致文件大小剧增
plugins: [
new webpack.NamedModulesPlugin(),
new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', minChunks: Infinity })
]
参考文章:
https://sebastianblade.com/using-webpack-to-achieve-long-term-cache/#hash
https://juejin.im/entry/59b0dde46fb9a024844959a1/detail
https://www.cnblogs.com/tugenhua0707/p/9615822.html