日志 API

日志输出是向终端用户展示消息的额外方式。

webpack logger 可用于 loaders 和 plugins。它作为 Stats 的一部分发出，并由用户在 webpack 配置 中进行配置。

webpack 自定义日志 API 的好处：

• 统一的日志显示级别配置
• 日志输出可作为 stats.json 的一部分导出
• Stats presets 影响日志输出
• 插件可以影响日志捕获和显示级别
• 当使用多个插件和 loader 时，它们使用共同的日志解决方案
• 用于 webpack 的 CLI、UI 工具可以选择不同的方式来显示日志
• webpack 核心可以发出日志输出，例如计时数据

通过引入 webpack 日志 API，我们希望统一 webpack 插件和 loader 发出日志的方式，并提供更好的构建问题检查方式。集成的日志解决方案通过改进开发体验来支持插件和 loader 开发者，为诸如仪表板或其他 UI 等非 CLI webpack 解决方案铺平了道路。

避免日志中的噪音！ 请记住，多个插件和 loader 会一起使用。Loader 通常会处理多个文件，并且每个文件都会被调用。选择尽可能低的日志级别，以保持日志输出的信息量。

如何在 loaders 和 plugins 中获取和使用 webpack logger 的示例

my-webpack-plugin.js

const PLUGIN_NAME = "my-webpack-plugin";

export class MyWebpackPlugin {
  apply(compiler) {
    // you can access Logger from compiler
    const logger = compiler.getInfrastructureLogger(PLUGIN_NAME);
    logger.log("log from compiler");

    compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => {
      // you can also access Logger from compilation
      const logger = compilation.getLogger(PLUGIN_NAME);
      logger.info("log from compilation");
    });
  }
}

my-webpack-loader.js

export default function (source) {
  // you can get Logger with `this.getLogger` in your webpack loaders
  const logger = this.getLogger("my-webpack-loader");
  logger.info("hello Logger");
  return source;
}

从上面的 my-webpack-plugin.js 示例可以看出，有两种类型的日志方法：

1. compilation.getLogger
2. compiler.getInfrastructureLogger

建议在插件/日志与编译相关时使用 compilation.getLogger，这些日志会存储在 stats 中。对于在编译周期之外发生的日志，请改用 compiler.getInfrastructureLogger。

Logger 方法

• logger.error(...)：用于错误消息
• logger.warn(...)：用于警告
• logger.info(...)：用于重要信息消息。这些消息默认显示。仅将此方法用于用户真正需要看到的消息
• logger.log(...)：用于不重要信息消息。这些消息仅在用户选择查看时显示
• logger.debug(...)：用于调试信息。这些消息仅在用户选择查看特定模块的调试日志时显示
• logger.trace()：显示堆栈跟踪。显示方式与 logger.debug 相同
• logger.group(...)：对消息进行分组。显示方式与 logger.log 相同，为折叠状态
• logger.groupEnd()：结束一个日志分组
• logger.groupCollapsed(...)：将消息分组在一起。显示方式与 logger.log 相同，为折叠状态。当日志级别设置为 'verbose' 或 'debug' 时，以展开状态显示
• logger.status：写入临时消息，设置新状态，覆盖之前的状态
• logger.clear()：打印水平线。显示方式与 logger.log 相同
• logger.profile(...)、logger.profileEnd(...)：捕获性能分析。在支持时委托给 console.profile

Runtime Logger API

Runtime Logger API 仅作为开发工具使用，不打算包含在生产模式中。

• import logging from 'webpack/lib/logging/runtime'：在运行时使用 logger，直接从 webpack 中引入
• logging.getLogger('name')：按名称获取单独的 logger
• logging.configureDefaultLogger(...)：覆盖默认 logger

import logging from "webpack/lib/logging/runtime";

logging.configureDefaultLogger({
  level: "log",
  debug: /something/,
});

• logging.hooks.log：将插件应用于 runtime logger