简介
html-string-replace-webpack-plugin 是为 webpack 打包后的 html 文件中的字符串进行替换的一个插件，支持使用正则表达式或字符串进行匹配，并提供了 before 和 after 接口方便调整替换的位置。使用该插件可以方便的对 html 文件进行自动化处理，例如域名替换、统计代码插入等。
安装
在项目根目录下使用 npm 安装插件：
npm install html-string-replace-webpack-plugin --save-dev
使用方法
- 在 webpack 配置文件中引入插件：
const HtmlStringReplaceWebpackPlugin = require('html-string-replace-webpack-plugin');- 在 plugins 列表中增加该插件的实例：
plugins: [
new HtmlWebpackPlugin(), // 其他 html 相关的插件
new HtmlStringReplaceWebpackPlugin()
]- 在 plugin 的 options 中进行配置：
-- -------------------- ---- -------
-
--------- -
-
------ ----------------------------
------------ ---
--
-
------ ------
------------ ------
------- -------------------
------ ----------------
-
-
-patterns 是替换规则的数组，每一项都是一个对象。对象中的 match 和 replacement 表示匹配规则和替换内容，可以是正则表达式或字符串。
before 和 after 表示指定匹配字符串的前后位置，用于控制替换的位置。
示例
在 webpack 配置文件中增加 HtmlStringReplaceWebpackPlugin 配置：
-- -------------------- ---- -------
----- ------------------------------ - ----------------------------------------------
----- ----------------- - -------------------------------
-------------- - -
---
-------- -
--- --------------------
--- --------------------------------
----------
-
------ ----------------------------
------------ ---
---
------ -------- ----------------
------------ -
------- --------------
----------------------
-- ----
---------
--
------- ----- ---------------- -----
------ ----- -------------- ----
-
-
--
-
-引入指定 js 文件时加上版本号：
<script src="path/to/js.js?v=<%= hash %>"></script>
以上这个例子如果在处理 html-webpack-plugin 生成的 html 文件时会无法使用 hash，因此需要额外进行替换，为 js 引入加上 hash 值：
-- -------------------- ---- -------
-------- -
--- --------------------
--- --------------------------------
--------- -
-
------ --------------------------------
------------ ------- - --- ----------------
-
-
--
-总结
html-string-replace-webpack-plugin 作为一个方便的 html 字符串替换插件，可用于自动的处理 html 文件中的一些细节问题，可以大幅提高开发效率。该插件可以实现正则或字符串替换，并且提供了 before 和 after 接口进行替换位置的指定，上手难度较低，使用起来非常方便。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/58232