前言
在前端开发中，为了保证前端资源文件的安全性和可靠性，需要对文件进行 hash 化处理，以防止中间人攻击和缓存问题。而在前端开发中，有一款非常好用的 npm 包 - fingerprinter-brunch，它可以给文件名添加 hash 值，使文件名唯一化，解决了前端开发中的缓存问题。接下来，就让我们一起来学习下如何使用 fingerprinter-brunch。
安装
我们需要先安装 fingerprinter-brunch。可以通过 npm 进行安装：
npm install --save-dev fingerprinter-brunch
或者，通过 yarn 进行安装：
yarn add -D fingerprinter-brunch
安装完毕之后，就可以开始使用它了。
配置
接下来，我们需要在 brunch-config.js 的 plugins 选项中添加下面这一行代码：
fingerprint: {override: true, hashLength: 8, manifest: 'public/assets/manifest.json'}其中，hashLength 指定了添加的 hash 长度，manifest 指定了输出的 manifest 文件路径。
使用
在配置好 plugins 之后，我们还需要在模板文件中引用生成的文件名。例如，在 HTML 文件中，可以这样写：
<link rel="stylesheet" href="/assets/css/app.min.css">
这里的 /assets/css/app.min.css 实际上是一个指向生成文件的符号连接，其实际路径为 /assets/css/app-xxxxxxxx.min.css，其中 xxxxxxxx 是 hash 值。
示例代码
// brunch-config.js
module.exports = {
// ...
plugins: {
fingerprint: {override: true, hashLength: 8, manifest: 'public/assets/manifest.json'}
},
// ...
}-- -------------------- ---- -------
---- ----------------- ---
--------- -----
----- ----------
------
----- ----------------
-----------------
----- ---------------- -------------------------------
-------
------
-----------
------- -------------------------------------
-------
-------总结
在本篇文章中，我们学习了如何使用 fingerprinter-brunch 进行前端资源文件的 hash 化处理。通过它，可以解决前端开发中的缓存问题，并提高网站的安全性和可靠性。希望本篇文章对您带来了一些帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eb581e8991b448dc5f0