前言
当我们进行前端开发时，经常需要解决文件版本控制的问题，以便于在更新文件时，能够得知哪些文件需要更新。解决这个问题的一个常见方式是通过生成文件映射表，即将文件名与文件的版本号进行关联，以此来控制文件版本的更新。
在 webpack 中，有一个比较好用的插件叫做 revsion-manifest-webpack-plugin，它可以帮助我们生成文件映射表，方便我们进行文件版本控制。本文将介绍如何使用该插件。
安装和使用
- 安装
npm install revsion-manifest-webpack-plugin --save-dev
- 在 webpack 配置文件中添加插件
-- -------------------- ---- -------
----- ---------------------- - --------------------------------------------
-------------- - -
-- -------
-------- -
--- ------------------------
--------- ----------------
-------------- ---
------------ ---
----------------- --
--
-
--revsion-manifest-webpack-plugin 的 API 非常简单，只有一个参数对象，我们来看一下每个参数的含义。
fileName: 生成的映射表的文件名，默认为manifest.json。rootAssetPath: 文件的根路径，默认为空字符串。ignorePaths: 忽略的文件夹路径数组，默认为空数组。ignoreExtensions: 忽略的文件扩展名数组，默认为空数组。
rootAssetPath 参数的作用是将配置的路径作为相对路径的根。例如，如果我们配置 rootAssetPath 为 /static/，则文件的相对路径会从 /static/ 开始算。
ignorePaths 和 ignoreExtensions 参数的作用是控制哪些文件不需要生成映射表。
- 在 HTML 文件中引入映射表
我们需要在 HTML 文件中引入生成的映射表，并将文件的相对路径转换成映射表中的对应路径。代码如下：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
-----------------------
-------
------
------- -------- -------------------------------- -------------
------- -------- ----------------------------------------- -------------
-------
-------在 HTML 中，我们使用了 HtmlWebpackPlugin 插件提供的 htmlWebpackPlugin.files 对象，其包含了映射表和当前代码块的入口文件路径等信息。
- 启动 webpack
现在我们可以启动 webpack 进行打包了。打包完成后，在指定的生成文件夹下会生成 manifest.json 文件。
例如，我们可以将 webpack 配置文件中的输出路径配置为 dist 文件夹，那么映射表的路径就是 dist/manifest.json。
- 使用映射表
我们可以通过加载 manifest.json，来获取文件的版本号。
import manifest from "./manifest.json"; console.log(manifest["static/js/main.js"]); // 输出： "static/js/main.1e53351617b65222b122.js"
我们需要在代码中手动地将文件名替换成对应的带有版本号的路径。
示例
下面是一个完整的 webpack 配置文件，以及使用 revsion-manifest-webpack-plugin 的示例。我们假设需要生成具有版本号的静态资源文件名。
webpack.config.js：
-- -------------------- ---- -------
----- ----------------- - -------------------------------
----- ---- - ----------------
----- ---------------------- - --------------------------------------------
-------------- - -
------ -----------------
------- -
----- ----------------------- --------
--------- -----------------------------------
--
-------- -
--- -------------------
--------- ---------------------
---
--- ------------------------
--------- ---------------
--
-
--public/index.html:
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
-----------------------
-------
------
------- -------- -------------------------------- -------------
------- -------- ----------------------------------------- -------------
-------
-------src/index.js：
import manifest from "../manifest.json";
const mainJs = document.createElement("script");
mainJs.src = `/${manifest["static/js/main.js"]}`;
document.body.appendChild(mainJs);总结
revsion-manifest-webpack-plugin 可以让我们非常方便地生成文件映射表，从而方便地控制文件版本控制。当我们在进行项目开发中遇到该问题时，可以考虑使用该插件。
在使用时，需要注意配置正确的参数，以确保生成的映射表能够正确地引用到项目中的文件。
希望这篇文章能够帮助你更好地使用 revsion-manifest-webpack-plugin，进行前端开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005548b81e8991b448d1d02