fix: add compilation lifecycle in watch instance

packages/webpack-cli/lib/utils/Compiler.js

@@ -4,6 +4,27 @@ const logger = require('./logger');
 const { writeFileSync } = require('fs');
 const bailAndWatchWarning = require('./warnings/bailAndWatchWarning');
 
+const assignWatchHooks = (compiler) => {
+    compiler.hooks.watchRun.tap('watchInfo', (compilation) => {
+        const compilationName = compilation.name || '';
+        logger.raw(`\nCompilation ${compilationName} starting…\n`);
+    });
+    compiler.hooks.done.tap('watchInfo', (compilation) => {
+        const compilationName = compilation.name || '';
+        logger.raw(`\nCompilation ${compilationName} finished\n`);
+    });
+};
+
+const watchInfo = (compiler) => {
+    if (compiler.compilers) {
+        compiler.compilers.map((comp) => {
+            assignWatchHooks(comp);
+        });
+    } else {
+        assignWatchHooks(compiler);
+    }
+};
+
 class Compiler {
     constructor() {
         this.compilerOptions = {};
@@ -151,6 +172,7 @@ class Compiler {
                 });
                 process.stdin.resume();
             }
+            watchInfo(this.compiler);
             await this.invokeWatchInstance(lastHash, options, outputOptions, watchOptions);
         } else {
             return await this.invokeCompilerInstance(lastHash, options, outputOptions);

test/watch/watch-flag.test.js

@@ -14,12 +14,12 @@ describe('--watch flag', () => {
         let semaphore = 1;
         proc.stdout.on('data', (chunk) => {
             const data = chunk.toString();
-            if (semaphore === 1 && data.includes('watching files for updates')) {
+            if (data.includes('watching files for updates')) {
                 writeFileSync(resolve(__dirname, './src/index.js'), `console.log('watch flag test');`);
-                semaphore--;
+                semaphore = 0;
                 return;
             }
-            if (semaphore === 0) {
+            if (semaphore === 0 && data.includes('index.js')) {
                 if (version.startsWith('5')) {
                     for (const word of wordsInStatsv5) {
                         expect(data).toContain(word);
@@ -36,4 +36,29 @@ describe('--watch flag', () => {
             }
         });
     });
+
+    it('should print compilation lifecycle', (done) => {
+        const proc = runAndGetWatchProc(__dirname, ['--watch'], false, '', true);
+        let semaphore = 0;
+        proc.stdout.on('data', (chunk) => {
+            const data = chunk.toString();
+            if (data.includes('Compilation  starting') || data.includes('Compilation  finished')) {
+                semaphore++;
+            }
+            if (semaphore === 2 && data.includes('index.js')) {
+                if (version.startsWith('5')) {
+                    for (const word of wordsInStatsv5) {
+                        expect(data).toContain(word);
+                    }
+                } else {
+                    for (const word of wordsInStatsv4) {
+                        expect(data).toContain(word);
+                    }
+                }
+                proc.kill();
+                done();
+                return;
+            }
+        });
+    });
 });