前言
在 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 进行安装。
--- ------- ------------------------------------------- ----------
使用方法
在 Webpack 的配置文件中，我们可以通过以下方式引入该插件：
----- ------------------------------- - -------------------------------------------------------
-------------- - -
-----
------- -
--------- ------------------------
-----
--
-------- -
--- ---------------------------------
--------- ----------------------
------- ---
--------------- -----
------------ -----------
------------ ------------- ----------
------------------------ -----
--------------------- -----------------------
--
-
--以下是各个参数的解释：
- **
fileName**：清单文件的文件名，默认为asset-manifest.json - **
prefix**：添加前缀，默认为空字符串 - **
applyFileNames**：是否为静态资源文件名添加版本号，默认为true - **
ignorePaths**：忽略匹配到的文件路径，可以为字符串或正则表达式 - **
requireGenerateManifest**：是否为生成的文件自动生成一个调用文件，默认为true - **
generateManifestPath**：自动生成的调用文件路径，默认为/src/utils/version.js
示例代码
以下是一个基本的 Webpack 配置示例：
----- ---- - ----------------
----- ------- - -------------------
----- ------------------------------- - -------------------------------------------------------
-------------- - -
------ -----------------
------- -
--------- ------------------------
----- ----------------------- -------
--
-------- -
--- ----------------------------------
--- ---------------------------------
-
--在 Webpack 构建成功后，将会在 dist/ 目录下生成以下两个文件：
----------------------------- -------------------
其中，YOUR_CHUNKHASH_CODE 为 Webpack 自动生成的代码块哈希值。asset-manifest.json 文件将包含类似以下内容：
-
------------ ---------------------------------
----------- --------------------------------
------------------ --------------------------
-如果将 requireGenerateManifest 设置为 true，我们可以在 Webpack 配置文件中添加以下代码：
----- -- - -------------- ----- ------------ - ----------------------- ------- ----------------------- ----------------- ----------------------- ------ -------------- ------- ------- ------------------------------- ---------- --
这将会在 /src/version.js 文件中生成类似以下内容：
------ ------- ---------------------------------------------------------------------------------------------------------------------------------------
我们可以在其他 JavaScript 文件中通过 import version from './version.js' 的方式引入该清单文件，来动态加载静态资源文件。
结语
@practo/manifest-revision-formatter-webpack 可以为我们自动生成静态资源版本号，并将版本信息存储到版本清单文件中。这对于项目的维护和发布是很有帮助的。在实际项目中，我们可以根据需要进行个性化的配置，以将插件的功能发挥到最大程度。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600567ff81e8991b448e424e