在前端项目开发中，我们通常会使用webpack进行模块打包，而为了保证不同模块之间的命名冲突，webpack还提供了各种 hash 算法，能够根据文件内容生成唯一的哈希值，拼接到文件名后面。
但是，在使用 hash 命名时，如果我们需要让每个 chunk 都有唯一的哈希值，webpack默认会根据整个项目的文件变化情况生成新的 hash，这就导致了每次构建后，所有的 chunk 的哈希值都会发生变化。
为了解决这个问题，可以使用 npm 包 webpack-after-chunk-hash-plugin，该插件可以为每个chunk生成唯一的哈希值，并将其添加到 chunk 名称后面，使每个chunk的哈希值变化仅受该chunk文件内容变化的影响。
下面介绍该插件的详细使用方法。
安装
使用npm安装该插件：
npm install --save-dev webpack-after-chunk-hash-plugin
配置
在webpack的配置文件中，将该插件实例添加到 plugins 数组中：
-- -------------------- ---- -------
----- --------------------------- - -------------------------------------------
-------------- - -
-- ---
------- -
--------- -----------------------
--
-------- -
--- -----------------------------
-
--示例
假设我们的项目包含两个入口文件，分别命名为 main.js 和 login.js。我们需要为这两个入口文件生成不同的哈希值。
在原始的 webpack 配置中，由于我们使用了 [chunkhash] 占位符，webpack 会自动为每个 chunk 文件生成独立的哈希值：
// 原始的 webpack 配置
module.exports = {
output: {
filename: '[name].[chunkhash].js'
}
}在该配置下，webpack将根据整个项目文件的变化状况生成新的哈希值，导致每个入口文件的哈希值都会变化。而使用 webpack-after-chunk-hash-plugin 插件可以解决这个问题。
-- -------------------- ---- ------- -- -- ------------------------------- -- ----- --------------------------- - ------------------------------------------- -------------- - - ------- - --------- ----------------------- -- -------- - --- ----------------------------- - -
在该配置下，webpack 会根据文件内容的变化而生成唯一的哈希值，并在 chunk 文件名的末尾添加该哈希值：
main.adc57e5f7fb13e43212c.js login.eba5fc5f7fc18c43212c.js
这样，即使整个项目的文件有所更改，只要入口文件中的代码没有变化，那么哈希值也会保持不变。
总结
使用 webpack-after-chunk-hash-plugin 插件可以为每个 chunk 生成唯一的哈希值，并将其添加到 chunk 名称后面，从而避免了整个项目的文件变化影响所有chunk的哈希值。这对于前端项目开发非常有用，能够维护文件名称的唯一性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b6181e8991b448d8e8a