在使用Webpack打包项目时，我们通常会生成一个HTML文件，用于展示静态页面。而现在，为了保证缓存的一致性，可能需要在HTML中嵌入时间戳等标记信息，以监测页面是否更新。这时，我们就需要使用 npm 包 html-timestamp-webpack-plugin。
什么是 html-timestamp-webpack-plugin？
html-timestamp-webpack-plugin 是一个 Webpack 插件，用于自动向生成的 HTML 文件中添加时间戳以解决浏览器缓存问题。它将根据文件的修改时间戳自动为所依赖的HTML文件添加时间戳，可以无缝进行构建。
安装
使用npm进行安装：
npm install html-timestamp-webpack-plugin --save-dev
使用
首先，我们需要在 webpack.config.js 中引入这个插件，并通过 plugins 参数进行配置。
const HtmlTimestampWebpackPlugin = require('html-timestamp-webpack-plugin');
module.exports = {
// ...
plugins: [new HtmlTimestampWebpackPlugin()]
};然后，在 html-webpack-plugin 配置中添加一个指向 HTML 模板的 template 属性即可自动添加时间戳。
plugins: [
new HtmlWebpackPlugin({
template: 'public/index.html',
filename: 'index.html'
}),
new HtmlTimestampWebpackPlugin(),
],此时，编译后的HTML代码会类似这样：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-----------------------
----- ------------------------------------------------ ------------------
-------
------
---- ---------------
------- ----------------------------------------------------------------------
------- --------------------------------------------------------------
-------
-------可以看到，每个被 webpack 打包链接的文件都被自动加上了额外的 version 参数，它是根据该文件的最后修改时间戳计算得出并作为时间戳附加在链接地址后面。
参数
除了默认参数外，html-timestamp-webpack-plugin 还有以下可配置参数：
filename: 要添加时间戳的 HTML 文件名，默认为index.html。queryKey: 时间戳参数的键名，默认为'version'。hashFunction: 计算时间戳的哈希函数，默认使用Date.now()。hashLength: 时间戳哈希的长度，默认为 13，即毫秒级别的时间戳长度。
总结
通过使用 html-timestamp-webpack-plugin 插件，我们可以轻松地为打包后的 HTML 文档中引入的静态资源添加时间戳，以避免浏览器缓存的问题，保证页面更新的及时有效。同时，这也为我们提供了一种优化页面静态资源管理的方案。
如果你在构建网站同时也需要考虑缓存控制问题，那么这篇文章所介绍的插件或许能够帮助你。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005731681e8991b448e9484