Webpack CLI使用ProgressPlugin记录编译进度。

var ProgressPlugin = require('webpack/lib/ProgressPlugin');

var compiler = webpack(config);

compiler.apply(new ProgressPlugin(function(percentage, msg) {
  console.log((percentage * 100) + '%', msg);
}));

compiler.run(function(err, stats) {
  // ...
});

下面是指向编译器文档与ProgressPlugin文档得链接.

要输出类似于CLI --progress标志的内容，请执行以下操作：

var webpack = require('webpack')
    var ProgressPlugin = require('webpack/lib/ProgressPlugin')
    var config = require('./webpack.config')
    var compiler = webpack(config)

    compiler.apply(new ProgressPlugin(function (percentage, msg, current, active, modulepath) {
      if (process.stdout.isTTY && percentage < 1) {
        process.stdout.cursorTo(0)
        modulepath = modulepath ? ' …' + modulepath.substr(modulepath.length - 30) : ''
        current = current ? ' ' + current : ''
        active = active ? ' ' + active : ''
        process.stdout.write((percentage * 100).toFixed(0) + '% ' + msg + current + active + modulepath + ' ')
        process.stdout.clearLine(1)
      } else if (percentage === 1) {
        process.stdout.write('\n')
        console.log('webpack: done.')
      }
    }))

    compiler.run(function (err, stats) {
      if (err) throw err
      process.stdout.write(stats.toString({
        colors: true,
        modules: false,
        children: false,
        chunks: false,
        chunkModules: false
      }) + '\n\n')
    })

https://www.npmjs.com/package/progress-bar-webpack-plugin此插件利用节点进度。

new ProgressBarPlugin({
    format: '  build [:bar] :percent (:elapsed seconds)',
    clear: false, 
    width: 60
  })

这个问题已经有六年了！！！但是，如果您使用bash或任何支持ANSI/VT 100转义码的术语......

handler(percentage, message, ...args) { 
  console.info(`\u001b[A\u001b[K\u001b[33m${(percentage * 100).toFixed(2)}%`+
    `\t\u001b[0m\u001b[1m${message}\t`+
    `\u001b[0m\u001b[90m${args && args.length>0?args[0]:""}\u001b[0m`);
}

（Webpack 5.x中ProgressPlugin的处理程序函数）
将其打印在同一行中，百分比为黄色，消息为默认控制台颜色，第一个参数（如果有）为深灰色。

有关Bash或ANSI/VT 100兼容术语的转义ANSI字符的详细信息：https://misc.flogisoft.com/bash/tip_colors_and_formatting
现在，让我们来编写重要的代码！！

我看到这里的答案是几年前的事了，所以我自己仔细看了看webpack cli是如何做的，并自己尝试了一下。

const ProgressPlugin = require('webpack/lib/ProgressPlugin');
const config = require('./path/to/webpack.config.js');
const compiler = webpack(config);

new ProgressPlugin({
  profile: true
}).apply(compiler);

compiler.run(function(err, stats) {
//handle outputting errors as you like here
});

摘自https://github.com/webpack/webpack-cli/blob/master/packages/webpack-cli/src/plugins/CLIPlugin.ts#L48-L50