tessl/npm-webpackbar

Elegant ProgressBar and Profiler for Webpack and Rspack

—

Pending

Overview

Eval results

Files

Configuration Options

Name: tessl/npm-webpackbar
Author: tessl

WebpackBar provides comprehensive configuration options to customize the progress display, enable profiling, and configure custom reporters.

Capabilities

Basic Configuration

Core options for customizing the appearance and behavior of the progress bar.

interface WebpackBarOptions {
  /**
   * Display name for the progress bar
   * @default 'build'
   */
  name?: string;

  /**
   * Color of the progress bar
   * @default 'green'
   */
  color?: string;

  /**
   * Enable profiler for performance analysis
   * @default false
   */
  profile?: boolean;

  /**
   * Enable fancy bars reporter
   * Defaults to true when not in CI or testing mode
   * @default true
   */
  fancy?: boolean;

  /**
   * Enable simple log reporter (only start and end)
   * Defaults to true when running in minimal environments
   * @default true
   */
  basic?: boolean;

  /**
   * Register a single custom reporter
   */
  reporter?: ReporterInput;

  /**
   * Register an array of custom reporters
   * @default ['basic'] | ['fancy']
   */
  reporters?: ReporterInput[];
}

Usage Examples:

// Basic configuration
new WebpackBar({
  name: 'Frontend Build',
  color: 'blue'
});

// Enable profiling
new WebpackBar({
  name: 'Production Build',
  color: 'green',
  profile: true
});

// Minimal configuration for CI environments
new WebpackBar({
  name: 'CI Build',
  fancy: false,
  basic: true
});

Reporter Configuration

Configure built-in and custom reporters for different output formats.

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

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

Usage Examples:

// Using built-in reporters
new WebpackBar({
  reporters: ['basic', 'profile']
});

// Custom reporter with options
new WebpackBar({
  reporter: ['fancy', { logLevel: 'verbose' }]
});

// Multiple reporters with different configurations
new WebpackBar({
  reporters: [
    'basic',
    ['profile', { showModules: true }],
    { reporter: 'stats', options: { detailed: true } }
  ]
});

Color Options

WebpackBar supports various color options for the progress bar display.

Common Colors:

'green' (default)
'blue'
'red'
'yellow'
'magenta'
'cyan'
'white'
'gray'

Usage Examples:

// Different colors for different builds
new WebpackBar({
  name: 'Client',
  color: 'blue'
});

new WebpackBar({
  name: 'Server',
  color: 'green'
});

Environment-Based Configuration

WebpackBar automatically adjusts its behavior based on the environment.

Automatic Behavior:

CI/Testing Environments: Defaults to basic: true, fancy: false
Development Environments: Defaults to basic: false, fancy: true
Minimal Environments: Automatically enables basic reporter

Manual Override:

// Force fancy reporter in CI
new WebpackBar({
  name: 'CI Build',
  fancy: true,
  basic: false
});

// Force basic reporter in development
new WebpackBar({
  name: 'Dev Build',
  fancy: false,
  basic: true
});

Multiple Build Configuration

Configure different progress bars for multiple concurrent builds (useful for SSR scenarios).

// Client build configuration
const clientConfig = {
  name: 'client',
  // ... webpack config
  plugins: [
    new WebpackBar({
      name: 'Client',
      color: 'blue'
    })
  ]
};

// Server build configuration
const serverConfig = {
  name: 'server',
  // ... webpack config
  plugins: [
    new WebpackBar({
      name: 'Server',
      color: 'green'
    })
  ]
};

export default [clientConfig, serverConfig];

Install with Tessl CLI