webpack-dashboard — Visual CLI Dashboard for Webpack Dev Server

Introduction

webpack-dashboard replaces the default webpack terminal output with a rich, organized dashboard UI. Instead of scrolling through walls of text, developers see build progress, module sizes, asset breakdowns, and errors in a clear visual layout.

What webpack-dashboard Does

• Displays build status, progress bar, and compilation time in a structured TUI
• Shows module sizes sorted by impact to help spot bloat
• Lists output assets with file sizes and chunk information
• Highlights errors and warnings in a dedicated panel
• Works with both webpack-dev-server and webpack-dev-middleware

Architecture Overview

The dashboard consists of a webpack plugin and a companion CLI wrapper. The plugin hooks into webpack's compilation events and streams structured data (modules, assets, errors) over IPC to the CLI process. The CLI renders the data using the blessed terminal UI library, laying out panels in a dashboard grid.

Self-Hosting & Configuration

• Install: npm install --save-dev webpack-dashboard
• Add new DashboardPlugin() to your webpack plugins array
• Run via the CLI wrapper: npx webpack-dashboard -- webpack serve
• For webpack-dev-middleware, pass a custom handler to the plugin constructor
• Integrates with VS Code via the webpack-dashboard extension

Key Features

• Real-time build progress with visual indicators
• Module analyzer showing relative sizes and dependencies
• Asset output panel with gzip-size estimates
• Error and warning panels that surface issues immediately
• Minimal configuration: one plugin and one CLI wrapper

Comparison with Similar Tools

• webpack --progress — basic percentage output; webpack-dashboard provides a full TUI
• webpack-bundle-analyzer — generates an HTML treemap; webpack-dashboard shows real-time CLI output
• speed-measure-plugin — focuses on plugin timing; webpack-dashboard shows overall build status
• Vite — modern bundler with its own clean output; webpack-dashboard targets existing webpack setups
• Rspack — Rust-based webpack-compatible bundler; webpack-dashboard works only with webpack

FAQ

Q: Does webpack-dashboard work with webpack 5? A: Yes. It supports webpack 4 and 5.

Q: Does it slow down my build? A: The overhead is minimal. The plugin only collects metadata from compiler hooks; actual bundling is unaffected.

Q: Can I use it in CI? A: It is designed for interactive terminal use. In CI, standard webpack output or a JSON stats file is more appropriate.

Q: Is it maintained? A: Yes. Formidable Labs actively maintains the project and accepts contributions.

Sources

• https://github.com/FormidableLabs/webpack-dashboard
• https://formidable.com/open-source/webpack-dashboard/