webpack-manifest-replace-plugin 是一个用于替换 HTML 中 manifest 文件路径的 webpack 插件。该插件可以帮助我们在构建过程中自动更新 index.html 文件中 manifest 文件的路径，从而减轻开发人员的工作量，提高开发效率。
安装
要使用 webpack-manifest-replace-plugin，我们需要先安装它。在命令行中输入以下命令：
--- ------- ---------- -------------------------------
使用
使用 webpack-manifest-replace-plugin 非常简单。我们只需要在 webpack 配置文件中引入该插件并配置它即可。以下是 webpack 配置文件的示例：
----- --------------------- - -------------------------------------------
-------------- - -
-- ---
-------- -
-- ---
--- -----------------------
----------------- ---------------------
------------- ------------------
----------- -
-------------- -------
--------------- -------
--
------- ---
--
-
-- ---
--在上面的配置中，我们引入了 ManifestReplacePlugin，并在 plugins 中使用了它。我们需要传递一些配置给该插件：
manifestFilePath：manifest 文件的路径；htmlFilePath：HTML 文件的路径；replaceMap：要替换的路径映射关系；prefix：路径前缀。
深度学习
我们来详细学习一下每个配置项的含义。
manifestFilePath
该配置项表示 manifest 文件的路径。manifest 文件包含了所有打包生成的文件和它们的 hash 值的映射关系。用过 webpack-manifest-plugin 生成的 manifest 文件一般位于 dist 目录下。在 webpack 配置文件中，我们需要将 manifest.json 的路径传递给该配置项。
htmlFilePath
该配置项表示 HTML 文件的路径。HTML 文件需要包含一个连接到 manifest 文件的 link 标签。在 webpack 配置文件中，我们需要将 index.html 文件的路径传递给该配置项。
replaceMap
该配置项是一个对象，用于将 HTML 中旧的路径替换为新的路径。例如，以下是一个 replaceMap 的示例：
----------- - -------------- ------- --------------- ------- -
在上面的示例中，我们将 /static/js/ 替换为 /js/，将 /static/css/ 替换为 /css/。使用 replaceMap 可以灵活地替换 HTML 中的文件路径，从而使得打包后的文件能够正常加载。
prefix
该配置项表示要添加到路径前面的前缀。例如，如果路径前缀为 '/'，则最终替换后的文件路径为 /js/xxx.js，否则为 ./js/xxx.js。
指导意义
webpack-manifest-replace-plugin 为开发人员提供了便利，可以让开发人员无需手动修改 HTML 中的文件路径，从而减轻工作量，提高开发效率。使用 webpack-manifest-replace-plugin，我们可以轻松地管理打包之后的文件路径，并且使得打包后的文件路径能够正常加载，提高用户体验。
示例代码
-- -----------------
----- --------------------- - -------------------------------------------
-------------- - -
-- ---
-------- -
-- ---
--- -----------------------
----------------- ---------------------
------------- ------------------
----------- -
-------------- -------
--------------- -------
--
------- ---
--
-
-- ---
--index.html
--------- ----- ----- --------------- ------ ----- ---------------- -------------- ------------ ----- -------------- ----------------------------- ----- ---------------- --------------------------- ------- ------ ---- --------------- ------- --------------------------------- ------- -------
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60065f8f238a385564ab6f20