在前端开发中，静态资源的缓存策略是一个非常重要的话题。一种常见的做法是为资源文件添加一个版本号，当文件内容发生变化时，版本号也会随之改变，这样浏览器就能够获取到最新的版本，而不需要从缓存中读取旧的文件。
static-version-injection-html-webpack-plugin 是一个 webpack 插件，可以自动为 HTML 文件中的 CSS 和 JS 连接添加版本号，以方便进行缓存。本文将会介绍这个插件的使用方法。
安装
首先需要在你的项目中安装 static-version-injection-html-webpack-plugin：
npm install static-version-injection-html-webpack-plugin --save-dev
配置
在 webpack 配置文件中加入插件的配置即可。通常情况下，插件的配置项应当包含以下几个信息：
- version: 资源文件的版本号，用于生成 URL。可以是一个定值，也可以是一个计算结果。
- filename: 生成的 HTML 文件的名称。
- template: 应用程序的 HTML 模板文件，用于生成 HTML 文件。
- inject:
true表示添加版本号到现有的 URL 中，false表示替换现有的 URL 为带有版本号的 URL。
一个典型的配置项如下：
-- -------------------- ---- -------
----- --------------------------------------- - --------------------------------------------------------
-------------- - -
-------- -
--- -----------------------------------------
-------- --------
--------- -------------
--------- ----------------------- --------- --------------
------- ----
--
--
-- ---
-示例
下面是一个完整的示例代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
----- --------------------------------------- - --------------------------------------------------------
-------------- - -
------ -
---- ----------------
--
------- -
--------- ----------------------
----- ----------------------- -------
--
-------- -
--- -----------------------------------------
-------- --------
--------- -------------
--------- ----------------------- --------- --------------
------- ----
---
--- -------------------
--------- ----------------------- --------- -------------
--
-
--这个示例中，我们配置了两个插件，一个是 static-version-injection-html-webpack-plugin，一个是 HtmlWebpackPlugin。
当我们运行命令：
webpack --mode=production
会生成一个名为 index.html 的文件，其中包含了一个带有版本号的 JS 文件链接：
<script type="text/javascript" src="app.1.0.0.js"></script>
这样就可以确保浏览器在访问网页时每次都使用最新的代码文件。
结语
static-version-injection-html-webpack-plugin 是一个非常方便实用的 webpack 插件，可以帮助前端工程师解决静态资源缓存和更新问题。希望本文能够对你有所启发，并能够在实际开发中帮助到你！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d6b81e8991b448db2f2