[webpack] 第2037天 在webpack中，Chunkhash和Contenthash有什么区别？

[haizhilin2013]

第2037天 在webpack中，Chunkhash和Contenthash有什么区别？

3+1官网

我也要出题

[Elylicery]

在Webpack中，chunkhash和contenthash都是用于生成文件名的哈希值，但它们有不同的用途和生成方式。以下是它们的区别：

chunkhash: 用于根据整个chunk内容生成哈希值。这意味着所有属于同一chunk的模块的变化都会导致chunkhash的变化。

• 生成方式: 每个chunk（例如一个entry point及其依赖的模块）会被赋予一个唯一的哈希值。即使一个chunk中只有一个文件变化，该chunk的chunkhash也会更新。
• 使用场景: 适合在需要根据单个入口点及其依赖关系来生成哈希值的场景。例如，在为JavaScript文件分配哈希时，以确保当任何模块变化时，整个chunk会被正确更新。

contenthash: 基于文件内容生成的哈希值。因此，只要文件内容不变，contenthash就不会变化。

• 生成方式: 独立只与文件自身内容相关的哈希值。文件之间的修改不会相互影响各自contenthash。
• 使用场景: 特别适合用于CSS文件或者单独的文件资源。因为它保障了只要文件内容不发生变化，文件名就不会变化，从而最大化利用浏览器缓存。当CSS内容不变时，contenthash使得发版后仍能使用缓存版本。

总结来说，chunkhash是针对整个chunk的变化而变化，而contenthash是针对文件内容的变化而变化。