在前端开发中，我们经常需要将我们的代码进行打包，而常用的打包工具是 Webpack。而其中一个常用的插件就是 webpack-md5-hash，它可以给打包后的文件名添加哈希值以便于浏览器缓存。但是，由于其中存在一些问题，社区中诞生了一个名为 webpack-md5-hash-fixed 的模块，它能够在原有的基础上解决了这些问题。本文将介绍这个模块的使用教程。
问题
在使用 webpack-md5-hash 插件时，可能会遇到以下问题：
- 每次打包哈希值都不同，即使文件内容没有任何改变。
- 如果文件的路径被修改了，虽然文件内容没有改变，但是打包后的哈希值仍然会发生变化。
这些问题会带来浏览器缓存失效的问题，尤其是在长时间缓存的情况下，会导致用户大量下载无用的文件，从而浪费带宽和时间。
安装
要使用 webpack-md5-hash-fixed，首先需要安装它：
npm install --save-dev webpack-md5-hash-fixed
使用方法
在 webpack 配置文件中，引入 webpack-md5-hash-fixed 包，并把原来的 webpack-md5-hash 替换成它。具体代码如下：
-- -------------------- ---- -------
-- -----------------
----- ------------------- - ----------------------------------
-- ---
-------------- - -
-- ---
------- -
--------- ------------------------
--
-------- -
-- ---
--- ----------------------
--
--其中，我们在 output 中添加了一个 chunkhash 的占位符，它会根据文件内容生成哈希值。接着，在 plugins 中，我们添加了 WebpackMd5HashFixed 实例，以确保每次打包文件的哈希值相同。
示例代码
假设我们有以下的目录结构：
- app - index.js - dist - webpack.config.js
其中 index.js 文件内容为：
// index.js
console.log('hello world');我们的 webpack 配置文件 webpack.config.js 代码如下：
-- -------------------- ---- -------
-- -----------------
----- ---- - ----------------
----- ------------------- - ----------------------------------
-------------- - -
------ -----------------
------- -
----- ----------------------- --------
--------- ------------------------
--
-------- -
--- ----------------------
--
--我们可以执行以下命令，进行打包：
npx webpack --config webpack.config.js
打包完成后，我们可以在 dist 目录下找到一个类似于 main.a71bfb8aae70adb69d00.js 的文件，其中 a71bfb8aae70adb69d00 是根据文件内容计算出的哈希值。如果我们没有改变文件内容，再次运行打包命令，得到的哈希值仍然是相同的。这证明了 webpack-md5-hash-fixed 插件已经解决了原有的问题。
总结
通过本文的讲解，我们了解了如何使用 webpack-md5-hash-fixed 插件，它解决了 webpack-md5-hash 插件中存在的一些问题，可以保证每次打包相同的文件哈希值相同，从而避免了浏览器缓存失效的问题。希望读者掌握了使用方法，并能够在实际开发中应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f8d238a385564ab6eb9