fix: show plugin name in progress log (#3337)

Author: snitin315

client-src/index.js

@@ -106,7 +106,11 @@ const onSocketMessage = {
   },
   'progress-update': function progressUpdate(data) {
     if (options.progress) {
-      log.info(`${data.percent}% - ${data.msg}.`);
+      log.info(
+        `${data.pluginName ? `[${data.pluginName}] ` : ''}${data.percent}% - ${
+          data.msg
+        }.`
+      );
     }
 
     sendMessage('Progress', data);

lib/Server.js

@@ -91,7 +91,7 @@ class Server {
   setupProgressPlugin() {
     const { ProgressPlugin } = require('webpack');
 
-    new ProgressPlugin((percent, msg, addInfo) => {
+    new ProgressPlugin((percent, msg, addInfo, pluginName) => {
       percent = Math.floor(percent * 100);
 
       if (percent === 100) {
@@ -102,10 +102,14 @@ class Server {
         msg = `${msg} (${addInfo})`;
       }
 
-      this.sockWrite(this.sockets, 'progress-update', { percent, msg });
+      this.sockWrite(this.sockets, 'progress-update', {
+        percent,
+        msg,
+        pluginName,
+      });
 
       if (this.server) {
-        this.server.emit('progress-update', { percent, msg });
+        this.server.emit('progress-update', { percent, msg, pluginName });
       }
     }).apply(this.compiler);
   }

test/client/__snapshots__/index.test.js.snap.webpack4

@@ -58,6 +58,10 @@ exports[`index should run onSocketMessage.progress and onSocketMessage['progress
 
 exports[`index should run onSocketMessage.progress and onSocketMessage['progress-update'] 2`] = `"12% - mock-msg."`;
 
+exports[`index should run onSocketMessage.progress and onSocketMessage['progress-update'] and log plugin name 1`] = `"Progress"`;
+
+exports[`index should run onSocketMessage.progress and onSocketMessage['progress-update'] and log plugin name 2`] = `"[mock-plugin] 12% - mock-msg."`;
+
 exports[`index should run onSocketMessage.warnings 1`] = `"Warnings while compiling."`;
 
 exports[`index should run onSocketMessage.warnings 2`] = `"Warnings"`;

test/client/__snapshots__/index.test.js.snap.webpack5

@@ -58,6 +58,10 @@ exports[`index should run onSocketMessage.progress and onSocketMessage['progress
 
 exports[`index should run onSocketMessage.progress and onSocketMessage['progress-update'] 2`] = `"12% - mock-msg."`;
 
+exports[`index should run onSocketMessage.progress and onSocketMessage['progress-update'] and log plugin name 1`] = `"Progress"`;
+
+exports[`index should run onSocketMessage.progress and onSocketMessage['progress-update'] and log plugin name 2`] = `"[mock-plugin] 12% - mock-msg."`;
+
 exports[`index should run onSocketMessage.warnings 1`] = `"Warnings while compiling."`;
 
 exports[`index should run onSocketMessage.warnings 2`] = `"Warnings"`;

test/client/index.test.js

@@ -128,6 +128,25 @@ describe('index', () => {
     expect(log.log.info.mock.calls[0][0]).toMatchSnapshot();
   });
 
+  test("should run onSocketMessage.progress and onSocketMessage['progress-update'] and log plugin name", () => {
+    onSocketMessage.progress(false);
+    onSocketMessage['progress-update']({
+      msg: 'mock-msg',
+      percent: '12',
+      pluginName: 'mock-plugin',
+    });
+    expect(log.log.info).not.toBeCalled();
+    expect(sendMessage.mock.calls[0][0]).toMatchSnapshot();
+
+    onSocketMessage.progress(true);
+    onSocketMessage['progress-update']({
+      msg: 'mock-msg',
+      percent: '12',
+      pluginName: 'mock-plugin',
+    });
+    expect(log.log.info.mock.calls[0][0]).toMatchSnapshot();
+  });
+
   test('should run onSocketMessage.overlay with an argument is Object', () => {
     onSocketMessage.overlay({
       warnings: true,