ロガーインターフェース

ログ出力は、エンドユーザーにメッセージを表示するもう1つの方法です。

Webpackロガーは、ローダーとプラグインで使用できます。Statsの一部として出力され、webpack設定でユーザーによって設定されます。

webpackにおけるカスタムロギングAPIの利点

• ログ表示レベルを設定する共通の場所
• ログ出力は、stats.jsonの一部としてエクスポート可能
• Statsプリセットがログ出力に影響を与える
• プラグインは、ログのキャプチャと表示レベルに影響を与える可能性がある
• 複数のプラグインとローダーを使用する場合、共通のロギングソリューションを使用する
• webpackのCLI、UIツールは、ログを表示するさまざまな方法を選択できる
• webpackコアは、タイミングデータなどのログ出力を出力できる

webpackロギングAPIを導入することで、webpackプラグインとローダーがログを出力する方法を統一し、ビルドの問題をより適切に検査できるようにすることを目指しています。統合されたロギングソリューションは、プラグインとローダーの開発者の開発エクスペリエンスを向上させることでサポートします。ダッシュボードやその他のUIなどの非CLI webpackソリューションへの道を開きます。

ローダーとプラグインで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の例からわかるように、ロギングメソッドには2つのタイプがあります。

1. compilation.getLogger
2. compiler.getInfrastructureLogger

プラグイン/ロギングがコンパイルに関連する場合、compilation.getLoggerを使用することをお勧めします。これらはstats内に保存されます。コンパイルサイクル外で発生するロギングの場合は、代わりに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から直接requireします
• logging.getLogger('name')：名前で個別のロガーを取得します
• logging.configureDefaultLogger(...)：デフォルトのロガーをオーバーライドします。

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

• logging.hooks.log：ランタイムロガーにプラグインを適用します