Registry / devops / progress-bar-webpack-plugin

progress-bar-webpack-plugin

library2.1.0jsnpmunverified

This package provides a customizable progress bar for Webpack builds, leveraging the node-progress library. It supports a wide range of Webpack versions (1.x through 5.x) and offers options like format, width, throttle, custom summary, and chalk integration. Currently at version 2.1.0, it is actively maintained and used to display build progress in the console. Compared to alternatives like webpack's built-in progress plugin or friendly-errors-webpack-plugin, it focuses solely on a minimalist, configurable progress bar with minimal overhead.

devops

npm install progress-bar-webpack-plugin

github ↗package ↗

INSTALL

IMPORT

SIG · PROGRESS-BAR-WEBPA

progress-bar-webpack-plugin

devopsjavascriptv2.1.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

ProgressBarPlugin

✓ const ProgressBarPlugin = require('progress-bar-webpack-plugin');

✗ import ProgressBarPlugin from 'progress-bar-webpack-plugin';

This package does not provide a default ESM export; use CommonJS require. The import syntax may fail in Node environments without ESM support.

ProgressBarPlugin

✓ const progress = require('progress-bar-webpack-plugin');

✗ import { ProgressBarPlugin } from 'progress-bar-webpack-plugin';

The package exports a single constructor function as module.exports, not a named export. Named import will result in undefined.

ProgressBarPlugin

✓ plugins: [ new ProgressBarPlugin() ]

✗ plugins: [ ProgressBarPlugin() ]

You must instantiate the plugin with 'new' as it is a class. Omitting 'new' will cause an error in strict mode.

Shows how to require and instantiate the plugin with custom format, clearing disabled, and a custom summary callback.

// webpack.config.js const ProgressBarPlugin = require('progress-bar-webpack-plugin'); module.exports = { // ... other config plugins: [ new ProgressBarPlugin({ format: ' build [:bar] :percent (:elapsed seconds)', clear: false, summary: false, customSummary: (buildTime) => { console.log(`Build completed in ${buildTime}s`); } }) ] };

Debug

Known issues

gotchaThe package uses CommonJS module.exports and does not offer an ESM export. When using ES modules (e.g., 'type': 'module' in package.json or .mjs files), require() is not available, causing a ReferenceError.

fix

Use dynamic import: const { default: ProgressBarPlugin } = await import('progress-bar-webpack-plugin'); or stick to CommonJS.

affects: >=1.0.0

gotchaIf not instantiated with 'new' (e.g., just ProgressBarPlugin() in plugins array), it throws 'TypeError: Class constructor ProgressBarPlugin cannot be invoked without 'new''.

fix

Always use 'new ProgressBarPlugin()'.

affects: >=2.0.0

deprecatedOptions 'summary' and 'summaryContent' are deprecated in favor of 'customSummary' function.

fix

Use 'customSummary' option with a function that receives build time in seconds.

affects: >=2.0.0

gotchaThe default output stream is stderr. If you redirect stderr or run in an environment where stderr is not visible (e.g., some CI captures), the progress bar will not be seen.

fix

Set the 'stream' option to process.stdout or a custom writable stream.

affects: >=1.0.0

breakingWebpack 5 support was added in version 2.1.0. Earlier versions (2.0.x) may have compatibility issues with Webpack 5's hook changes.

fix

Upgrade to version 2.1.0 or later for full Webpack 5 compatibility.

affects: >=2.0.0 <2.1.0

Errors

Common errors & fixes

TypeError: Class constructor ProgressBarPlugin cannot be invoked without 'new'

The plugin is instantiated without the 'new' keyword in the plugins array.

fix

Use 'new ProgressBarPlugin()' instead of 'ProgressBarPlugin()'. For example: plugins: [ new ProgressBarPlugin() ]

Error: Cannot find module 'progress-bar-webpack-plugin'

The package is not installed or installed as a devDependency but not available in the current environment.

fix

Run 'npm install --save-dev progress-bar-webpack-plugin' to install it.

UnhandledPromiseRejectionWarning: TypeError: progress-bar-webpack-plugin is not a constructor

Using dynamic import in ESM and accessing wrong property (e.g., import('pkg') gives an object with default property).

fix

Use: const ProgressBarPlugin = (await import('progress-bar-webpack-plugin')).default; then new ProgressBarPlugin()

Upgrade

Version history

2.1.0latest on npm

Audit

Dependencies

webpackrequiredThis is a Webpack plugin, so it requires Webpack as a peer dependency.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/clessg/progress-bar-webpack-plugin ↗

packagehttps://www.npmjs.com/package/progress-bar-webpack-plugin ↗