fix: use compiler.apply for Progress Plugin (#1772)

* fix: use default webpack handler

* chore: update tests

Co-authored-by: James George <jamesgeorge998001@gmail.com>

Author: rishabh3112

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

@@ -1,8 +1,6 @@
 const webpack = require('webpack');
 const logger = require('./logger');
-const { cyanBright, greenBright } = require('colorette');
 const { CompilerOutput } = require('./CompilerOutput');
-const readline = require('readline');
 
 class Compiler {
     constructor() {
@@ -18,36 +16,15 @@ class Compiler {
 
         compilation.hooks.beforeRun.tap('webpackProgress', () => {
             if (outputOptions.progress) {
-                process.stdout.write('\n');
-                const defaultProgressPluginHandler = (percent, msg) => {
-                    percent = Math.floor(percent * 100);
-                    readline.clearLine(process.stdout, 0);
-                    readline.cursorTo(process.stdout, 0, null);
-                    if (percent !== undefined) {
-                        process.stdout.write(' (');
-                        for (let i = 0; i <= 100; i += 10) {
-                            if (i <= percent) {
-                                process.stdout.write(greenBright('#'));
-                            } else {
-                                process.stdout.write('#');
-                            }
-                        }
-                        process.stdout.write(`) ${percent}% : `);
-                        process.stdout.write(`${cyanBright(msg)}`);
-                        if (percent === 100) {
-                            process.stdout.write(`${cyanBright('Compilation completed\n')}`);
-                        }
-                    }
-                };
                 if (!progressPluginExists) {
-                    new ProgressPlugin(defaultProgressPluginHandler).apply(compilation);
+                    new ProgressPlugin().apply(compilation);
                 } else {
                     if (!progressPluginExists.handler) {
                         options.plugins = options.plugins.filter((e) => e !== progressPluginExists);
                         Object.keys(progressPluginExists).map((opt) => {
                             ProgressPlugin.defaultOptions[opt] = progressPluginExists[opt];
                         });
-                        new ProgressPlugin(defaultProgressPluginHandler).apply(compilation);
+                        new ProgressPlugin().apply(compilation);
                     } else {
                         progressPluginExists.apply(compilation);
                     }

test/progress/progress-flag.test.js

@@ -6,8 +6,7 @@ const { run } = require('../utils/test-utils');
 describe('progress flag', () => {
     it('should show progress', () => {
         const { stderr, stdout } = run(__dirname, ['--progress']);
-        expect(stderr).toBeFalsy();
-        expect(stdout).toContain('100%');
-        expect(stdout).toContain('Compilation completed');
+        expect(stderr).toContain('[webpack.Progress] 100%');
+        expect(stdout).toContain('main.js');
     });
 });