fix: multi compiler progress output

package.json

@@ -93,7 +93,7 @@
     "ts-loader": "^9.3.1",
     "ts-node": "^10.9.1",
     "typescript": "^5.0.4",
-    "webpack": "^5.72.0",
+    "webpack": "^5.86.0",
     "webpack-bundle-analyzer": "^4.5.0",
     "webpack-dev-server": "^4.8.1"
   }

packages/webpack-cli/src/plugins/cli-plugin.ts

@@ -1,4 +1,4 @@
-import { type Compiler } from "webpack";
+import { type Compiler, ProgressPlugin } from "webpack";
 import { type CLIPluginOptions } from "../types";
 
 export class CLIPlugin {
@@ -21,17 +21,51 @@ export class CLIPlugin {
     }
   }
 
+  static #progressStates: [number, ...string[]][] = [];
+
   setupProgressPlugin(compiler: Compiler) {
     const { ProgressPlugin } = compiler.webpack || require("webpack");
     const progressPlugin = Boolean(
       compiler.options.plugins.find((plugin) => plugin instanceof ProgressPlugin),
     );
 
-    if (!progressPlugin) {
-      new ProgressPlugin({
-        profile: this.options.progress === "profile",
-      }).apply(compiler);
+    if (progressPlugin) {
+      return;
     }
+
+    const isProfile = this.options.progress === "profile";
+
+    const options: ConstructorParameters<typeof ProgressPlugin>[0] = {
+      profile: isProfile,
+    };
+
+    if (this.options.isMultiCompiler && ProgressPlugin.createDefaultHandler) {
+      const handler = ProgressPlugin.createDefaultHandler(
+        isProfile,
+        compiler.getInfrastructureLogger("webpack.Progress"),
+      );
+      const idx = CLIPlugin.#progressStates.length;
+
+      CLIPlugin.#progressStates[idx] = [0];
+
+      options.handler = (p: number, msg: string, ...args: string[]) => {
+        CLIPlugin.#progressStates[idx] = [p, msg, ...args];
+
+        let sum = 0;
+
+        for (const [p] of CLIPlugin.#progressStates) {
+          sum += p;
+        }
+
+        handler(
+          sum / CLIPlugin.#progressStates.length,
+          `[${compiler.name ? compiler.name : idx}] ${msg}`,
+          ...args,
+        );
+      };
+    }
+
+    new ProgressPlugin(options).apply(compiler);
   }
 
   setupHelpfulOutput(compiler: Compiler) {

packages/webpack-cli/src/types.ts

@@ -11,6 +11,7 @@ import type {
   Argument,
   AssetEmittedInfo,
   FileCacheOptions,
+  WebpackPluginInstance,
 } from "webpack";
 import type webpack from "webpack";
 
@@ -210,6 +211,7 @@ type ProcessedArguments = Record<string, BasicPrimitive | RegExp | (BasicPrimiti
 type CommandAction = Parameters<WebpackCLICommand["action"]>[0];
 
 interface WebpackRunOptions extends WebpackOptionsNormalized {
+  progress?: boolean | "profile";
   json?: boolean;
   argv?: Argv;
   env: Env;
@@ -237,6 +239,7 @@ interface BasicPackageJsonContent {
  */
 
 interface CLIPluginOptions {
+  isMultiCompiler?: boolean;
   configPath?: string[];
   helpfulOutput: boolean;
   hot?: boolean | "only";

packages/webpack-cli/src/webpack-cli.ts

@@ -2348,6 +2348,7 @@ class WebpackCLI implements IWebpackCLI {
           helpfulOutput: !options.json,
           progress: options.progress,
           analyze: options.analyze,
+          isMultiCompiler: Array.isArray(config.options),
         }),
       );
     };

yarn.lock

@@ -11138,10 +11138,10 @@ webpack-sources@^3.2.3:
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.3.tgz#2d4daab8451fd4b240cc27055ff6a0c2ccea0cde"
   integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
 
-webpack@^5.72.0:
-  version "5.85.1"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.85.1.tgz#d77406352f8f14ec847c54e4dcfb80b28c776b3f"
-  integrity sha512-xTb7MRf4LY8Z5rzn7aIx4TDrwYJrjcHnIfU1TqtyZOoObyuGSpAUwIvVuqq5wPnv7WEgQr8UvO1q/dgoGG4HjA==
+webpack@^5.86.0:
+  version "5.86.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.86.0.tgz#b0eb81794b62aee0b7e7eb8c5073495217d9fc6d"
+  integrity sha512-3BOvworZ8SO/D4GVP+GoRC3fVeg5MO4vzmq8TJJEkdmopxyazGDxN8ClqN12uzrZW9Tv8EED8v5VSb6Sqyi0pg==
   dependencies:
     "@types/eslint-scope" "^3.7.3"
     "@types/estree" "^1.0.0"