diff --git a/packages/webpack-cli/lib/utils/Compiler.js b/packages/webpack-cli/lib/utils/Compiler.js index c33c73448b6..98081c6807f 100644 --- 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);