webpack中的hash、chunkhash、contenthash区别

webpack中的hash、chunkhash、contenthash区别

hash

如果采用hash打包的文件都会采用相同的hash值（未经特殊处理下），如果一个文件改动，打包后，其他未改动的文件的hash值也会跟着改变。

chunkhash

采用chunkhash的话，打包后每个文件都有自己hash值。改动文件重新打包，只有被改动的文件和与这个文件关联的文件（如改动test.js，index.js引入了test.js，那么两个文件hash都会改变）的hash值会改变。

contenthash

在分离css文件时，如果css的文件名也采用chunkhash会发现，css文件和引入的js文件的hash是相同的。如果js文件改变，css文件未改变，也会导致css文件的hash值改变。css的hash值采用contenthash可以解决这个问题。

总结

js文件打包的hash值可以采用chunkhash的方式，css文件的hash值采用contenthash的方式

// 这里仅是重要代码的示例，非正确配置(基于webpack4)
module.exports = {
	output: {
	    filename: '[name].[chunkhash:8].js'
	  },
	  plugins: [
	  	new MiniCssExtractPlugin({
	      filename: 'css/[name].[contenthash:8].css'
	    })
	  ]
}

特别提醒

在开发阶段如果使用webpack热更新时，js的输出名称不能使用chunkhash，css的输出名称不能带hash值，否则会导致js文件无法加载，css文件热更新失效（需手动刷新网页）。

链接

本文基于以下文章的简单理解：
webpack中的hash、chunkhash、contenthash区别

Webpack 4 如何优雅打包缓存文件

webpack chunkhash或者contenthash和HMR不能共存