在开发前端项目过程中，我们通常会使用 webpack 进行打包处理。然而，由于 webpack 打包过程较为复杂，如果出现问题，我们可能不知道出现了哪些错误，特别是当我们的文件很多时，我们很难追踪日志。
为了解决这个问题，有一个非常好用的 npm 包 —— webpack-watch-log-plugin，它可以帮助我们更好地监控和追踪我们的打包过程，并在控制台输出日志。下面是一个简易的使用教程。
安装
首先我们需要安装该插件，使用 npm 安装即可：
npm install webpack-watch-log-plugin --save-dev
使用
接下来，我们需要在 webpack 的配置文件中引入该插件。在 webpack.config.js 中添加以下代码：
-- -------------------- ---- -------
----- -------------- - ------------------------------------
-------------- - -
-- ----------
-------- -
--- ----------------
----------- -----
------- -
------------------ ---- -- ---------- --- --------
-
--
-
--WatchLogPlugin 接受一个对象参数。其中，persistent 表示实时输出日志，config.durationThreshold 表示日志的打印阈值，超出阈值的 log 会被打印到控制台。更多详细参数可以参考插件文档。
示例代码
-- -------------------- ---- -------
-- -----------------
----- -------------- - ------------------------------------
-------------- - -
------ -------------
------- -
--------- ------------
--
-------- -
--- ----------------
----------- -----
------- -
------------------ ---- -- ---------- --- --------
-
---
--
--总结
使用 webpack-watch-log-plugin，可以在打包过程中更好地查看和输出日志，对于出现的问题我们可以第一时间发现，并快速解决。虽然该插件的配置参数较为简单，但使用起来还是很有学习价值和指导意义的，特别是在我们需要监控和定位问题时，它能够发挥重要作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005576081e8991b448d45ae