webpack-dashboard

webpack-dashboard is a CLI dashboard plugin for webpack, designed to make webpack dev server output more readable and useful. Instead of scrolling through noisy build logs, it presents build information in a terminal UI, similar to a dashboard. Installation: You can install it locally as a dev dependency with npm or yarn: npm install --save-dev webpack-dashboard yarn add --dev webpack-dashboard It can also be installed globally for use with any project. Usage: First, import the plugin and add it to your webpack configuration: const DashboardPlugin = require("webpack-dashboard/plugin"); module.exports = { plugins: [new DashboardPlugin()] }; Then wrap your dev server start command with the CLI tool. For example, change: "dev": "webpack-dev-server" to: "dev": "webpack-dashboard -- webpack-dev-server" The same pattern works for node scripts or webpack directly. Customization: The plugin accepts options such as a custom port for communication between the plugin and CLI tool. For a custom port, set it in the webpack config: new DashboardPlugin({ port: 3001 }) Then pass the matching port to the CLI: webpack-dashboard --port 3001 -- webpack Other CLI options include --color for ANSI color, --minimal for minimal mode, --title to set the terminal window title, and --include-assets to limit displayed assets by string prefix. The plugin also supports host, port, includeAssets, and handler options. Supported platforms: macOS is supported in Terminal, iTerm 2, and Hyper, with mouse events available depending on terminal settings. Windows 10 works in Command Prompt, PowerShell, and Linux Subsystem for Windows, though mouse events are not supported; scrolling uses arrow and page keys. Linux is verified in the built-in terminal for Debian-based distributions such as Ubuntu and Mint, with mouse events and scrolling supported automatically. Maintenance: The project is actively maintained by Formidable, and bug reports, feature requests, and pull requests are welcome.