在前端开发过程中，Webpack 已经成为了一个重要的工具。Web开发中，我们经常需要通过自定义信息来监控Webpack的构建进度并调试。 在这篇文章中，我将为你介绍如何在Webpack构建时指定自定义信息和日志级别。
指定自定义信息
在Webpack构建期间，我们可能需要使用一些自定义信息来检查或优化构建流程。Webpack 提供了一些方便的方法以支持这种需求。
我们可以使用 console.log 函数来打印自定义信息。Webpack有一个compiler对象，我们可以使用它来拦截一些事件并打印有用的信息。例如：
-- -------------------- ---- -------
----- ------- - -------------------
----- -------- - -
--------------- -
----------------------------------- ----- -- -
---------------------- --- -------
---
-
--
-------------- - -
----- -------------
-------- -
---------
--
-在这个例子中，我们使用Webpack的Plugin API并定义一个名为myPlugin的插件。 在这个插件中，我们订阅并捕获了Webpack的 done事件，并使用console.log命令打印了日志信息。
上述代码提供了一种捕获Webpack事件的方式。还有一种方法是将自定义信息打印在Webpack进度中。我们可以使用progress plugin实现这一点。 如果我们想在Webpack进度中显示自己的描述信息，我们可以通过传递handler函数到ProgressPlugin的options中来实现。例如：
-- -------------------- ---- -------
----- ------- - -------------------
----- -------------- - ----------------------------------
-------------- - -
-------- -
--- ----------------
-------- ------------ -------- -------- -- -
-- ---------------------------
----- ----- - -- - ------------------------ - ----
----- ------- - ----- -- --- ------------------- ------------
----- -------- - ----- -- --- ----------------- -------------- ------------
----- ---------------- - ---
----- ----------- - --------------------------------------------------- - -------------- - -----
----- -------------- - --------------------- - ----
----- ------------- - -- - ---------------
----- --------- - ------ ------------------ ------------------------------------------ --- --------------
----- -------- - ------ ------------------ ------------------------------------------
----- ----------- - ------ ------------------ -------------------------------
---------------------------------------------------------
--
---
--
--在这个例子中，我们定义了一个handler函数，它接收一个指示进度的数字百分比，以及一个描述进度的字符串信息，该函数将使用一种复杂的方式打印这些信息。
指定日志级别
当我们构建Web应用程序时，可能需要更改或控制错误和日志信息的类型和数量。与此相关联的是，我们可以通过配置Webpack实例的日志级别来实现。
WebPack提供了多种Log级别：
| 日志等级 | 描述 |
|---|---|
| none | 不输出任何日志，只有警告和错误信息会告诉你。 |
| error | 只输出错误信息。 |
| warn | 输出警告信息和错误信息。 |
| info | 输出有趣的详细信息如每次编译时编译成功的模块，编译时间等。 |
| verbose | 输出详细的信息，包括模块的详细输出。 |
| debug | 输出冗长的调试信息，包括每个模块的详细依赖关系。 |
| trace | 输出模块的详细依赖关系和加载事件。 |
我们可以通过在devServer和webpack配置对象中制定参数实现这些日志级别。例如：
-- -------------------- ---- -------
----- ------- - -------------------
-------------- - -
---------- -
------ -
----------- -----
------- -----
----- ------
-------- ------
-------- ------
------- ------
------------- ------
-------- ------
--
--
------ -
----------- -----
------- -----
----- ------
-------- ------
-------- ------
------- ------
------------- ------
-------- ------
--
--在这个例子中，我们使用了 stats 关键字，指定了一个参数对象，选择关闭一些基本信息。
结论
在本文中，我们学习了在Webpack构建过程中如何指定自定义信息和日志级别。这两种方法无疑是两种重要的调试技巧。掌握它们，可以方便和快速地理解我们的错误和对系统状态进行监视或优化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6706502fd91dce0dc85b93cb