Progress Webpack Plugin

1.0.16 verified Sat Apr 25 auth: no javascript

A simple Webpack plugin that displays a nice progress bar during builds. Version 1.0.16 is the latest stable release, with no frequent updates. It supports Webpack 2 through 5 and provides a more visually informative progress display compared to the built-in Webpack progress. It offers options for minimal mode, custom identifiers, and lifecycle callbacks (onStart, onFinish, onProgress).

Common errors

error Cannot find module 'progress-webpack-plugin' ↓

cause Missing package installation or incorrect import path.

fix

Install package: npm install --save-dev progress-webpack-plugin

error TypeError: ProgressPlugin is not a constructor ↓

cause CommonJS require returns an object with default export or wrong import style.

fix

Use const ProgressPlugin = require('progress-webpack-plugin')

Warnings

gotcha The first argument to ProgressPlugin is 'minimal' (boolean), not a configuration object in some versions. ↓

fix Pass a boolean directly or use object syntax with `minimal` key in newer versions.

breaking Webpack 2+ is required; plugin does not work with Webpack 1. ↓

fix Upgrade to Webpack 2 or higher.

deprecated Package has not been updated since 2018; may not support future Webpack versions. ↓

fix Consider alternatives like webpackbar or progress-bar-webpack-plugin.

Install

npm install progress-webpack-plugin

yarn add progress-webpack-plugin

pnpm add progress-webpack-plugin

Imports

default

wrong

import ProgressPlugin from 'progress-webpack-plugin'

correct

const ProgressPlugin = require('progress-webpack-plugin')

This package does not provide a default ESM export; use CommonJS require.

new ProgressPlugin(true)

wrong

new require('progress-webpack-plugin')(true)

correct

const ProgressPlugin = require('progress-webpack-plugin'); new ProgressPlugin(true)

Instantiate the plugin after requiring it, not as a direct function call.

ProgressPlugin minimal option

wrong

new ProgressPlugin({ minimal: 'true' })

correct

new ProgressPlugin({ minimal: true })

minimal expects a boolean, not a string.

Quickstart

Shows a complete webpack.config.js entry with ProgressPlugin, including minimal mode, identifier, and onProgress callback.

const ProgressPlugin = require('progress-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: { path: __dirname + '/dist', filename: 'bundle.js' },
  plugins: [
    new ProgressPlugin({
      minimal: false,
      identifier: 'My App',
      onProgress: (percentage, message) => {
        console.log(`${Math.round(percentage * 100)}% ${message}`);
      }
    })
  ]
};