Progress Bar Webpack Plugin

2.1.0 verified Sat Apr 25 auth: no javascript

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.

Common errors

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

cause 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 Error: Cannot find module 'progress-bar-webpack-plugin' ↓

cause 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.

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

cause 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()

Warnings

gotcha The 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.

gotcha If 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()'.

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

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

gotcha The 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.

breaking Webpack 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.

Install

npm install progress-bar-webpack-plugin

yarn add progress-bar-webpack-plugin

pnpm add progress-bar-webpack-plugin

Imports

ProgressBarPlugin
wrong
```
import ProgressBarPlugin from 'progress-bar-webpack-plugin';
```
correct
```
const ProgressBarPlugin = require('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
wrong
```
import { ProgressBarPlugin } from 'progress-bar-webpack-plugin';
```
correct
```
const progress = require('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
wrong
```
plugins: [
  ProgressBarPlugin()
]
```
correct
```
plugins: [
  new ProgressBarPlugin()
]
```
You must instantiate the plugin with 'new' as it is a class. Omitting 'new' will cause an error in strict mode.

Quickstart

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`);
      }
    })
  ]
};