Skip to content
Get packs

webpack-dashboard

A terminal dashboard that replaces webpack dev server's scrolling log with a summary view.

GitHub Download v3.3.8
Stars
14k
Forks
373
Licence
MIT
Language
JavaScript
Last update
2.2 years ago
Type
Dev tool

No commits in over a year — check for forks or alternatives before adopting.

What it is

webpack-dashboard is a command-line dashboard for webpack's dev server. It wraps your existing start command and shows build status, progress, and asset information in a organized terminal view instead of the usual stream of log lines. It works through a small plugin added to your webpack config that sends data to the CLI over a local socket.

  • Run your dev script through webpack-dashboard -- and watch build status in one panel
  • Filter the asset list with -a or the includeAssets plugin option
  • Set a custom terminal title with -t or change the color with -c
  • Use minimal mode with -m for a smaller display

Great for

  • Frontend developers who run webpack-dev-server or webpack in watch mode daily
  • Teams that want a cleaner terminal while developing
  • People who want to limit the displayed output to certain asset names using the includeAssets option

Not ideal for

  • Projects that do not use webpack, since the plugin and CLI are built around it
  • Windows users who need mouse support, which the README says is not supported
  • Setups where the chosen port is already used by another process, since the README warns it must be free
Step-by-step guide: how to use webpack-dashboardInstall, first run, examples, tips and FAQs
Webpack Bundle Analyzer vs webpack-dashboard

How to get it

  1. 1

    Install with a package manager

    You'll need: Node.js 8 or above (per README for webpack-dashboard 3.x) · npm or yarn

    Install as a dev dependency with npm

    npm install --save-dev webpack-dashboard

    Install as a dev dependency with yarn

    yarn add --dev webpack-dashboard
  2. 2

    Run it

    • Install webpack-dashboard with npm or yarn
    • Add new DashboardPlugin() to the plugins array in your webpack config
    • Change your dev script to start with webpack-dashboard -- followed by your original command
    • Run your dev script as usual and view the dashboard in the terminal
  3. 3

    Get the most out of it

    • Pass a custom port to both new DashboardPlugin({ port }) and the --port CLI flag to avoid conflicts
    • Use includeAssets in the plugin options, which accepts strings or regular expressions, to focus on certain bundles
    • Use the handler option to send data to a custom function instead of the default dashboard

Downloads

Source code (.zip)master branch · straight from GitHubRelease v3.3.8Release notes and source

Strengths

  • Replaces noisy webpack output with a structured terminal view, according to the README
  • Works with npm, yarn, or a global install, and needs only a plugin line and a script change
  • Active maintenance status stated in the README and a long track record with over 13,000 GitHub stars

Trade-offs

  • Mouse events and scrolling are limited on Windows, and the README says mouse support is not available there
  • Requires a free local port that you must configure consistently in the plugin and CLI
  • The README states version 3.x requires Node 8 or above, so older Node setups need older versions

How it compares

ProjectStarsTypeLevelUpdatedBest for
webpack-dashboard (this)14kDev toolbeginner2.2 years agoFrontend developers who run webpack-dev-server or webpack in watch mode daily
webpack-bundle-analyzer12.7kDev toolbeginner10 days agoFrontend developers trying to shrink a slow-loading webpack bundle
ngx-admin25.7kFrameworkintermediate2.1 years agoDevelopers starting a new Angular admin or back-office dashboard
storybook91.4kDev toolintermediate4 days agoFrontend teams building a shared component library or design system
webpack66kDev toolintermediate4 days agoFrontend developers building single-page or multi-page web apps
redux-devtools-extension13.4kDev toolbeginner3.0 years agoJavaScript developers debugging Redux state in a web app

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.