{"id":15109643,"url":"https://github.com/formidablelabs/webpack-dashboard","last_synced_at":"2025-05-14T11:08:18.517Z","repository":{"id":37677374,"uuid":"65678789","full_name":"FormidableLabs/webpack-dashboard","owner":"FormidableLabs","description":"A CLI dashboard for webpack dev server","archived":false,"fork":false,"pushed_at":"2024-08-12T16:19:21.000Z","size":2109,"stargazers_count":13874,"open_issues_count":39,"forks_count":364,"subscribers_count":196,"default_branch":"master","last_synced_at":"2025-05-01T03:37:04.908Z","etag":null,"topics":["cli","cli-dashboard","dashboard","devtools","dx","socket-communication","webpack","webpack-dashboard"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/FormidableLabs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-08-14T17:44:33.000Z","updated_at":"2025-04-30T20:26:15.000Z","dependencies_parsed_at":"2024-02-04T16:20:52.571Z","dependency_job_id":"7048db6f-c457-452b-a261-01f458dd978f","html_url":"https://github.com/FormidableLabs/webpack-dashboard","commit_stats":null,"previous_names":[],"tags_count":52,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FormidableLabs%2Fwebpack-dashboard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FormidableLabs%2Fwebpack-dashboard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FormidableLabs%2Fwebpack-dashboard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FormidableLabs%2Fwebpack-dashboard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FormidableLabs","download_url":"https://codeload.github.com/FormidableLabs/webpack-dashboard/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252765641,"owners_count":21800884,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cli","cli-dashboard","dashboard","devtools","dx","socket-communication","webpack","webpack-dashboard"],"created_at":"2024-09-25T23:06:26.050Z","updated_at":"2025-05-06T20:35:47.584Z","avatar_url":"https://github.com/FormidableLabs.png","language":"JavaScript","readme":"[![Webpack Dashboard — Formidable, We build the modern web](https://raw.githubusercontent.com/FormidableLabs/webpack-dashboard/master/webpack-dashboard-Hero.png)](https://formidable.com/open-source/)\n\n[![npm version][npm_img]][npm_site]\n[![Actions Status][actions_img]][actions_site]\n[![Coverage Status][cov_img]][cov_site]\n[![Maintenance Status][maintenance-image]](#maintenance-status)\n\nA CLI dashboard for your webpack dev server\n\n### What's this all about?\n\nWhen using webpack, especially for a dev server, you are probably used to seeing something like this:\n\n![https://i.imgur.com/p1uAqkD.png](https://i.imgur.com/p1uAqkD.png)\n\nThat'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:\n\n![https://i.imgur.com/qL6dXJd.png](https://i.imgur.com/qL6dXJd.png)\n\n### Install\n\n```sh\n$ npm install --save-dev webpack-dashboard\n# ... or ...\n$ yarn add --dev webpack-dashboard\n```\n\n\u003e ℹ️ **Note**: You can alternatively globally install the dashboard (e.g. `npm install -g webpack-dashboard`) for use with any project and everything should work the same.\n\n### Use\n\n**`webpack-dashboard@^3.0.0` requires Node 8 or above.** Previous versions support down to Node 6.\n\nFirst, import the plugin and add it to your webpack config:\n\n```js\n// Import the plugin:\nconst DashboardPlugin = require(\"webpack-dashboard/plugin\");\n\n// Add it to your webpack configuration plugins.\nmodule.exports = {\n  // ...\n  plugins: [new DashboardPlugin()];\n  // ...\n};\n```\n\nThen, modify your dev server start script previously looked like:\n\n```js\n\"scripts\": {\n    \"dev\": \"node index.js\", # OR\n    \"dev\": \"webpack-dev-server\", # OR\n    \"dev\": \"webpack\",\n}\n```\n\nYou would change that to:\n\n```js\n\"scripts\": {\n    \"dev\": \"webpack-dashboard -- node index.js\", # OR\n    \"dev\": \"webpack-dashboard -- webpack-dev-server\", # OR\n    \"dev\": \"webpack-dashboard -- webpack\",\n}\n```\n\nNow 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.\n\n#### Customizations\n\nMore configuration customization examples can be found in our [getting started](./docs/getting-started.md) guide.\n\nFor example, if you want to use a custom port of `webpack-dashboard` to communicate between its plugin and CLI tool, you would first set the number in the options object in webpack configuration:\n\n```js\nplugins: [new DashboardPlugin({ port: 3001 })];\n```\n\nThen, you would pass it along to the CLI to match:\n\n```sh\n$ webpack-dashboard --port 3001 -- webpack\n```\n\n\u003e ⚠️ **Warning**: When choosing a custom port, you need to find one that is **not** already in use. You should not choose one that is being used by `webpack-dev-server` / `devServer` or any other process. Instead, pick one that is **only** for `webpack-dashboard` and pair that up in the plugin configuration and CLI port flag.\n\n### Run it\n\nFinally, 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.\n\nThen, sit back and pretend you're an astronaut.\n\n### Supported Operating Systems and Terminals\n\n**macOS →**\nWebpack 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 \u003ckbd\u003e⌥ Opt\u003c/kbd\u003e key. To select a block of text hold the \u003ckbd\u003e⌥ Opt\u003c/kbd\u003e + \u003ckbd\u003e⌘ Cmd\u003c/kbd\u003e key combination.\n\n**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](https://github.com/chjj/blessed#windows-compatibility). The main log can be scrolled using the \u003ckbd\u003e↑\u003c/kbd\u003e, \u003ckbd\u003e↓\u003c/kbd\u003e, \u003ckbd\u003ePage Up\u003c/kbd\u003e, and \u003ckbd\u003ePage Down\u003c/kbd\u003e keys.\n\n**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 \u003ckbd\u003e⇧ Shift\u003c/kbd\u003e key.\n\n### API\n\n#### webpack-dashboard (CLI)\n\n##### Options\n\n- `-c, --color [color]` - Custom ANSI color for your dashboard\n- `-m, --minimal` - Runs the dashboard in minimal mode\n- `-t, --title [title]` - Set title of terminal window\n- `-p, --port [port]` - Custom port for socket communication server\n- `-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)\n\n##### Arguments\n\n`[command]` - The command you want to run, i.e. `webpack-dashboard -- node index.js`\n\n#### Webpack plugin\n\n#### Options\n\n- `host` - Custom host for connection the socket client\n- `port` - Custom port for connecting the socket client\n- `includeAssets` - Limit display to asset names matching string prefix or regex (`Array\u003cString | RegExp\u003e`)\n- `handler` - Plugin handler method, i.e. `dashboard.setData`\n\n_Note: you can also just pass a function in as an argument, which then becomes the handler, i.e. `new DashboardPlugin(dashboard.setData)`_\n\n### Local Development\n\nWe'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. 🚀\n\nTo run this repo locally against our provided examples, take the usual steps.\n\n```sh\nyarn\nyarn dev\n```\n\nWe re-use a small handful of the fixtures from [`inspectpack`](https://github.com/FormidableLabs/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`.\n\nTo 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:\n\n```sh\n$ cross-env EXAMPLE=duplicates-esm \\\n  node bin/webpack-dashboard.js -- \\\n  webpack-cli --config examples/config/webpack.config.js --watch\n```\n\nto this:\n\n```sh\n$ cross-env EXAMPLE=tree-shaking WEBPACK_MODE=production \\\n  node bin/webpack-dashboard.js -- \\\n  webpack-cli --config examples/config/webpack.config.js --watch\n```\n\nThen just run `yarn dev` to get up and running. PRs are very much appreciated!\n\n## Contributing\n\nPlease see our [contributing guide](CONTRIBUTING.MD).\n\n#### Credits\n\nModule output deeply inspired by: [https://github.com/robertknight/webpack-bundle-size-analyzer](https://github.com/robertknight/webpack-bundle-size-analyzer)\n\nError output deeply inspired by: [https://github.com/facebookincubator/create-react-app](https://github.com/facebookincubator/create-react-app)\n\n#### Maintenance Status\n\n**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.\n\n[maintenance-image]: https://img.shields.io/badge/maintenance-active-green.svg?color=brightgreen\u0026style=flat\n[npm_img]: https://img.shields.io/npm/v/webpack-dashboard.svg?style=flat\n[npm_site]: https://www.npmjs.com/package/webpack-dashboard\n[actions_img]: https://github.com/FormidableLabs/webpack-dashboard/workflows/CI/badge.svg\n[actions_site]: https://github.com/FormidableLabs/webpack-dashboard/actions\n[cov_img]: https://codecov.io/gh/FormidableLabs/webpack-dashboard/branch/master/graph/badge.svg\n[cov_site]: https://codecov.io/gh/FormidableLabs/webpack-dashboard\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fformidablelabs%2Fwebpack-dashboard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fformidablelabs%2Fwebpack-dashboard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fformidablelabs%2Fwebpack-dashboard/lists"}