Webpack:Logger 接口

2023-05-10 10:10 更新

使用 Logger 输出消息是一种向用户展示信息的有效方式。

Webpack Logger 可以用在 loader 和 plugin。生成的 Logger 将作为 统计信息 的一部分进行输出,并且用户可以在 webpack 配置文件 中对 Logger 进行配置。

在 Webpack 中使用自定义 Logger API 的优点:

  • 可以 配置 日志的展示级别
  • 日志内容可作为 stats.json 的一部分输出
  • 统计预设会影响日志的输出
  • 使用 plugin 可以影响日志的捕获与展示级别
  • 当使用多个 plugin 和 loader 时,提供更加通用的日志记录解决方案
  • 基于 Webpack 开发的 CLI、UI 工具等可能会选择不同的方式来展示日志
  • Webpack 核心可以触发日志输出,例如:timing data

通过引入 Webpack Logger API,我们希望统一 Webpack plugins 和 loaders 生成日志的方式,并提供更好的方法来检查构建问题。 集成的 Logging 解决方案可以帮助 plugins 和 loader 的开发人员提升他们的开发经验。同时为非 CLI 形式的 Webpack 解决方案构建铺平了道路,例如 dashboard 或其他 UI。

Examples of how to get and use webpack logger in loaders and plugins

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

module.exports = 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

当 plugin/logging 与编译相关时,建议使用 compilation.getLogger,它们将存储在 stats 中。对于在编译周期之外发生的日志记录,请改用 compiler.getInfrastructureLogger。

Logger methods

  • 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 API 时,使用其进行输出

Runtime Logger API

Runtime logger API 仅应该用作开发工具,不应该包含在生产模式中。

  • const logging = require('webpack/lib/logging/runtime'):直接从 Webpack 中引入即可使用 logger API
  • logging.getLogger('name'):根据名称获取一个 logger 的实例
  • logging.configureDefaultLogger(...):重写 logger 的默认配置
const logging = require('webpack/lib/logging/runtime');
logging.configureDefaultLogger({
  level: 'log',
  debug: /something/,
});
  • logging.hooks.log:向 logger 中添加 Plugins


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号