webpack-simple-progress-plugin

0.0.5 verified Sat Apr 25 auth: no javascript

A webpack plugin that displays a simple progress bar in the terminal during the build process. Current stable version is 0.0.5, which supports webpack 1 through 5. It uses node-progress and chalk for customizable progress bars and messages. The plugin wraps webpack's ProgressPlugin events to provide real-time feedback. It is lightweight with no unusual overhead, suitable for projects that want a minimalistic progress indicator. Suitable for any webpack project requiring visual progress feedback during builds.

Common errors

error Cannot find module 'chalk' ↓

cause chalk is a peer dependency but not installed automatically.

fix

Run 'npm install chalk@^2.4.2 --save-dev' or add chalk to your project dependencies.

error TypeError: SimpleProgressPlugin is not a constructor ↓

cause The import was done using ES modules (import) instead of CommonJS require.

fix

Use 'const SimpleProgressPlugin = require('webpack-simple-progress-plugin');' instead of 'import'.

error Error: webpack-simple-progress-plugin: webpack version 5 is not supported. ↓

cause Installed version is older than 0.0.5 which does not support webpack 5.

fix

Update to version 0.0.5 or later: 'npm install webpack-simple-progress-plugin@latest --save-dev'.

Warnings

breaking Versions before 0.0.5 do not support webpack 5. Update to 0.0.5 if using webpack 5. ↓

fix npm install webpack-simple-progress-plugin@latest --save-dev

deprecated The package uses chalk v2 syntax, which may be incompatible with chalk v5+. Consider using a different progress plugin or pinning chalk to v2. ↓

fix Add "chalk": "^2.4.2" as a direct dependency in your package.json, or use a plugin that supports modern chalk.

gotcha The plugin may not display correctly in non-TTY environments (e.g., CI logs with no terminal). ↓

fix Conditionally enable the plugin only for interactive terminals using process.stdout.isTTY.

gotcha The progress bar is rendered using node-progress; if multiple instances run simultaneously, output may overlap. ↓

fix Ensure only one instance of the plugin is used per compilation.

Install

npm install webpack-simple-progress-plugin

yarn add webpack-simple-progress-plugin

pnpm add webpack-simple-progress-plugin

Imports

SimpleProgressPlugin

wrong

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

correct

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

This package does not ship ESM; use CommonJS require. The export is a function that returns a plugin instance.

SimpleProgressPlugin
wrong
```
const SimpleProgressPlugin = require('webpack-simple-progress-plugin');
```
correct
```
const SimpleProgressPlugin = require('webpack-simple-progress-plugin').default;
```
In version 0.0.x, the default export is the plugin constructor itself, but some bundlers may require .default if transpiled. Check your setup.

PluginOptions

wrong

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

correct

No TypeScript type exports are provided.

The package does not export TypeScript types. Use JSDoc or declare your own types.

Quickstart

Basic webpack configuration using CommonJS require with custom progress bar styling and message template.

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

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  plugins: [
    new SimpleProgressPlugin({
      messageTemplate: [':bar', ':percent', ':msg'].join(' '),
      progressOptions: {
        complete: '█',
        incomplete: '░',
        width: 30,
        total: 100,
        clear: false
      }
    })
  ]
};