简介
html-webpack-reprocess-source-plugin 是一个 npm 包，它可以解析 HTML 文件，并且可以对其中的 script, link, img 等标签中的路径进行处理。我们有时候需要将这些标签中的相对路径转换为绝对路径，以便于进行生产环境的部署。
html-webpack-reprocess-source-plugin 提供了一种简单的方法来完成这个任务，而不需要手动更改 HTML 文件中的路径。使用这个插件可以使得我们的代码更加的通用 和灵活。
安装
可以使用 npm 命令进行安装：
npm install html-webpack-reprocess-source-plugin
使用
html-webpack-reprocess-source-plugin 是 webpack 的一个插件，可以在 webpack 配置文件中进行使用。
配置
在 webpack 配置文件中引入 html-webpack-reprocess-source-plugin：
const HtmlWebpackReprocessSourcePlugin = require('html-webpack-reprocess-source-plugin');然后在 plugins 中进行配置：
plugins: [
new HtmlWebpackReprocessSourcePlugin({
context: './src',
publicPath: '/static',
ignore: /(google|yahoo|bing)\.com$/,
}),
],参数
context: String，可选参数，指定 Webpack 项目的源代码根目录。publicPath: String，可选参数，指定路径前缀，也就是 HTML 中链接的前缀，默认为空。ignore: RegExp，可选参数，指定不需要处理的 URL 正则表达式。
示例
假设我们有一个 index.html 文件，在其中引入了一个 js 文件：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ----------- ------- ------ --------------- ------- ------ ------- ------------------------------- ------- -------
我们想要将它自动进行路径处理，将路径更改为 /static/js/main.js。在 webpack 配置文件中添加 plugin 配置项：
-- -------------------- ---- -------
----- -------------------------------- - ------------------------------------------------
-------------- - -
-------- -
--- ----------------------------------
-------- --------
----------- ----------
---
-
--运行 webpack 命令后，生成的 HTML 文件将自动进行路径处理：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ----------- ------- ------ --------------- ------- ------ ------- ---------------------------------- ------- -------
总结
html-webpack-reprocess-source-plugin 插件可以帮助我们自动进行路径处理，使得我们在进行生产环境的代码部署时更加易于维护和管理。在实际开发中，有时候我们需要在 HTML 中引入大量的静态资源，使用这个插件可以大幅度减少手动更改路径的工作量，从而提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eb181e8991b448dc4e7