在 Webpack 中，chunkhash 和 contenthash 是两个重要的概念，它们都用于生成文件名的哈希值。本文将详细介绍这两个概念的区别以及使用方法，并带有实际示例代码，希望能够帮助读者深入理解。
chunkhash 和 contenthash 的区别
chunkhash
chunkhash 是 Webpack 在打包时为每个 Chunk 生成的哈希值。在 Webpack 中，Chunk 是代码块的意思，每个 Chunk 中包含了若干个模块，每个模块对应一个文件。当我们在开发中使用了多个入口文件时，Webpack 会将它们打包成不同的 Chunk，而每个 Chunk 的 chunkhash 值都是不同的。
当我们使用 chunkhash 作为文件名哈希值的时候，如果其中一个 Chunk 发生了变化，那么该 Chunk 对应的文件名也会发生变化，而不会影响其它 Chunk 相关的文件名。
示例代码：
-- -------------------- ---- -------
-------------- - -
------ -
---- ---------------
------- -----------------
--
------- -
--------- -----------------------
-
--contenthash
contenthash 则是以文件内容为基础生成的哈希值。每个文件都有自己的 contenthash 值，这个值是由文件的内容生成的，如果文件内容发生了变化，那么 contenthash 值也会随之改变。
当我们使用 contenthash 作为文件名哈希值的时候，如果其中一个文件发生了变化，那么该文件对应的文件名会发生变化，而不会影响其它文件相关的文件名。
示例代码：
module.exports = {
entry: './src/app.js',
output: {
filename: '[name].[contenthash].js'
}
};总结
我们可以这样理解 chunkhash 和 contenthash 的差别：chunkhash 基于 Chunk 级别进行哈希，适用于多入口的场景，而 contenthash 基于文件内容级别进行哈希，适用于单入口的场景。在 Webpack 4 中，建议使用 contenthash。
如何使用 chunkhash 和 contenthash
在配置文件中，我们可以通过 [chunkhash] 或者 [contenthash] 来表示文件名的哈希值。下面是一个具有多入口的示例配置文件，其中采用了 chunkhash 作为哈希值：
-- -------------------- ---- -------
-------------- - -
------ -
---- ---------------
------- -----------------
--
------- -
--------- -----------------------
-
--上述代码将会生成类似这样的文件名：app.7ad4e9d9.js 和 vendor.d458e2a1.js。
如果我们需要使用 contenthash 作为文件名的哈希值，只需要将上述示例配置文件中的 [chunkhash] 改成 [contenthash] 即可，具体示例代码如下：
-- -------------------- ---- -------
-------------- - -
------ -
---- ---------------
------- -----------------
--
------- -
--------- -------------------------
-
--上述代码将会生成类似这样的文件名：app.a6e85deb6c95fdd70393.js 和 vendor.1b7e31b177bd645b7aeb.js。
总结
本文详细介绍了 Webpack 中的 chunkhash 和 contenthash 的区别和使用方法，并提供了完整的示例代码。对于不同的项目需求和场景，我们可以灵活地选择使用不同的哈希方式。同时，通过深入理解哈希值的生成原理，我们也可以更好地掌握 Webpack 的打包机制，从而更好地进行项目开发和优化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648e996d48841e9894cf97d0