A CLI dashboard for webpack dev server

License: MIT

Language: JavaScript

Keywords: cli, cli-dashboard, dashboard, devtools, dx, socket-communication, webpack, webpack-dashboard


npm version Travis Status AppVeyor Status Maintenance Status

A CLI dashboard for your webpack dev server

What's this all about?

When using webpack, especially for a dev server, you are probably used to seeing something like this:

That's cool, but it's mostly noise and scrolly and not super helpful. This plugin changes that. Now when you run your dev server, you basically work at NASA:


npm install webpack-dashboard --save-dev


webpack-dashboard@^3.0.0 requires Node 8 or above. Previous versions support down to Node 6.

First, import the plugin and add it to your webpack config, or apply it to your compiler:

// Import the plugin:
var DashboardPlugin = require("webpack-dashboard/plugin");

// If you aren't using express, add it to your webpack configs plugins section:
plugins: [new DashboardPlugin()];

// If you are using an express based dev server, add it with compiler.apply
compiler.apply(new DashboardPlugin());

If using a custom port, the port number must be included in the options object here, as well as passed using the -p flag in the call to webpack-dashboard. See how below:

plugins: [new DashboardPlugin({ port: 3001 })];

In the latest version, you can either run your app, and run webpack-dashboard independently (by installing with npm install webpack-dashboard -g) or run webpack-dashboard from your package.json. So if your dev server start script previously looked like:

"scripts": {
    "dev": "node index.js"

You would change that to:

"scripts": {
    "dev": "webpack-dashboard -- node index.js"

Now you can just run your start script like normal, except now, you are awesome. Not that you weren't before. I'm just saying. More so.

Run it

Finally, start your server using whatever command you have set up. Either you have npm run dev or npm start pointed at node devServer.js or something along those lines.

Then, sit back and pretend you're an astronaut.

Supported Operating Systems and Terminals

macOS → Webpack Dashboard works in Terminal, iTerm 2, and Hyper. For mouse events, like scrolling, in Terminal you will need to ensure View → Enable Mouse Reporting is enabled. This is supported in macOS El Capitan, Sierra, and High Sierra. In iTerm 2, to select full rows of text hold the ⌥ Opt key. To select a block of text hold the ⌥ Opt + ⌘ Cmd key combination.

Windows 10 → Webpack Dashboard works in Command Prompt, PowerShell, and Linux Subsystem for Windows. Mouse events are not supported at this time, as discussed further in the documentation of the underlying terminal library we use Blessed. The main log can be scrolled using the , , Page Up, and Page Down keys.

Linux → Webpack Dashboard has been verified in the built-in terminal app for Debian-based Linux distributions such as Ubuntu or Mint. Mouse events and scrolling are supported automatically. To highlight or select lines hold the ⇧ Shift key.


webpack-dashboard (CLI)

  • -c, --color [color] - Custom ANSI color for your dashboard
  • -m, --minimal - Runs the dashboard in minimal mode
  • -t, --title [title] - Set title of terminal window
  • -p, --port [port] - Custom port for socket communication server
  • -a, --include-assets [string prefix] - Limit display to asset names matching string prefix (option can be repeated and is concatenated to new DashboardPlugin({ includeAssets }) options array)

[command] - The command you want to run, i.e. webpack-dashboard -- node index.js

Webpack plugin


  • host - Custom host for connection the socket client
  • port - Custom port for connecting the socket client
  • includeAssets - Limit display to asset names matching string prefix or regex (Array<String | RegExp>)
  • handler - Plugin handler method, i.e. dashboard.setData

Note: you can also just pass a function in as an argument, which then becomes the handler, i.e. new DashboardPlugin(dashboard.setData)

Local Development

We've standardized our local development process for webpack-dashboard on using yarn. We recommend using yarn 1.10.x+, as these versions include the integrity checksum. The checksum helps to verify the integrity of an installed package before its code is executed. 🚀

To run this repo locally against our provided examples, take the usual steps.

yarn dev

We re-use a small handful of the fixtures from inspectpack so that you can work locally on the dashboard while simulating common node_modules dependency issues you might face in the wild. These live in /examples.

To change the example you're working against, simply alter the EXAMPLE env variable in the dev script in package.json to match the scenario you want to run in /examples. For example, if you want to run the tree-shaking example, change the dev script from this:

cross-env EXAMPLE=duplicates-esm node bin/webpack-dashboard.js -- webpack-cli --config examples/config/webpack.config.js --watch

to this:

cross-env EXAMPLE=tree-shaking node bin/webpack-dashboard.js -- webpack-cli --config examples/config/webpack.config.js --watch

Then just run yarn dev to get up and running. PRs are very much appreciated!


When it comes time to publish a new version of webpack-dashboard to npm, authorized users can take the following steps:

# Ensure build passes all CI checks.
git pull origin master
yarn check-ci

# Version the change. We use semantic versioning.
yarn version --<major | minor | patch>

# Publish to npm.
yarn publish

# Commit the release tag to source.
git push && git push --tags

Please also be sure to update with release notes and draft the release on GitHub. We loosely follow the Keep a Changelog spec with categories for Features, Bugs, Tests, Docs, and Security. All releases should also include Migration Instructions for adopting the new release.


Module output deeply inspired by:

Error output deeply inspired by:

Maintenance Status

Active: Formidable is actively working on this project, and we expect to continue for work for the foreseeable future. Bug reports, feature requests and pull requests are welcome.

Project Statistics

Sourcerank 17
Repository Size 1.02 MB
Stars 13,382
Forks 406
Watchers 195
Open issues 33
Dependencies 701
Contributors 45
Tags 46
Last updated
Last pushed

Top Contributors See all

Ken Wheeler Parker Ziegler Tyler Paul Thompson Ryan Roemer Carlos Paelinck ElreyB Brian Beck dependabot[bot] Clark Tomlinson Cale Newman Emma Brillhart Brenton Simpson boygirl Josh Addington Matthew Pietz Björn Rixman Dylan Markow James Mosier Tim Schaub Michael Pratt

Packages Referencing this Repo

a CLI dashboard for webpack dev server
Latest release 3.2.0 - Updated - 13.4K stars

Recent Tags See all

v3.1.0 August 27, 2019
v3.0.7 May 15, 2019
3.0.6 May 15, 2019
v3.0.6 May 09, 2019
v3.0.5 April 24, 2019
v3.0.4 April 24, 2019
v3.0.3 April 18, 2019
v3.0.2 March 28, 2019
3.0.2 March 28, 2019
3.0.1 March 27, 2019
v3.0.1 March 27, 2019
3.0.0 February 15, 2019
v3.0.0 February 15, 2019
v2.1.0 January 29, 2019
v2.0.0 May 24, 2018

Interesting Forks See all

A CLI dashboard for webpack dev server
JavaScript - Last pushed - 1 stars
A CLI dashboard for webpack dev server
JavaScript - Published - 1 stars

Something wrong with this page? Make a suggestion

Last synced: 2019-09-08 22:16:45 UTC

Login to resync this repository