在日常的前端开发中，Webpack 算得上是一个必不可少的工具。Webpack 的核心是将各种资源打包合并成一个或多个文件以在浏览器中使用。而在进行文件编译的过程中，Webpack 提供了三种 hash 算法用于命名打包后的文件，分别是 hash、chunkhash 和 contexthash。
hash
hash 是 Webpack 中最基本的一种打包文件命名方式，它是根据整个项目的编译内容计算而来的。这意味着如果有任意一个文件发生变化，整个项目的打包结果都会发生变化，即使只是修改了一个文件。因此，每次进行打包时都会生成一个全新的 hash，也就是说它不同于其他两种 hash，因为 hash 是根据整个项目进行计算的，所以最适用于单页面应用。
使用方法
在 Webpack 配置文件中，可以通过以下方式使用 hash：
output: {
filename: '[name].[hash].js',
}Webpack 会自动根据当前项目的编译内容计算出一个唯一的 hash 值，这个值可以在打包后的文件名上查看到。
chunkhash
chunkhash 与 hash 相同，只不过它是基于模块内容的，而不是基于整个项目的。这意味着只有修改到的模块的 hash 值才会被更改，其他模块的 hash 值都不会改变。因此，使用 chunkhash 可以有效地利用浏览器的缓存机制，减少服务器的负载。
使用方法
在 Webpack 配置文件中，可以通过以下方式使用 chunkhash：
output: {
filename: '[name].[chunkhash].js',
}在使用 chunkhash 进行打包时，Webpack 会自动计算出每个模块的 hash 值，并将它们组合成一个唯一的文件名。因此，当一个或多个模块发生变化时，只有与它们相关的文件名才会被更改。
contenthash
contexthash 是 Webpack 基于内容变化而打包的一种命名方式，它是根据文件内容进行计算的。与前两者不同的是，只有文件的内容发生了变化，contexthash 的值才会改变。因此，这种方式特别适用于将 CSS 或其他静态资源打包成独立的文件。
使用方法
在 Webpack 配置文件中，可以通过以下方式使用 contexthash：
-- -------------------- ---- -------
----- -------------------- - -----------------------------------
-------------- - -
------- -
------ -
-
----- ----------
---- -
----------------------------
-------------
--------------
-
------- --------------
-------- -
---------- -----
--
--
--
--
--
--
-------- -
--- ----------------------
--------- ---------------------------
---
--
--在使用 contexthash 进行打包时，Webpack 会根据内容计算出一个唯一的 hash 值，并将其与对应的文件名组合起来。因此，只有文件内容被更改后，才会生成新的文件名。
使用场景
在实际项目中，根据不同的需求使用不同的 hash 算法可以使得打包后的代码具有更优秀的缓存机制。下面分别介绍一下它们的使用场景。
hash
如果你的项目是一个单页面应用，即只有一个入口文件，并且页面的内容较少，那么使用 hash 是一个不错的选择。每次进行打包后，可以得到一个全新的 hash，这可以保证浏览器中的旧缓存被覆盖，达到更新页面的目的。
chunkhash
当你的项目中有多个入口文件，或者多个模块的初始代码（init chunk）相同，却使用了不同的运行环境（如不同的 vendor），那么使用 chunkhash 会更好。每个入口文件或者模块都有一个唯一的 chunkhash，这使得您可以利用浏览器缓存，仅在内容更新时更新相应的文件。
contenthash
如果你的项目包含了大量的静态资源（如 CSS 文件），那么使用 contenthash 会更好。静态资源的内容往往比较稳定，因此使用 contenthash 可以让浏览器缓存更加有效，减少服务器的负载。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c94050e46428fe9e0667cf
