webpack中hash、chunkHash、contentHash的区别

webpack中hash、chunkHash、contentHash的区别

文件目录：
index.js依赖common.js和base.less

hash

Hash：和整个项⽬的构建相关，只要项⽬⽂件有修改，整个项⽬构建的hash值就会更改。这样会导致缓存失效。

项目中的文件只要有一个文件改变，那么整个项目文件的hash都会改变。

chunkhash

chunkhash：和webpack 打包的chunk 有关，不同的entry 会⽣成不同的chunkhash值

只有在改变某个chunk的文件时，才会生成对应的hash。比如我改变了index依赖的base.less文件构建结果如下，会发现index对应的hash改变了，而page对应的hash没有改变。

contenthash

contentHash：根据⽂件内容来定义hash ，⽂件内容不变，则contenthash不变，在项目中，通常做法是把项目中css都抽离出对应的css文件来加以引用。


如果修改了base.less文件打包看一下：
css文件和依赖less文件的chunk会发生改变。

使用经验总结

1. ouput打包出口使用 chunkhash
2. css使用contenthash
3. 图片、字体使用hash