Feature Proposal

Problem Statement

When building large projects with Webpack, developers often face long build times (5-30+ minutes) with minimal feedback about progress. The current output shows:

• Module count updates
• Percentage completion (sometimes)
• But no indication of:
  • Estimated time remaining
  • Which phase is taking the longest
  • Visual progress indication
  • Historical build time comparison

This leads to:

• Developers context-switching during builds
• Inability to identify performance regressions
• Unclear whether a build is stuck or just slow
• Difficulty optimizing build configuration

Proposed Solution

Add an enhanced progress plugin that provides:

1. Visual Progress Bar

Building [████████████░░░░░░░░] 65% | ETA: 2m 15s
┌─ Modules: 3,247/5,012 (65%)
├─ Current: optimizing chunk assets
├─ Duration: 8m 42s
└─ Average build: 13m 20s (baseline)

2. Phase Breakdown

Show time spent in each phase:

• Module resolution: 2m 15s
• Module building: 4m 30s
• Chunk optimization: 1m 57s
• Asset optimization: Currently running...

3. Historical Context

• Compare current build against last N builds
• Highlight phases that are significantly slower
• Show trend over time

4. Configuration Options

module.exports = {
  plugins: [
    new webpack.ProgressPlugin({
      visualProgress: true,
      estimateTime: true,
      showPhases: true,
      compareBaseline: true,
      baselineBuilds: 10,
      profile: process.env.NODE_ENV === 'development'
    })
  ]
};

Benefits

1. Better Developer Experience

   • Know when to take a coffee break vs stay focused
   • Understand if changes impacted build performance
   • Identify optimization opportunities

2. CI/CD Insights

   • Track build time regressions in pipelines
   • Identify slow phases for optimization
   • Historical data for capacity planning

3. Debugging Aid

   • Quickly identify if build is stuck vs slow
   • See which loaders/plugins are bottlenecks
   • Compare development vs production builds

Implementation Considerations

• Should work with existing ProgressPlugin
• Minimal performance overhead (< 1%)
• Optional features (can be disabled)
• Works in both terminal and CI environments
• Compatible with webpack 5.x

Related Work

• Vite shows build progress with ETA
• Next.js has visual progress indicators
• Turbopack provides detailed timing information

This would bring Webpack's developer experience closer to modern build tools while maintaining its flexibility and power.

Willing to Contribute

I'd be happy to work on a PR for this if the maintainers are interested. This could potentially be implemented as an enhanced version of the existing ProgressPlugin or as a separate community plugin.

Feature Use Case

As a developer working on a large enterprise application:

I want to see detailed build progress with time estimates so that I can:

• Better manage my time during long builds (know if I have time for coffee or need to stay focused)
• Identify when builds are slower than usual and investigate why
• Track performance impact of configuration changes
• Report accurate build time requirements to my team and management

As a CI/CD engineer:

I want historical build metrics so that I can:

• Set appropriate timeouts for build pipelines
• Identify performance regressions before they impact the team
• Justify infrastructure upgrades with data
• Optimize build configurations based on phase-level metrics

Example Workflow:

$ npm run build

Building [████████████░░░░░░░░] 65% | ETA: 2m 15s
┌─ Phase: Optimizing chunk assets
├─ Modules: 3,247/5,012 processed
├─ Duration: 8m 42s
└─ Baseline: 13m 20s avg (23% faster!) ✨

[Developer sees build is faster than normal, confirming recent optimizations worked]

Additional Context

No response