前言
在开发前端项目时，我们经常需要使用 webpack 来打包我们的代码。而在使用 webpack 进行打包时，我们可以使用 html-webpack-plugin 来生成 HTML 文件，并将打包好的 JS、CSS 文件引入到该 HTML 文件中。但是，在部署项目的时候，我们需要让浏览器缓存我们的静态资源，如 JS、CSS。而为了实现浏览器缓存，我们需要对静态资源的文件名称进行 hash 处理。本文将介绍一个可以自定义静态资源文件名称 hash 的 npm 包 —— html-custom-hash-webpack-plugin，并带领读者进行使用教程。
安装
要使用 html-custom-hash-webpack-plugin，我们需要先将其安装到我们的项目中。在项目根目录下，使用以下命令进行安装：
npm install html-custom-hash-webpack-plugin --save-dev
配置
在安装了 html-custom-hash-webpack-plugin 后，我们需要进行相应配置，以便正确生成命名后的文件。打开项目中的 webpack 配置文件，在 plugins 中添加 html-custom-hash-webpack-plugin。
const HtmlCustomHashWebpackPlugin = require('html-custom-hash-webpack-plugin');
module.exports = {
// ...
plugins: [
new HtmlCustomHashWebpackPlugin(),
],
};通过以上配置，HtmlCustomHashWebpackPlugin 就已经被添加到了 webpack 打包的流程中。但是，代码配置并没有结束，我们还需要在我们的 HTML 文件中，指定生成的命名方式。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-----------------
---- -- ------ ------------------- ---- ---
----- ---------------- ----------------------
-------
------
---- ---------------
---- -- ------ ------------------------ ---
------- -------------------------
-------
-------使用
配置完成后，我们来尝试使用 html-custom-hash-webpack-plugin。在打包时使用以下命令进行打包：
npm run build
打包完成后，生成的 HTML 文件中的静态资源名称将会以 hash 后的名称替代。如果需要多次打包，可以在每次打包前先清除上次生成的打包文件，避免命名冲突。
-- -------------------- ---- -------
----- --------------------------- - -------------------------------------------
----- - ------------------ - - --------------------------------
-------------- - -
-- ---
-------- -
--- ---------------------
--- ------------------------------
--
--总结
HtmlCustomHashWebpackPlugin 是一个十分实用的 npm 包，它可以帮助我们定制化生成静态资源文件名，以利于浏览器缓存，并减少了部署代码时静态资源缓存解决方案的开发成本。希望本文的内容能帮助到大家，更好的开始前端开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056ea381e8991b448e76de