在前端开发中，Webpack 是一个非常重要的工具，它可以自动打包项目，并提供丰富的插件以帮助开发者更好地管理代码。其中，html-webpack-plugin 是一个非常重要的插件，它可以将 Webpack 打包后的 JS、CSS 文件自动插入到 HTML 文件中。但是，当使用 html-webpack-plugin 插件时还会遇到一个问题，就是缓存的问题。一旦 Webpack 打包后的文件发生变化，就会生成一个新的文件名，而在 HTML 中引入的文件名却没有更新，这就导致了缓存问题。为了解决这个问题，我们介绍一个非常好用的 npm 包 html-webpack-hashfix-plugin，它可以自动解决 Webpack 打包后文件名的缓存问题。
简介
html-webpack-hashfix-plugin 是一个 Webpack 插件，它可以自动解决 Webpack 打包后的文件名的缓存问题。该插件会通过计算文件内容的 Hash 值来生成一个唯一的文件名，从而解决文件缓存问题。
安装
使用 npm 包管理工具进行安装即可：
npm install html-webpack-hashfix-plugin --save-dev
使用
安装完毕后，我们需要在 webpack 配置文件中进行配置。在 webpack.config.js 文件中添加如下代码：
-- -------------------- ---- -------
----- ----------------- - -------------------------------
----- ------------------------ - ---------------------------------------
-------------- - -
-- --- -----
-------- -
--- -------------------
-- --- -----
----- ----- -- ----- ---- -
---
--- ---------------------------
--
--在添加 HtmlWebpackPlugin 插件时，我们设置了 hash: true，这样 Webpack 就会在打包后文件名后添加一个 unique 的 hash 值。
最后再添加 HtmlWebpackHashFixPlugin 插件即可。插件会在打包结束后自动扫描 HTML 文件，将引用的文件名替换为新的带有 hash 值的文件名。
示例
下面我们来看一个示例，以便更好地加深对 html-webpack-hashfix-plugin 的理解。
我们先创建一个基本的项目，然后安装 html-webpack-plugin 和 html-webpack-hashfix-plugin 两个插件：
mkdir hashfix-demo && cd hashfix-demo npm init -y npm install webpack webpack-cli html-webpack-plugin html-webpack-hashfix-plugin --save-dev
然后创建一个简单的 HTML 文件 index.html，内容如下：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ----------------------- ------- ------ ------- -------------------------------- ------- -------
我们在 dist 文件夹下创建一个 index.js 文件，并添加以下代码：
console.log('Hello World!');接着，我们在根目录下创建 webpack.config.js 文件，加入以下代码：
-- -------------------- ---- -------
----- ----------------- - -------------------------------
----- ------------------------ - ---------------------------------------
-------------- - -
------ ------------------
------- -
--------- --------------------------
----- --------- - -------
--
-------- -
--- ---------------------------- --------------- ----- -------
--- ---------------------------
--
--其中，我们的 output 部分使用了 [name].[contenthash].js 进行打包，这样就会在打包后的文件名中添加一个 hash 值。HtmlWebpackPlugin 插件中设置了 hash: true，它会在 HTML 文件中添加引用后的 hash 值。最后，添加 HtmlWebpackHashFixPlugin 插件进行修正。
最后，运行 npx webpack 打包项目，我们会发现在 dist 文件夹下会生成一个新的 JS 文件，文件名后面带有一段 hash 值，如 8c52e7eacb8fcf2af7db.bundle.js。同时，HTML 文件中引用的 JS 文件名也自动更新了，如下：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ----------------------- ------- ------ ------- ------------------------------------------------ ------- -------
这样，我们就成功解决了 Webpack 打包后文件名的缓存问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600551b981e8991b448cf199