webpack通过hash控制文件缓存

常用hash的种类

1. hash 每次编译都会改变

     output: {
           filename: '[name].[hash:8].js',
       },
   

2. chunkhash chunk文件的hash变动

     output: {
           path: path.resolve(__dirname, '../dist'),
           filename: '[name].[chunkhash].js',
       },
   

3. contenthash 使css的hash不会随着entry改变需配合插件mini-css-extract-plugin使用

     plugins: [
   		 new MiniCssExtractPlugin({
   	      filename: '[name].[contenthash:8].css'
   		})
   	]
   

兼容处理

使用chunkhash来output后，使用dll插件的时候, vendor.js文件的hash值每次打包都会发生变化

为什么发生变化呢

1. chunkhash依赖于runtime
2. 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