Webpack progress using node.js API

Question

Is there currently a way to access webpack\'s progress while using the node.js API? I\'m familiar with the --progress flag using the CLI.

Answer 1

The Webpack CLI uses the ProgressPlugin to log the progress of a compilation.

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) {
  // ...
});

Here is a link to the Compiler documentation and the ProgressPlugin documentation.

Answer 2

To output something similar as the CLI --progress flag:

    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')
    })

Answer 3

https://www.npmjs.com/package/progress-bar-webpack-plugin this plugin leverages node-progress.

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