在前端开发中，我们经常需要将 webpack 构建出的 html 文件中各个模块的源码提取出来，以便于我们在调试和排查问题时更加方便快捷。而 npm 包 html-source-webpack-plugin 则能够帮助我们快速、自动地完成这项任务。
安装
使用 npm 进行安装：
npm install html-source-webpack-plugin --save-dev
使用
在 webpack 的配置文件中，引入该插件并添加到 plugins 数组中即可：
-- -------------------- ---- -------
----- ----------------------- - --------------------------------------
-------------- - -
-- ---
-------- -
--- --------------------------
-- ---
--
-- ---
--这样，在 webpack 的构建过程中，该插件会自动分析 html 文件，将其中各个模块的源码提取出来，并存放在单独的 .js 文件中，以便于我们查看和调试。
配置项
该插件支持以下配置项：
filename
- 类型：
string - 默认值：
'[name].html' - 描述：生成的 html 文件名，支持占位符，如
[name]表示入口命名（entryName）。
exclude
- 类型：
string[] - 默认值：
[] - 描述：不需要提取源码的模块名称列表。
include
- 类型：
string[] - 默认值：
undefined - 描述：需要提取源码的模块名称列表。若设置了该配置项，则
exclude配置项无效。
output
- 类型：
string - 默认值：
'html-sources' - 描述：指定存放源码文件的目录名称，相对于 webpack 的输出路径。
以下是配置示例：
-- -------------------- ---- -------
----- ----------------------- - --------------------------------------
-------------- - -
-- ---
-------- -
--- -------------------------
--------- ---------------------- -- ----------
-------- -------------------- -- -- ------------ ----
---
-- ---
--
-- ---
--指导意义
使用 html-source-webpack-plugin 插件能够帮助我们快速定位和排查问题，提高开发效率。同时，该插件的源码也相对简单易懂，可以作为学习 webpack 插件开发的实用案例。
示例代码
下面是一个 webpack.config.js 文件的示例代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------------- - --------------------------------------
-------------- - -
------ -
------ -----------------
-- ---
--
------- -
--------- ----------------------------
----- ----------------------- --------
--
-------- -
--- -------------------------
--------- ----------------------
-------- --------------------
---
-- ---
--
-- ---
--来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/71630