ProgressPlugin

ProgressPluginは、コンパイル中の進捗状況の報告方法をカスタマイズする方法を提供します。

使用方法

ProgressPluginのインスタンスを作成し、許可されたパラメータのいずれかを指定します。また、デフォルトのハンドラーをカスタマイズするために使用できる静的メソッドcreateDefaultHandlerがあります。

関数の提供

フックが進行状況を報告した際に呼び出されるハンドラー関数を指定します。handler関数の引数

• percentage: コンパイルの完了率を示す0～1の間の数値
• message: 現在実行中のフックの簡単な説明
• ...args: 現在の進捗状況を示す追加の文字列（0個以上）

const handler = (percentage, message, ...args) => {
  // e.g. Output each progress message directly to the console:
  console.info(percentage, message, ...args);
};

new webpack.ProgressPlugin(handler);

オブジェクトの指定

ProgressPluginにオブジェクトを指定する場合、以下のプロパティがサポートされています。

• activeModules (boolean = false): アクティブなモジュールの数と、進行中の1つのアクティブなモジュールに関するメッセージを表示します。
• entries (boolean = true): 進捗状況メッセージにエントリの数を表示します。
• handler (関数の指定を参照)
• modules (boolean = true): 進捗状況メッセージにモジュールの数を表示します。
• modulesCount (number = 5000): 開始する最小モジュール数。modulesプロパティが有効な場合に適用されます。
• profile (boolean = false): ProgressPluginに、進捗状況のステップのプロファイルデータを収集するように指示します。
• dependencies (boolean = true): 進捗状況メッセージに依存関係の数を表示します。
• dependenciesCount (number = 10000): 開始する最小依存関係数。dependenciesプロパティが有効な場合に適用されます。
• percentBy (string = null: 'entries' | 'dependencies' | 'modules' | null): ProgressPluginに、進捗率の計算方法を指示します。

new webpack.ProgressPlugin({
  activeModules: false,
  entries: true,
  handler(percentage, message, ...args) {
    // custom logic
  },
  modules: true,
  modulesCount: 5000,
  profile: false,
  dependencies: true,
  dependenciesCount: 10000,
  percentBy: null,
});

webpack.ProgressPlugin.createDefaultHandler

ProgressPluginのデフォルトハンドラーが要件を満たさない場合は、静的メソッドProgressPlugin.createDefaultHandlerを使用してカスタマイズできます。

static createDefaultHandler: (
  profile: undefined | null | boolean,
  logger: WebpackLogger
) => (percentage: number, msg: string, ...args: string[]) => void;

パーセンテージの計算

デフォルトでは、進捗率は構築済みのモジュール数と総モジュール数の比率に基づいて計算されます: 構築済み / 総数

総モジュール数は事前に不明であり、ビルド中に変化します。これにより、進捗率が不正確になる可能性があります。

この問題を解決するために、ProgressPluginは最後に判明した総モジュール数をキャッシュし、次のビルドでその値を再利用します。最初のビルドではキャッシュがウォームアップされますが、以降のビルドではこの値が使用および更新されます。

複数のエントリポイントが設定されているプロジェクトでは、percentBy: 'entries'設定を使用することをお勧めします。エントリポイントの数は事前にわかっているので、パーセンテージの計算がより正確になります。

サポートされているフック

以下のフックは、ProgressPluginに進行状況情報を報告します。

コンパイラ

• compilation
• emit*
• afterEmit*
• done

コンパイル

• buildModule
• failedModule
• succeedModule
• finishModules*
• seal*
• optimizeDependenciesBasic*
• optimizeDependencies*
• optimizeDependenciesAdvanced*
• afterOptimizeDependencies*
• optimize*
• optimizeModulesBasic*
• optimizeModules*
• optimizeModulesAdvanced*
• afterOptimizeModules*
• optimizeChunksBasic*
• optimizeChunks*
• optimizeChunksAdvanced*
• afterOptimizeChunks*
• optimizeTree*
• afterOptimizeTree*
• optimizeChunkModulesBasic*
• optimizeChunkModules*
• optimizeChunkModulesAdvanced*
• afterOptimizeChunkModules*
• reviveModules*
• optimizeModuleOrder*
• advancedOptimizeModuleOrder*
• beforeModuleIds*
• moduleIds*
• optimizeModuleIds*
• afterOptimizeModuleIds*
• reviveChunks*
• optimizeChunkOrder*
• beforeChunkIds*
• optimizeChunkIds*
• afterOptimizeChunkIds*
• recordModules*
• recordChunks*
• beforeHash*
• afterHash*
• recordHash*
• beforeModuleAssets*
• beforeChunkAssets*
• additionalChunkAssets*
• record*
• additionalAssets*
• optimizeChunkAssets*
• afterOptimizeChunkAssets*
• optimizeAssets*
• afterOptimizeAssets*
• afterSeal*

ソース

• ProgressPluginのソース