tessl/npm-webpackbar

Elegant ProgressBar and Profiler for Webpack and Rspack

Overview

Eval results

Files

WebpackBar

Name: tessl/npm-webpackbar
Author: tessl

WebpackBar is an elegant progress bar and profiler plugin for Webpack and Rspack build tools. It provides real-time build progress visualization with customizable progress bars, supports multiple concurrent builds (useful for SSR scenarios), includes advanced build profiling capabilities, and offers a fully customizable reporting system.

Package Information

Package Name: webpackbar
Package Type: npm
Language: TypeScript
Installation: npm install webpackbar

Core Imports

// Webpack usage
import WebpackBar from "webpackbar";

// Rspack usage
import WebpackBar from "webpackbar/rspack";

For CommonJS:

// Webpack usage
const WebpackBar = require("webpackbar");

// Rspack usage
const WebpackBar = require("webpackbar/rspack");

Type imports:

import type { WebpackBarOptions, Reporter, State } from "webpackbar";
// or
import type { WebpackBarOptions, Reporter, State } from "webpackbar/rspack";

Basic Usage

// Webpack configuration
import WebpackBar from "webpackbar";

export default {
  // ... your webpack config
  plugins: [
    new WebpackBar({
      name: 'My App',
      color: 'blue',
      profile: true
    })
  ]
};

// Rspack configuration
import WebpackBar from "webpackbar/rspack";

export default {
  // ... your rspack config
  plugins: [
    new WebpackBar({
      name: 'My App',
      color: 'blue',
      profile: true
    })
  ]
};

Architecture

WebpackBar is built around several key components:

Plugin Entry Points: Separate integrations for Webpack (webpackbar) and Rspack (webpackbar/rspack)
Core Plugin: WebpackBar class that manages state and reporters
Reporter System: Pluggable architecture for different progress display formats
State Management: Global state tracking for multiple concurrent builds
Profiling System: Performance analysis and timing measurements

Capabilities

Plugin Integration

Core plugin classes for integrating with Webpack and Rspack build processes.

import type webpack from "webpack";
import type * as rspack from "@rspack/core";

// Webpack integration
export default class WebpackBarProgressPlugin extends webpack.ProgressPlugin {
  webpackbar: WebpackBar;
  constructor(options?: WebpackBarOptions);
  apply(compiler: webpack.Compiler): void;
}

// Rspack integration  
export default class WebpackBarProgressPlugin extends rspack.ProgressPlugin {
  webpackbar: WebpackBar;
  constructor(options?: WebpackBarOptions);
  apply(compiler: rspack.Compiler): void;
}

Core Plugin Class

The main WebpackBar class that manages state and reporters.

import type webpack from "webpack";

export declare class WebpackBar {
  // State properties
  readonly hasRunning: boolean;          // Whether any compilation is running
  readonly hasErrors: boolean;           // Whether any compilation has errors
  readonly statesArray: State[];         // Array of all compilation states
  readonly states: { [key: string]: State }; // Global states object
  readonly state: State;                 // Current state for this plugin instance
  
  constructor(options?: WebpackBarOptions);
  apply(compiler: webpack.Compiler): void;
  updateProgress(percent?: number, message?: string, details?: string[]): void;
}

Configuration Options

Comprehensive configuration system for customizing progress display and behavior.

interface WebpackBarOptions {
  name?: string;          // Display name (default: 'build')
  color?: string;         // Progress bar color (default: 'green')
  profile?: boolean;      // Enable profiler (default: false)
  fancy?: boolean;        // Enable bars reporter (default: true when not in CI)
  basic?: boolean;        // Enable simple log reporter (default: true in minimal envs)
  reporter?: ReporterInput;   // Single custom reporter
  reporters?: ReporterInput[]; // Array of custom reporters
}

Configuration Options

Reporter System

Built-in reporters and custom reporter interfaces for displaying build progress in different formats.

import type webpack from "webpack";

interface Reporter {
  start?(context: WebpackBar): void;
  change?(context: WebpackBar, payload: { path: string; shortPath: string; time: number }): void;
  update?(context: WebpackBar): void;
  done?(context: WebpackBar, payload: { stats: webpack.Stats }): void;
  progress?(context: WebpackBar): void;
  allDone?(context: WebpackBar): void;
  beforeAllDone?(context: WebpackBar): void;
  afterAllDone?(context: WebpackBar): void;
}

// WebpackBar class that serves as the context for reporters
declare class WebpackBar {
  readonly hasRunning: boolean;          // Whether any compilation is running
  readonly hasErrors: boolean;           // Whether any compilation has errors
  readonly statesArray: State[];         // Array of all compilation states
  readonly states: { [key: string]: State }; // Global states object
  readonly state: State;                 // Current state for this plugin instance
  
  constructor(options?: WebpackBarOptions);
  apply(compiler: webpack.Compiler): void;
  updateProgress(percent?: number, message?: string, details?: string[]): void;
}

Reporter System

Performance Profiling

Built-in profiling system for analyzing build performance and identifying bottlenecks.

interface State {
  start: [number, number] | null;     // High-resolution start time
  progress: number;                   // Progress percentage (-1 to 100)
  done: boolean;                      // Compilation completion status
  message: string;                    // Current status message
  details: string[];                  // Additional status details
  request: null | {                   // Current processing request
    file: null | string;
    loaders: string[];
  };
  hasErrors: boolean;                 // Error status
  color: string;                      // Associated color
  name: string;                       // Display name
}

Performance Profiling

Types

type ReporterOpts = { reporter: Reporter | string; options?: any };
type ReporterInput = string | [Reporter | string, any?] | ReporterOpts;

// Re-exported from main entry points
export { WebpackBarOptions, Reporter, State } from "webpackbar";
export { WebpackBarOptions, Reporter, State } from "webpackbar/rspack";

Install with Tessl CLI

npx tessl i tessl/npm-webpackbar

Workspace: tessl
Visibility: Public
Created: 6 months ago
Last updated: about 1 month ago
Describes: pkg:npm/webpackbar@6.0.x