Simple Progress Webpack Plugin

2.0.0 verified Sat Apr 25 auth: no javascript

A simple progress plugin for Webpack (v2.0.0, last released 2022, infrequent updates) that provides detailed, visually appealing build progress in the command line. It supports four output formats: minimal, simple, compact (default), expanded, and verbose. Requires Node.js 12+. Alternative to webpack's built-in progress plugin or ProgressBarPlugin.

Common errors

error Error: Cannot find module 'simple-progress-webpack-plugin' ↓

cause Package not installed or not in node_modules.

fix

Run 'npm install simple-progress-webpack-plugin --save-dev'.

error TypeError: SimpleProgressWebpackPlugin is not a constructor ↓

cause Incorrect import: using a named import instead of default.

fix

Use 'const SimpleProgressWebpackPlugin = require('simple-progress-webpack-plugin');' or 'import SimpleProgressWebpackPlugin from ...' if ESM.

error Error: webpack >=2.0.0 is required ↓

cause Webpack version is too old; plugin requires webpack 2+.

fix

Upgrade webpack to version 2 or higher.

error Options.format must be one of: minimal, simple, compact, expanded, verbose ↓

cause Invalid format string passed to options.

fix

Check the format option and use one of the allowed values.

Warnings

breaking Requires Node.js 12+. Older versions are not supported and may cause errors. ↓

fix Upgrade Node.js to version 12 or higher.

breaking Plugin renamed from 'SimpleProgressPlugin' in v1.x? No, always 'SimpleProgressWebpackPlugin'. ↓

fix Use the correct class name 'SimpleProgressWebpackPlugin'.

deprecated The 'format' option 'verbose' may produce excessive output and is intended for debugging only. ↓

fix Use 'compact', 'expanded', 'simple', or 'minimal' for production.

gotcha The plugin uses chalk internally; color output may not appear on all CI systems (e.g., Jenkins). ↓

fix Set 'color: false' if colors are not supported.

gotcha In watch mode, the plugin prints progress for each recompilation, which may clutter output. ↓

fix Use 'minimal' format to reduce output or consider a custom condition.

Install

npm install simple-progress-webpack-plugin

yarn add simple-progress-webpack-plugin

pnpm add simple-progress-webpack-plugin

Imports

SimpleProgressWebpackPlugin

wrong

import SimpleProgressWebpackPlugin from 'simple-progress-webpack-plugin';

correct

const SimpleProgressWebpackPlugin = require('simple-progress-webpack-plugin');

CommonJS is the standard for webpack config files; ESM import may not work in all Node.js versions.

SimpleProgressWebpackPlugin

wrong

import { SimpleProgressWebpackPlugin } from 'simple-progress-webpack-plugin';

correct

import SimpleProgressWebpackPlugin = require('simple-progress-webpack-plugin');

Default export is the class itself, not a named export.

Options

wrong

import { Options } from 'simple-progress-webpack-plugin';

correct

import type { Options } from 'simple-progress-webpack-plugin';

Type import for TypeScript; options interface is not a runtime value.

Quickstart

Instantiates SimpleProgressWebpackPlugin with default options in a webpack config file.

// webpack.config.js
const SimpleProgressWebpackPlugin = require('simple-progress-webpack-plugin');

module.exports = {
  // ... other webpack config
  plugins: [
    new SimpleProgressWebpackPlugin({
      format: 'compact', // optional: minimal, simple, compact, expanded, verbose
      color: true, // optional: default true
      name: 'My Build', // optional: custom build name
    }),
  ],
};