Webpack：Logger 接口

使用 Logger 輸出消息是一種向用戶展示信息的有效方式。

Webpack Logger 可以用在 loader 和 plugin。生成的 Logger 將作為 統(tǒng)計信息 的一部分進(jìn)行輸出，并且用戶可以在 webpack 配置文件 中對 Logger 進(jìn)行配置。

在 Webpack 中使用自定義 Logger API 的優(yōu)點：

• 可以 配置 日志的展示級別
• 日志內(nèi)容可作為 stats.json 的一部分輸出
• 統(tǒng)計預(yù)設(shè)會影響日志的輸出
• 使用 plugin 可以影響日志的捕獲與展示級別
• 當(dāng)使用多個 plugin 和 loader 時，提供更加通用的日志記錄解決方案
• 基于 Webpack 開發(fā)的 CLI、UI 工具等可能會選擇不同的方式來展示日志
• Webpack 核心可以觸發(fā)日志輸出，例如：timing data

通過引入 Webpack Logger API，我們希望統(tǒng)一 Webpack plugins 和 loaders 生成日志的方式，并提供更好的方法來檢查構(gòu)建問題。 集成的 Logging 解決方案可以幫助 plugins 和 loader 的開發(fā)人員提升他們的開發(fā)經(jīng)驗。同時為非 CLI 形式的 Webpack 解決方案構(gòu)建鋪平了道路，例如 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

當(dāng) plugin/logging 與編譯相關(guān)時，建議使用 compilation.getLogger，它們將存儲在 stats 中。對于在編譯周期之外發(fā)生的日志記錄，請改用 compiler.getInfrastructureLogger。

Logger methods

• logger.error(...)：用于輸出錯誤信息
• logger.warn(...)：用于輸出警告信息
• logger.info(...)：用于輸出重要信息。默認(rèn)情況下會顯示這些信息，所以僅用于輸出用戶真正需要查看的消息
• logger.log(...)：用于輸出不重要的信息。只有當(dāng)用戶選擇查看時，才會顯示
• logger.debug(...)：用于輸出調(diào)試信息。只有當(dāng)用戶選擇查看特定模塊的調(diào)試日志時，才會顯示
• logger.trace()：顯示堆棧跟蹤信息，展示形式類似于 logger.debug
• logger.group(...)：將消息進(jìn)行分組，展示形式類似于 logger.log
• logger.groupEnd()：結(jié)束消息分組
• logger.groupCollapsed(...)：將消息進(jìn)行分組。默認(rèn)顯示為折疊 logger.log 日志，當(dāng)日志記錄級別設(shè)置為 'verbose' 或 'debug' 時，顯示展開的日志
• logger.status：寫入一條臨時消息，并且設(shè)置新狀態(tài)，覆蓋上一個狀態(tài)
• logger.clear()：打印水平線。展示形式類似于 logger.log
• logger.profile(...)，logger.profileEnd(...)：捕獲配置文件。當(dāng)支持 console.profile API 時，使用其進(jìn)行輸出

Runtime Logger API

Runtime logger API 僅應(yīng)該用作開發(fā)工具，不應(yīng)該包含在生產(chǎn)模式中。

• const logging = require('webpack/lib/logging/runtime')：直接從 Webpack 中引入即可使用 logger API
• logging.getLogger('name')：根據(jù)名稱獲取一個 logger 的實例
• logging.configureDefaultLogger(...)：重寫 logger 的默認(rèn)配置

const logging = require('webpack/lib/logging/runtime');
logging.configureDefaultLogger({
  level: 'log',
  debug: /something/,
});

• logging.hooks.log：向 logger 中添加 Plugins