WebpackBar

7.0.0 verified Sat Apr 25 auth: no javascript

Elegant progress bar and profiler plugin for Webpack (v3/4/5) and Rspack, maintained under the unjs organization. Version 7.0.0 adds Rspack support, uses ansis for color output, and drops Node <14.21.3. Key differentiators: multi-build (SSR) support, built-in reporters (fancy, basic, profile), and a customizable reporter API. Ships TypeScript type definitions, ESM- and CJS-compatible. Release cadence is irregular with occasional major bumps for breaking dependency upgrades.

Common errors

error Error: Cannot find module 'webpackbar' ↓

cause Missing install or wrong import path.

fix

Run npm install webpackbar or use correct import: import WebpackBar from 'webpackbar'.

error TypeError: webpackbar is not a constructor ↓

cause Using CommonJS require without default import.

fix

Change const WebpackBar = require('webpackbar') to const { default: WebpackBar } = require('webpackbar') or use ESM import WebpackBar from 'webpackbar'.

error Error: Cannot find module 'webpackbar/rspack' ↓

cause Using an older version of webpackbar that does not support Rspack (pre-v7).

fix

Upgrade to webpackbar@7.0.0 or later: npm install webpackbar@latest.

Warnings

breaking Node.js version requirement increased to >=14.21.3 in v6.0.0 due to consola v3 upgrade. ↓

fix Update Node.js to v14.21.3 or later, or use webpackbar@5.x.

breaking consola upgraded to v3 in v6.0.0, which may break custom reporters relying on consola internals. ↓

fix Ensure custom reporters use consola v3 API. Use consola v3's `createConsola` if needed.

deprecated The `profile` option no longer automatically adds a 'profile' reporter? Actually v6.0.0 fixed that. No deprecated options.

gotcha When using multiple instances (e.g., SSR), ensure each has a unique `name` to avoid progress bar collision. ↓

fix Set `name` option to a unique string per plugin instance.

gotcha In CI environments, `fancy` reporter defaults to false; progress may not display as expected. ↓

fix Set `fancy: true` explicitly if you want fancy bar in CI (not recommended).

Install

npm install webpackbar

yarn add webpackbar

pnpm add webpackbar

Imports

WebpackBar

wrong

const WebpackBar = require('webpackbar'); // note: works in CJS, but ESM preferred

correct

import WebpackBar from 'webpackbar'

Default export for Webpack. Since v6, ESM-first, but CJS require still works.

WebpackBar (Rspack)

wrong

import WebpackBar from 'webpackbar' // this will use webpack plugin, not rspack

correct

import WebpackBar from 'webpackbar/rspack'

Explicit path for Rspack support, added in v7.0.0.

WebpackBar type
```
import type WebpackBar from 'webpackbar'
```
TypeScript type shipped. Use type import for type-only usage.

Quickstart

Basic Webpack configuration using WebpackBar plugin with color and profiling enabled.

import WebpackBar from 'webpackbar';

export default {
  entry: './src/entry.js',
  plugins: [
    new WebpackBar({
      color: 'green',
      profile: true,
    }),
  ],
};