記錄器介面

記錄輸出是向最終使用者顯示訊息的另一種方式。

Webpack 記錄器可供 載入器 和 外掛程式 使用。發出作為 統計資料 的一部分，並由使用者在 Webpack 設定 中設定。

Webpack 中自訂記錄 API 的好處

• 設定記錄顯示層級的共用位置 設定記錄
• 記錄輸出可作為 stats.json 的一部分匯出
• 統計資料預設會影響記錄輸出
• 外掛程式會影響記錄擷取和顯示層級
• 使用多個外掛程式和載入器時，它們會使用共用的記錄解決方案
• Webpack 的 CLI、UI 工具可能會選擇不同的方式來顯示記錄
• Webpack 核心會發出記錄輸出，例如計時資料

透過導入 Webpack 記錄 API，我們希望統一 Webpack 外掛程式和載入器發出記錄的方式，並允許更好的方式來檢查建置問題。整合的記錄解決方案透過改善開發人員的開發體驗來支援外掛程式和載入器開發人員。為非 CLI Webpack 解決方案（例如儀表板或其他 UI）鋪路。

在載入器和外掛程式中取得並使用 webpack 記錄器的範例

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

建議在外掛程式/記錄與編譯相關時使用 compilation.getLogger，它們會儲存在統計資料中。對於發生在編譯週期之外的記錄，請改用 compiler.getInfrastructureLogger。

記錄器方法

• 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

執行時期記錄器 API 僅供開發工具使用，不打算包含在 生產模式 中。

• const logging = require('webpack/lib/logging/runtime')：要在執行時期使用記錄器，請直接從 webpack 載入
• logging.getLogger('name')：依名稱取得個別記錄器
• logging.configureDefaultLogger(...)：覆寫預設記錄器。

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

• logging.hooks.log：將外掛套用至執行時期記錄器