feat(webpack-cli): add progress bar for progress flag (#1238)

* feat: add progress bar in progress * chore: remove async * chore: remove readline * chore: lint
webpack · Feb 18, 2020 · 06129a1 · 06129a1
1 parent 6cc6a49
commit 06129a1
Showing 1 changed file with 18 additions and 8 deletions.
diff --git a/packages/webpack-cli/lib/utils/Compiler.js b/packages/webpack-cli/lib/utils/Compiler.js
@@ -1,5 +1,6 @@
 const webpack = require('webpack');
 const logger = require('./logger');
+const { cyanBright, greenBright } = require('chalk');
 const { CompilerOutput } = require('./CompilerOutput');
 
 class Compiler {
@@ -15,17 +16,26 @@ class Compiler {
 
         compilation.hooks.beforeRun.tap('webpackProgress', () => {
             if (outputOptions.progress) {
-                let tmpMsg;
+                process.stdout.write('\n');
                 const defaultProgressPluginHandler = (percent, msg) => {
                     percent = Math.floor(percent * 100);
-                    if (percent === 100) {
-                        msg = 'Compilation completed';
+                    process.stdout.clearLine();
+                    process.stdout.cursorTo(0);
+                    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('Complilation completed\n')}`);
+                        }
                     }
-
-                    if (msg && tmpMsg != msg) {
-                        logger.info(percent + '% ' + msg);
-                    }
-                    tmpMsg = msg;
                 };
                 if (!progressPluginExists) {
                     new ProgressPlugin(defaultProgressPluginHandler).apply(compilation);