随着前端项目越来越复杂，构建工具的使用也越来越普及，webpack 作为一个重要的构建工具，相较于其他构建工具有更灵活的配置和更强大的插件系统。其中，我们提到的 webpack-html-stats-plugin 插件就是一个非常实用的插件，可以让我们在生成 HTML 文件时，方便地添加对项目打包后代码的分析报告。
webpack-html-stats-plugin 介绍
webpack-html-stats-plugin 是一个生成分析报告的插件，它可以在 HTML 文件中添加一个 <script> 标签，引用打包后的 JSON 文件并提供可视化的代码输出信息。
webpack-html-stats-plugin 能够提供以下功能：
- 生成代码分析报告
- 在 HTML 中添加代码分析报告
- 根据用户需求，排除某些不需要的信息
webpack-html-stats-plugin 安装和配置
先来安装一下 webpack-html-stats-plugin：
npm install webpack-html-stats-plugin --save-dev
接下来我们需要在 webpack 的配置文件中使用 webpack-html-stats-plugin，配置如下：
-- -------------------- ---- -------
----- ---------------------- - -------------------------------------
-------------- - -
-- ---
-- --- ------- -----
-- ---
-------- -
-- ---
-- ----- -------
-- ---
-- -- -------------------------
--- ------------------------
--------- -------------
------- ----
--
-
-webpackHtmlStatsPlugin 接受一个对象作为参数，filename 指定生成的 JSON 文件名，默认为 stats.json，fields 指定需要包含在JSON输出中的信息。
webpack-html-stats-plugin 使用
在配置完 webpackHtmlStatsPlugin 之后，我们需要在 HTML 文件中插入生成的 JSON 文件，来实现代码分析报告的生成。
在 HTML 文件中插入 JSON 文件的具体方式，只需在 <head> 标签中添加如下内容即可：
<head>
<!-- ... -->
<% if (ENV === 'production') { %>
<script src='stats.json'></script>
<% } %>
<!-- ... -->
</head>其中，ENV 可以是 production、development 等值，用于判断项目当前环境，只有在 production 环境下才插入分析报告。
值得注意的是，在插入分析报告之前，我们需要先在 webpack 中生成分析报告，通过执行 webpack 打包时添加如下命令：
webpack --profile --json > stats.json
执行完成后，即可在指定的目录中看到生成的 stats.json 文件，之后再在 HTML 中插入即可。
webpack-html-stats-plugin 排除信息
有时候我们需要排除一些不需要展示的信息，通过配置我们可以很方便地实现这一需求。配置方式如下：
new webpackHtmlStatsPlugin({
// 排除 output.jsonpScript 和 children 等属性
exclude: ['output.jsonpScript', 'children']
})示例代码
最后，献上一个简单的示例代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- ---------------------- - -------------------------------------
-------------- - -
------ ----------------
------- -
----- ----------------------- --------
--------- -----------
--
-------- -
--- ------------------------
-------- ---------------------- -----------
--
-
--- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----------------------------------------
-- -- ---- --- ------------- - --
------- --------------------------
-- - --
-------
------
---- ----------------
------- ---------------------------
-------
-------执行 webpack --profile --json > stats.json 生成 stats.json 文件后，在 HTML 中插入代码分析报告。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067367890c4f7277584034