tessl/npm-webpackbar

Elegant ProgressBar and Profiler for Webpack and Rspack

—

Pending

Overview

Eval results

Files

Reporter System

Name: tessl/npm-webpackbar
Author: tessl

WebpackBar provides a flexible reporter system with built-in reporters and support for custom reporters. Reporters control how build progress and completion information is displayed.

Capabilities

Reporter Interface

All reporters implement the Reporter interface with optional lifecycle methods.

import type webpack from "webpack";

interface Reporter {
  /**
   * Called when (re)compile is started
   */
  start?(context: WebpackBar): void;

  /**
   * Called when a file changed on watch mode
   */
  change?(context: WebpackBar, payload: { path: string; shortPath: string; time: number }): void;

  /**
   * Called after each progress update
   */
  update?(context: WebpackBar): void;

  /**
   * Called when compile finished
   */
  done?(context: WebpackBar, payload: { stats: webpack.Stats }): void;

  /**
   * Called when build progress updated
   */
  progress?(context: WebpackBar): void;

  /**
   * Called when all compiles finished
   */
  allDone?(context: WebpackBar): void;

  /**
   * Called before all compiles finished
   */
  beforeAllDone?(context: WebpackBar): void;

  /**
   * Called after all compiles finished
   */
  afterAllDone?(context: WebpackBar): void;
}

Built-in Reporters

WebpackBar includes several built-in reporters for different use cases.

Basic Reporter

Simple log-based reporter for minimal environments and CI systems.

class SimpleReporter implements Reporter {
  start(context: WebpackBar): void;
  change(context: WebpackBar, payload: { path: string; shortPath: string; time: number }): void;
  done(context: WebpackBar): void;
}

Features:

Logs compilation start with build name
Logs file changes in watch mode
Logs final status (success/error) with completion message
Ideal for CI/CD environments and minimal terminal displays

Usage:

new WebpackBar({
  reporters: ['basic']
});

Fancy Reporter

Advanced progress bar reporter with real-time visual updates.

class FancyReporter implements Reporter {
  progress(context: WebpackBar): void;
  done(context: WebpackBar): void;
  allDone(): void;
}

Features:

Real-time progress bars with percentage indicators
Color-coded status indicators (running, completed, error)
Module-level progress details
File processing information
Throttled updates (50ms intervals) for performance

Usage:

new WebpackBar({
  reporters: ['fancy']
});

Profile Reporter

Performance profiling reporter for build analysis and optimization.

class ProfileReporter implements Reporter {
  progress(context: WebpackBar): void;
  done(context: WebpackBar): void;
  allDone(context: WebpackBar): void;
}

Features:

Tracks request timing and performance metrics
Generates detailed profiling statistics
Formats and outputs performance analysis
Identifies build bottlenecks and slow modules

Usage:

new WebpackBar({
  profile: true  // Automatically adds profile reporter
});

// Or explicitly
new WebpackBar({
  reporters: ['profile']
});

Stats Reporter

Statistical analysis reporter for detailed build metrics.

class StatsReporter implements Reporter {
  // Implementation details in src/reporters/stats.ts
}

Usage:

new WebpackBar({
  reporters: ['stats']
});

Custom Reporters

Create custom reporters by implementing the Reporter interface.

Simple Custom Reporter:

class CustomReporter {
  start(context) {
    console.log(`🚀 Starting ${context.state.name} build...`);
  }

  progress(context) {
    const { progress, message } = context.state;
    if (progress % 10 === 0) {  // Log every 10%
      console.log(`⚡ ${context.state.name}: ${progress}% - ${message}`);
    }
  }

  done(context) {
    const { hasErrors, message, name } = context.state;
    const emoji = hasErrors ? '❌' : '✅';
    console.log(`${emoji} ${name}: ${message}`);
  }
}

// Usage
new WebpackBar({
  reporter: CustomReporter
});

Advanced Custom Reporter with Options:

class AdvancedReporter {
  constructor(options = {}) {
    this.options = {
      logLevel: 'info',
      showTimestamps: false,
      ...options
    };
  }

  start(context) {
    if (this.options.logLevel === 'verbose') {
      const timestamp = this.options.showTimestamps ? new Date().toISOString() : '';
      console.log(`${timestamp} Build started: ${context.state.name}`);
    }
  }

  done(context) {
    const { stats } = context.state;
    if (this.options.logLevel === 'verbose' && stats) {
      console.log(`Build time: ${stats.compilation.endTime - stats.compilation.startTime}ms`);
      console.log(`Modules: ${stats.compilation.modules.size}`);
    }
  }
}

// Usage
new WebpackBar({
  reporter: [AdvancedReporter, {
    logLevel: 'verbose',
    showTimestamps: true
  }]
});

Reporter Configuration Types

type ReporterOpts = { 
  reporter: Reporter | string; 
  options?: any 
};

type ReporterInput = string | [Reporter | string, any?] | ReporterOpts;

Configuration Examples:

// String-based reporter
new WebpackBar({
  reporters: ['basic', 'fancy']
});

// Array format with options
new WebpackBar({
  reporters: [
    'basic',
    ['profile', { detailed: true }]
  ]
});

// Object format
new WebpackBar({
  reporters: [
    { reporter: 'basic' },
    { reporter: CustomReporter, options: { verbose: true } }
  ]
});

// Mixed formats
new WebpackBar({
  reporters: [
    'basic',
    ['fancy', { throttle: 100 }],
    { reporter: CustomReporter, options: { logFile: 'build.log' } }
  ]
});

Reporter Context

All reporter methods receive a WebpackBar context object providing access to build state and utilities.

import type webpack from "webpack";

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;
}

Install with Tessl CLI