在前端开发中，我们经常需要对静态资源进行版本管理，例如 js、css、图片等。为了防止浏览器缓存，我们通常会在文件名中加入版本号，并在每次更新时手动修改版本号，但这样不仅麻烦，还容易出错。
本文将介绍如何通过 Webpack 自动插入版本号，让文件名自动更新，减少手动操作的繁琐，提高项目的可维护性。
引入插件
Webpack 打包时插入版本号，需要借助插件 webpack-assets-manifest。通过该插件，可以将打包后的文件和其版本号一一映射，存入一个 JSON 文件中。
你可以直接使用 npm 安装：
npm install webpack-assets-manifest --save-dev
配置 Webpack
在 Webpack 的配置文件中，我们需要进行一些简单的配置，包括：
- 引入插件
- 配置插件
- 修改输出文件名
引入插件
在 Webpack 的配置文件中引入插件，示例如下：
const WebpackAssetsManifest = require('webpack-assets-manifest');配置插件
配置插件可以定义生成的 JSON 文件的名字和路径，以及输出的文件名需要插入的占位符。
示例代码如下：
-- -------------------- ---- -------
-------- -
--- -----------------------
------- ----------------
------ -----
----------- -----
---------- --
----
-----
-- -- -
-- -------------------- -- -------------------- -- -------------------- -- --------------------- -
------ -
----
------ --------------------------
-
-
------ -
----
-----
-
-
--
-插件的配置项包括：
output
类型：String
定义生成的 JSON 文件的名字和路径。
merge
类型：Boolean
指定是否启用合并模式（多次构建将覆盖之前的结果）。
publicPath
类型：String
修正输出文件中的路径。
customize
类型：Function
自定义每个文件生成的输出内容，例如将输出文件名修改为 filename-v=123456.js。
key
类型：String
输入文件的路径。
value
类型：String
输出文件的路径。
修改输出文件名
在 Webpack 的输出文件名中使用上述占位符，如下所示：
output: {
...
filename: '[name]-[hash].js' // 原输出文件名
}修改后的输出文件名会自动包含最新的版本号，从而让浏览器及时感知到变化，不再使用旧版本缓存。
示例代码
-- -------------------- ---- -------
----- ---- - ----------------
----- --------------------- - -----------------------------------
-------------- - -
------ -----------------
------- -
--------- -------------------
----- ----------------------- -------
--
-------- -
--- -----------------------
------- ----------------
------ -----
----------- -----
---------- --
----
-----
-- -- -
-- -------------------- -- -------------------- -- -------------------- -- --------------------- -
------ -
----
------ --------------------------
-
-
------ -
----
-----
-
-
--
-
--总结
通过使用 Webpack 插件 webpack-assets-manifest，我们可以自动插入版本号，在每次更新时让文件名自动更新，减少手动操作，提高项目的可维护性。在实际开发中，可以根据需要进行一些自定义配置，提高灵活性和适用性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6484400b48841e9894360ed8