{"id":14340,"library":"webpack-dashboard","title":"webpack-dashboard","description":"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.","status":"active","version":"3.3.8","language":"javascript","source_language":"en","source_url":"https://github.com/FormidableLabs/webpack-dashboard","tags":["javascript","webpack","cli","plugin","dashboard","typescript"],"install":[{"cmd":"npm install webpack-dashboard","lang":"bash","label":"npm"},{"cmd":"yarn add webpack-dashboard","lang":"bash","label":"yarn"},{"cmd":"pnpm add webpack-dashboard","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency as it's a webpack plugin and CLI tool that interacts with webpack's build output.","package":"webpack","optional":false}],"imports":[{"note":"Primarily consumed via CommonJS `require` in webpack configuration files. While TypeScript types are shipped, typical usage for the plugin is with `require`.","wrong":"import { DashboardPlugin } from 'webpack-dashboard/plugin';","symbol":"DashboardPlugin","correct":"const DashboardPlugin = require('webpack-dashboard/plugin');"},{"note":"Invoked as a command-line tool, not imported. The `--` argument separates `webpack-dashboard` flags from the command it wraps.","symbol":"webpack-dashboard CLI","correct":"webpack-dashboard -- webpack-dev-server"},{"note":"Configuration options for the plugin are passed as an object to its constructor, not as a direct argument.","wrong":"new DashboardPlugin('3001')","symbol":"DashboardPlugin","correct":"new DashboardPlugin({ port: 3001 })"}],"quickstart":{"code":"const DashboardPlugin = require('webpack-dashboard/plugin');\nconst webpack = require('webpack');\nconst path = require('path');\n\nmodule.exports = {\n  mode: 'development',\n  entry: './src/index.js',\n  output: {\n    path: path.resolve(__dirname, 'dist'),\n    filename: 'bundle.js',\n  },\n  plugins: [\n    new DashboardPlugin({\n      port: 9876, // Example custom port for the dashboard\n      // Other options can be passed here, e.g., 'minimal', 'color',\n      // 'handler' for custom error handling.\n    }),\n    new webpack.HotModuleReplacementPlugin(), // Often used with webpack-dev-server\n  ],\n  devServer: {\n    static: './dist',\n    hot: true,\n    port: 8080 // Webpack Dev Server port\n  },\n};\n\n// To run this setup, in package.json scripts:\n// \"dev\": \"webpack-dashboard --port 9876 -- webpack serve\"\n","lang":"javascript","description":"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."},"warnings":[{"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.","message":"webpack-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.","severity":"breaking","affected_versions":">=3.0.0"},{"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`).","message":"When 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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"Version 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.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Always include `--` between `webpack-dashboard` and the webpack command, e.g., `webpack-dashboard -- webpack` or `webpack-dashboard -- webpack-dev-server`.","message":"The `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.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Utilize keyboard shortcuts (`Page Up`, `Page Down`, `↑`, `↓`) for navigating content within the dashboard on Windows terminals.","message":"Mouse 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.","severity":"gotcha","affected_versions":">=3.0.0"}],"env_vars":null,"search_vec":"'3.3.8':62 'address':80 'bottleneck':117 'break':81 'bug':69 'build':23,38,104,119 'bundl':36 'chang':82 'clariti':97 'cli':17,123 'command':14 'command-lin':13 'consol':55 'consolid':101 'current':58 'dashboard':3,6,18,125 'depend':72 'dev':32 'develop':28 'differenti':93 'dispar':103 'e.g':83 'easier':113 'element':99 'error':43 'especi':25 'failur':120 'featur':78 'fix':70 'identifi':115 'includ':94 'inform':105 'interact':46,98 'interfac':16 'introduc':77 'javascript':121 'key':92 'line':15 'make':111 'migrat':85 'minor/major':75 'modul':40 'monitor':20 'node.js':90 'occur':66 'offer':49 'organ':109 'output':56 'patch':64 'perform':116 'period':67 'plugin':124 'process':24 'progress':39 'provid':7 'real':10 'real-tim':9 'releas':65 'render':87 'requir':91 'rich':12 'server':33 'signific':51 'singl':108 'stabl':59 'standard':54 'stat':37 'termin':47,86 'time':11 'tree':41 'typescript':126 'ui':48 'updat':73,89 'upgrad':52 'use':26 'v3.0.0':84 'version':60,76 'view':110 'visual':35,96 'webpack':2,5,21,31,122 'webpack-dashboard':1,4 'webpack-dev-serv':30","created_at":"2026-04-20T01:59:12.003868+00:00","updated_at":"2026-04-20T01:59:12.003868+00:00","problems":[{"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`).","cause":"The default port (or a custom configured port) for `webpack-dashboard` is already occupied by another process, potentially webpack-dev-server itself if misconfigured.","error":"Error: listen EADDRINUSE: address already in use :::3000"},{"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`.","cause":"`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.","error":"webpack-dashboard: command not found"},{"fix":"Use `const DashboardPlugin = require('webpack-dashboard/plugin');` instead of `import { DashboardPlugin } from 'webpack-dashboard/plugin';` or similar ES module syntax.","cause":"Incorrect import statement. `webpack-dashboard/plugin` exports a default class, typically consumed via CommonJS `require` in webpack configs.","error":"TypeError: DashboardPlugin is not a constructor"},{"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\"`).","cause":"The `DashboardPlugin` might not be added to your webpack configuration's `plugins` array, or the webpack command is not prefixed with `webpack-dashboard --`.","error":"Dashboard does not appear, or only shows basic webpack output in the terminal."}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"webpack-dashboard","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/FormidableLabs/webpack-dashboard","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/webpack-dashboard","openapi_spec":null,"status_page":null,"smithery":null,"categories":["devops"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-18","install_tag":null}}