前言
在前端开发中，Webpack 是我们最常用的打包工具之一。而当我们在使用 Webpack 打包项目时，需要使用到一些插件来加强其功能。其中，使用 contenthash 作为文件名是一个常用且不错的选择，以便更好地利用浏览器缓存。
在本文中，我们将介绍一个 npm 包——contenthash-html-webpack-plugin，它可以在 Webpack 打包时为 HTML 文件添加 contenthash，并自动替换引用该 HTML 文件的 JavaScript 和 CSS 文件名。让我们一起来看看如何使用它。
安装
首先我们需要安装该包。在终端中执行以下命令完成安装：
npm install contenthash-html-webpack-plugin --save-dev
使用方法
使用前须知
使用 contenthash 模板需要在打包时生成每个文件的 hash 值来作为文件名，并且需要在其它的文件中引用这些文件。为了避免在每次打包时都生成一样的文件名，我们可以在打包配置中使用 contenthash。
基本配置
在 webpack.config.js 中的 plugins 配置中添加以下代码：
const ContenthashHtmlWebpackPlugin = require('contenthash-html-webpack-plugin');
plugins: [
new ContenthashHtmlWebpackPlugin(),
]除此之外，该插件还提供了以下可选的配置参数：
fileName: 定义 HTML 文件名，默认为index.html。htmlSource: 定义 HTML 文件来源，默认值为./src/index.html。minify: 对输出的 HTML 进行最小化，使用 html-minifier-terser 进行压缩，默认值为false。hash: 是否添加 hash 至输出的 HTML filename 中，默认为false。
完整示例
现在让我们来看一个完整的 webpack.config.js 配置文件的示例：
-- -------------------- ---- -------
----- ---- - ----------------
----- ---------------------------- - -------------------------------------------
-------------- - -
------ -
---- -----------------
------ ----------------
--
------- -
--------- --------------------------
----- ----------------------- -------
--
-------- -
--- ------------------------------
--------- ----------------
----------- ----------------------
------- -----
----- ----
--
-
--在这个示例中，我们使用了 contenthash 作为文件名，并将其添加至输出的 JS 文件名中。同时，我们将 HTML 文件名改为 newIndex.html，使用 ./src/newIndex.html 作为 HTML 来源，压缩 HTML 文件，且为 HTML 添加 hash。
结尾
在这篇文章中，我们了解了如何使用 contenthash-html-webpack-plugin 在 Webpack 打包时添加 contenthash 并自动替换引用该 HTML 文件的 JavaScript 和 CSS 文件名。这一简单却实用的 npm 包可以帮助我们更好地管理文件名，让我们更好地利用浏览器缓存，避免重复下载，提高网站的性能。
希望这篇文章可以帮助你更好地使用 contenthash-html-webpack-plugin。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601481e8991b448de1bf