在现代 Web 开发中，前端工程化已经成为一个必不可少的环节。其中 webpack 是目前最主流的模块打包工具之一，而 npm 作为 JavaScript 包管理器则是必须的核心组件之一。本文将介绍如何使用 webpack-chunk-hash 这个 npm 包来为你的应用程序生成唯一的哈希值以及如何在项目中实现缓存控制。
安装
首先，我们需要安装 webpack-chunk-hash npm 包。可以通过以下命令进行安装：
npm install webpack-chunk-hash --save-dev
配置
在 webpack 的配置文件中，我们需要对入口文件进行配置添加 webpack-chunk-hash 插件。例如：
-- -------------------- ---- -------
----- ------- - -------------------
----- - --------------------- - - -----------------------------------
----- ----------------------------- - --------------------------------------------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
--------- ------------------------
----- ----------------------- --------
--
-------- -
--- --------------------------------
--- ------------------------
--- -------------------------------
---- -------------
----- -----------------
---
--
--上述示例代码中，我们引入了 webpack, webpack-manifest-plugin, chunkhash-replace-webpack-plugin 这三个插件，并在 plugins 数组中进行了配置。
生成哈希值
使用 webpack-chunk-hash 插件，可以为生成的文件名添加哈希值，以确保每个文件都具有唯一的标识符。这样，在更新应用程序时，浏览器将强制重新下载更改的文件，而不是从缓存中加载旧文件，从而防止因浏览器缓存而导致的问题。
在上述示例代码中，我们在 output 配置中的 filename 属性中添加了 [chunkhash] 占位符。这样，每次生成文件时，webpack 将会自动计算出文件内容的哈希值，并将其添加到文件名中。例如，如果生成的文件名为 main.85e5430f.js，则 85e5430f 即为该文件内容的哈希值。
缓存控制
除了为生成的文件名添加哈希值以外，我们还需要注意缓存控制。如果我们只是简单地更新文件并重新生成哈希值，则仍然可能存在浏览器仍然使用旧版本缓存的情况。
为了解决这个问题，我们可以使用 webpack-manifest-plugin 插件来生成一个清单文件（manifest），其中包含所有输出文件的对应关系。然后，我们可以使用 chunkhash-replace-webpack-plugin 插件来将清单文件与 HTML 文件一起输出，并在 HTML 中引用清单文件中的哈希值，以确保浏览器能够正确地识别版本更新。
在上述示例代码中，我们使用了 WebpackManifestPlugin 和 ChunkHashReplaceWebpackPlugin 两个插件来实现这一目的。其中，WebpackManifestPlugin 用于生成清单文件，而 ChunkHashReplaceWebpackPlugin 用于将清单文件与 HTML 文件一起输出，并根据清单文件的哈希值更新 HTML 中对应的引用路径。
总结
通过使用 webpack-chunk-hash、webpack-manifest-plugin 和 chunkhash-replace-webpack-plugin 这些 npm 包，我们可以为应用程序生成唯一的哈希值并实现缓存控制。这不仅可以避免因浏览器缓存而导致的问题，还可以确保用户始终使用最新的应用程序版本。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/54780