Registry / devops / webpack-dashboard

webpack-dashboard

JSON →
library3.3.8jsnpmunverified

webpack-dashboard provides a real-time, rich command-line interface (CLI) dashboard for monitoring webpack's build process, especially useful during development with `webpack-dev-server`. It visualizes bundle stats, build progress, module tree, and errors in an interactive terminal UI, offering a significant upgrade from standard console output. The current stable version is 3.3.8, with patch releases occurring periodically for bug fixes and dependency updates, while minor/major versions introduce features or address breaking changes (e.g., v3.0.0 migrated terminal renderers and updated Node.js requirements). Key differentiators include its visual clarity, interactive elements, and consolidation of disparate build information into a single, organized view, making it easier to identify performance bottlenecks or build failures.

devops
npm install webpack-dashboard
github ↗package ↗
INSTALL
IMPORT
SIG · WEBPACK-DASHBOARD
W
webpack-dashboard
devopsjavascriptv3.3.8
Install
—
Import
—
Disk
—
Pass rate
0/ 6
Env Coverage0 / 6
glibc
18–22
musl
18–22
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
musl
node 18–226 runs
build_error
glibc
node 18–226 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

DashboardPlugin
✓ const DashboardPlugin = require('webpack-dashboard/plugin');
✗ import { DashboardPlugin } from 'webpack-dashboard/plugin';
Primarily consumed via CommonJS `require` in webpack configuration files. While TypeScript types are shipped, typical usage for the plugin is with `require`.
webpack-dashboard CLI
✓ webpack-dashboard -- webpack-dev-server
Invoked as a command-line tool, not imported. The `--` argument separates `webpack-dashboard` flags from the command it wraps.
DashboardPlugin
✓ new DashboardPlugin({ port: 3001 })
✗ new DashboardPlugin('3001')
Configuration options for the plugin are passed as an object to its constructor, not as a direct argument.

This quickstart shows how to integrate webpack-dashboard into a webpack configuration and how to execute it via the CLI, including custom port configuration for the dashboard.

const DashboardPlugin = require('webpack-dashboard/plugin'); const webpack = require('webpack'); const path = require('path'); module.exports = { mode: 'development', entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js', }, plugins: [ new DashboardPlugin({ port: 9876, // Example custom port for the dashboard // Other options can be passed here, e.g., 'minimal', 'color', // 'handler' for custom error handling. }), new webpack.HotModuleReplacementPlugin(), // Often used with webpack-dev-server ], devServer: { static: './dist', hot: true, port: 8080 // Webpack Dev Server port }, }; // To run this setup, in package.json scripts: // "dev": "webpack-dashboard --port 9876 -- webpack serve"
webpack-dashboard --version
Debug
Known issues
breakingwebpack-dashboard v3.0.0 and above requires Node.js version 8 or higher. Projects running on older Node.js versions must use webpack-dashboard v2.x.
fix
Upgrade Node.js to version 8 or later, or downgrade `webpack-dashboard` to a 2.x version if Node.js upgrade is not feasible.
affects: >=3.0.0
gotchaWhen configuring a custom port for `webpack-dashboard`, ensure it does not clash with other ports in use, especially the one used by `webpack-dev-server`. The dashboard and dev server must use distinct ports.
fix
Choose a unique, unused port for `webpack-dashboard` (e.g., `new DashboardPlugin({ port: 3001 })`) and pass the matching port to the CLI (`webpack-dashboard --port 3001 -- webpack`).
affects: >=1.0.0
breakingVersion 3.0.0 migrated from `blessed` to `neo-blessed` as the underlying terminal renderer. While largely compatible, subtle differences in rendering or behavior in certain terminal environments might be observed.
fix
No direct fix required, but be aware that minor visual discrepancies in terminal rendering might occur if upgrading from pre-3.0.0 versions.
affects: >=3.0.0
gotchaThe `webpack-dashboard` CLI requires a double-dash (`--`) to separate its own arguments from the command it's wrapping (e.g., `webpack-dashboard -- webpack serve`). Omitting this will cause the subsequent command to be interpreted as an argument for `webpack-dashboard` itself.
fix
Always include `--` between `webpack-dashboard` and the webpack command, e.g., `webpack-dashboard -- webpack` or `webpack-dashboard -- webpack-dev-server`.
affects: >=1.0.0
gotchaMouse events for scrolling are not supported in Command Prompt or PowerShell on Windows 10 due to limitations in the underlying `neo-blessed` library. Keyboard navigation (Page Up/Down, arrow keys) must be used.
fix
Utilize keyboard shortcuts (`Page Up`, `Page Down`, `↑`, `↓`) for navigating content within the dashboard on Windows terminals.
affects: >=3.0.0
Errors
Common errors & fixes
Error: listen EADDRINUSE: address already in use :::3000
The default port (or a custom configured port) for `webpack-dashboard` is already occupied by another process, potentially webpack-dev-server itself if misconfigured.
fix
Configure a custom, unused port for `webpack-dashboard` in your webpack config (e.g., `new DashboardPlugin({ port: 9876 })`) and pass the same port to the CLI (`webpack-dashboard --port 9876 -- webpack-dev-server`).
webpack-dashboard: command not found
`webpack-dashboard` CLI is not found in your system's PATH. This typically happens if it's installed as a local `devDependency` and not run via `npm scripts` or if a global install is missing.
fix
If installed locally, ensure you are running it through `npm run <script-name>` (e.g., `npm run dev` where `"dev": "webpack-dashboard -- webpack serve"`). If you intend a global install, run `npm install -g webpack-dashboard`.
TypeError: DashboardPlugin is not a constructor
Incorrect import statement. `webpack-dashboard/plugin` exports a default class, typically consumed via CommonJS `require` in webpack configs.
fix
Use `const DashboardPlugin = require('webpack-dashboard/plugin');` instead of `import { DashboardPlugin } from 'webpack-dashboard/plugin';` or similar ES module syntax.
Dashboard does not appear, or only shows basic webpack output in the terminal.
The `DashboardPlugin` might not be added to your webpack configuration's `plugins` array, or the webpack command is not prefixed with `webpack-dashboard --`.
fix
Ensure `new DashboardPlugin()` is correctly added to `module.exports.plugins` in your webpack config. Also, verify your `package.json` script prepends `webpack-dashboard --` to your webpack command (e.g., `"dev": "webpack-dashboard -- webpack serve"`).
Upgrade
Version history
3.3.8latest on npm
Audit
Dependencies
webpackrequiredPeer dependency as it's a webpack plugin and CLI tool that interacts with webpack's build output.
Agent activity
6 hits · last 30 days
node
6
Resources
githubhttps://github.com/FormidableLabs/webpack-dashboard ↗
packagehttps://www.npmjs.com/package/webpack-dashboard ↗