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.
Add a comment
|
6 Answers
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.
answered Jun 26, 2015 at 9:37
Alexandre Kirszenberg
36.4k10 gold badges93 silver badges72 bronze badges
3 Comments
John McCarthy
Pair this with node-progress for formatted console output.
Benny Neugebauer
List of all internal Webpack plugins: github.com/webpack/docs/wiki/internal-webpack-plugins
Roman Malieiev
According to the latest Webpack changes you should replace:
compiler.apply(new ProgressPlugin(function(percentage, msg) { console.log((percentage * 100) + '%', msg); })); with new ProgressPlugin(function(percentage, msg) { console.log((percentage * 100) + '%', msg); }).apply(compiler);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')
})
1 Comment
Ferrybig
In Webpack 5, this results in
TypeError: compiler.apply is not a functionhttps://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
})
Comments
This question is six years old!!! but also, if you're using bash or any term supporting ANSI/VT100 escape codes ...
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`);
}
(handler function of ProgressPlugin from Webpack 5.x)
Prints it in same line, with percentage in yellow, message in default console color, and first arg if any in dark grey.
More about escape ANSI chars for bash or ANSI/VT100 compatible term: https://misc.flogisoft.com/bash/tip_colors_and_formatting
Now, let's go to code important stuff!!
Comments
I see the answers here are a few years old, so took a closer look myself at how the webpack cli is doing it, and tried it myself. This works for me on webpack 5.74, node 16.15.1
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
});
Comments
for webpack@^5.65.0 using below
/**
* gulp webpack build production using NodeJS API
* @param {<T>(err?: null | Error, result?: T) => any} done
*/
const buildProduction = done => {
const webpack = require('webpack');
const config = require('./config/webpack.prod');
const merge = Object.assign(config, { mode: 'production' });
// add --progress args to webpack
merge.plugins.push(new webpack.ProgressPlugin());
// same as yarn build:webpack
const compiler = webpack(merge);
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'
);
compiler.close(done);
});
};