Skip to content
Get packs

Guide · Open source

How to use webpack-dashboard: install, configure and run it

Updated · written with AI from the project's own documentation and checked against our catalogue data

webpack-dashboard is a command-line dashboard for webpack's dev server. It wraps your existing start command and replaces the usual stream of log lines with an organized terminal view showing build status, progress and asset information. This guide shows you how to install it, add its plugin to your webpack config, run your dev script through it and tune a few options.

webpack-dashboardFormidableLabs/webpack-dashboard · ★ 14k · MIT

Quick start

  1. 1Install the package. Run npm install --save-dev webpack-dashboard or yarn add --dev webpack-dashboard in your project. Node.js 8 or above is required for version 3.x.
  2. 2Add the plugin. Require webpack-dashboard/plugin in your webpack config and add new DashboardPlugin() to the plugins array.
  3. 3Update the dev script. Prefix your start command with webpack-dashboard -- so that, for example, webpack-dashboard -- webpack-dev-server runs your server through the dashboard.
  4. 4Match the port if needed. If you set a custom port in the plugin, pass the same value to the CLI with the --port flag, using a port that no other process uses.
  5. 5Run your script. Start your server with your usual command, such as npm run dev or npm start, and watch the dashboard view.

What does webpack-dashboard do?

When you run webpack or its dev server, the terminal usually fills with scrolling log output. webpack-dashboard replaces that noise with a structured view of build status, progress and asset information.

It works through a small plugin added to your webpack config, which sends data to the CLI over a local socket.

Install webpack-dashboard

Install it as a dev dependency in your project. The package requires Node.js 8 or above for version 3.x, and you can use either npm or yarn.

  • Install with npm as a dev dependency.
  • Install with yarn as a dev dependency.
  • You can also install it globally, for example with npm, to use it with any project. The README says everything should work the same.
$ npm install --save-dev webpack-dashboard # ... or ... $ yarn add --dev webpack-dashboard

Add the plugin to your webpack config

Import the plugin from webpack-dashboard and add it to the plugins array in your webpack configuration.

// Import the plugin: const DashboardPlugin = require("webpack-dashboard/plugin"); // Add it to your webpack configuration plugins. module.exports = { // ... plugins: [new DashboardPlugin()]; // ... };

Wrap your start script with the CLI

Change your dev script so that the command you already use is passed after webpack-dashboard and a double dash. The README gives examples for a plain Node entry file, webpack-dev-server and webpack itself.

Then run your start script as you normally would, for example npm run dev or npm start.

  • Plain Node entry file: webpack-dashboard -- node index.js
  • Dev server: webpack-dashboard -- webpack-dev-server
  • webpack directly: webpack-dashboard -- webpack
"scripts": { "dev": "webpack-dashboard -- node index.js", # OR "dev": "webpack-dashboard -- webpack-dev-server", # OR "dev": "webpack-dashboard -- webpack", }

Customise the port and the output

To use a custom port for communication between the plugin and the CLI, set the port in the plugin options and pass the same port to the CLI. The README warns that the port must not already be in use by webpack-dev-server, devServer or any other process, so pick one reserved for webpack-dashboard.

The includeAssets option limits the display to asset names matching a string prefix or regex. The CLI also has flags for colour, minimal mode and window title.

  • -c, --color [color]: custom ANSI color for the dashboard
  • -m, --minimal: run the dashboard in minimal mode
  • -t, --title [title]: set the title of the terminal window
  • -p, --port [port]: custom port for socket communication
  • -a, --include-assets [string prefix]: limit display to matching asset names
plugins: [new DashboardPlugin({ port: 3001 })]; $ webpack-dashboard --port 3001 -- webpack

Terminal and operating system support

On macOS the README lists Terminal, iTerm 2 and Hyper. On Windows 10 it lists Command Prompt, PowerShell and Linux Subsystem for Windows, but says mouse events are not supported. On Debian-based Linux such as Ubuntu or Mint, the README says it has been verified in the built-in terminal app, with mouse events and scrolling supported automatically.

  • macOS: Terminal, iTerm 2 and Hyper are listed.
  • Windows 10: Command Prompt, PowerShell and Linux Subsystem for Windows; mouse events are not supported.
  • Linux: verified in the built-in terminal app on Debian-based distributions.

What people use it for

  • Watching build status and progress while running webpack-dev-server during daily frontend work.
  • Running webpack in watch mode and keeping the terminal readable.
  • Limiting the displayed output to certain asset names with the includeAssets option or the -a flag.
  • Using a minimal layout with the -m flag or a custom colour with the -c flag.

Frequently asked questions

Is webpack-dashboard free to use?

webpack-dashboard is open source under the MIT licence, as listed on its repository. The licence text itself is not included in the source excerpt used for this guide, so check the repository for full terms.

What do I need to install webpack-dashboard?

The README says webpack-dashboard 3.x requires Node.js 8 or above, and previous versions support down to Node 6. You install it with npm or yarn as a dev dependency.

Does webpack-dashboard work on Windows?

It works in Command Prompt, PowerShell and Linux Subsystem for Windows according to the README. However, mouse events are not supported on Windows, so you scroll with the arrow and Page keys instead.

Why does webpack-dashboard fail to start or show no data?

The README warns that the chosen port must be free and must not be used by webpack-dev-server, devServer or another process. If you set a custom port, make sure the plugin option and the CLI --port flag match.

Can I use webpack-dashboard with projects that do not use webpack?

No. The README says the plugin and CLI are built around webpack, so projects that do not use webpack are not a good fit.

What are alternatives to webpack-dashboard?

The source lists webpack-dev-server overlay, webpack-bundle-analyzer and webpack-bundle-size-analyzer as comparable projects. These are related tools, but the source does not compare them feature by feature, so check each one's documentation.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

webpack-dashboard suits frontend developers who run webpack-dev-server or webpack in watch mode every day and want a cleaner terminal. Skip it if your project does not use webpack, if you need mouse support on Windows, or if you cannot keep the chosen port free.

Install options & downloads