前言
在 Web 开发中，我们常常需要对静态资源进行版本控制，比如将 style.css?v=1.0.0 转化为 style.css?v=1.0.1。而随着项目越来越大，手动修改静态资源版本号的难度也越来越大。这时候，我们可以使用 npm 包 @practo/manifest-revision-formatter-webpack 来自动生成静态资源版本号，并集成于 Webpack 构建流程中。
功能介绍
@practo/manifest-revision-formatter-webpack 是一个集成于 Webpack 的插件，它可以在 Webpack 构建成功后自动为生成的静态资源文件名添加版本号，并生成一个对应的版本清单文件，方便后续使用。
该插件支持以下功能：
- 根据使用者定义的规则生成新的静态资源文件名，如：app.[hash].js
- 生成一个版本清单文件，来记录静态资源文件名和版本号的对应关系
- 为所有匹配到的静态资源文件名添加版本号，包括 js、css、图片等
安装
该插件可以通过 npm 进行安装。
npm install @practo/manifest-revision-formatter-webpack --save-dev
使用方法
在 Webpack 的配置文件中，我们可以通过以下方式引入该插件：
-- -------------------- ---- -------
----- ------------------------------- - -------------------------------------------------------
-------------- - -
-----
------- -
--------- ------------------------
-----
--
-------- -
--- ---------------------------------
--------- ----------------------
------- ---
--------------- -----
------------ -----------
------------ ------------- ----------
------------------------ -----
--------------------- -----------------------
--
-
--以下是各个参数的解释：
fileName：清单文件的文件名，默认为asset-manifest.jsonprefix：添加前缀，默认为空字符串applyFileNames：是否为静态资源文件名添加版本号，默认为trueignorePaths：忽略匹配到的文件路径，可以为字符串或正则表达式requireGenerateManifest：是否为生成的文件自动生成一个调用文件，默认为truegenerateManifestPath：自动生成的调用文件路径，默认为/src/utils/version.js
示例代码
以下是一个基本的 Webpack 配置示例：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
----- ------------------------------- - -------------------------------------------------------
-------------- - -
------ -----------------
------- -
--------- ------------------------
----- ----------------------- -------
--
-------- -
--- ----------------------------------
--- ---------------------------------
-
--在 Webpack 构建成功后，将会在 dist/ 目录下生成以下两个文件：
bundle.YOUR_CHUNKHASH_CODE.js asset-manifest.json
其中，YOUR_CHUNKHASH_CODE 为 Webpack 自动生成的代码块哈希值。asset-manifest.json 文件将包含类似以下内容：
{
"bundle.js": "bundle.63a38c7f20eee18c2a8a.js",
"main.css": "main.ac9a9bc8ded1d6b6894e.css",
"images/logo.png": "images/logo.a60b2626.png"
}如果将 requireGenerateManifest 设置为 true，我们可以在 Webpack 配置文件中添加以下代码：
const fs = require('fs');
const manifestPath = path.resolve(__dirname, 'dist', 'asset-manifest.json');
fs.writeFileSync(
path.resolve(__dirname, 'src', 'version.js'),
`export default ${fs.readFileSync(manifestPath, 'utf8')};`
);这将会在 /src/version.js 文件中生成类似以下内容：
export default {"bundle.js":"bundle.63a38c7f20eee18c2a8a.js","main.css":"main.ac9a9bc8ded1d6b6894e.css","images/logo.png":"images/logo.a60b2626.png"};我们可以在其他 JavaScript 文件中通过 import version from './version.js' 的方式引入该清单文件，来动态加载静态资源文件。
结语
@practo/manifest-revision-formatter-webpack 可以为我们自动生成静态资源版本号，并将版本信息存储到版本清单文件中。这对于项目的维护和发布是很有帮助的。在实际项目中，我们可以根据需要进行个性化的配置，以将插件的功能发挥到最大程度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600567ff81e8991b448e424e