webpack-dashboard 0,8,22,3,9,0,18,5 npm

A CLI dashboard for webpack dev server

webpack-dashboard

A CLI dashboard for your webpack dev server

What's this all about?

When using webpack, especially for a dev server, you are probably used to seeing something like this:

http://i.imgur.com/p1uAqkD.png

That'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:

http://i.imgur.com/5BWa1hB.png

Install

npm install webpack-dashboard --save-dev

Use

OS X Terminal.app users: Make sure that View → Allow Mouse Reporting is enabled, otherwise scrolling through logs and modules won't work. If your version of Terminal.app doesn't have this feature, you may want to check out an alternative such as iTerm2.

First, import the plugin and add it to your webpack config, or apply it to your compiler:

// Import the plugin:
var DashboardPlugin = require('webpack-dashboard/plugin');

// If you aren't using express, add it to your webpack configs plugins section:
plugins: [
    new DashboardPlugin()
]

// If you are using an express based dev server, add it with compiler.apply
compiler.apply(new DashboardPlugin());

If using a custom port, the port number must be included in the options object here, as well as passed using the -p flag in the call to webpack-dashboard. See how below:

plugins: [
    new DashboardPlugin({ port: 3001 })
]

In the latest version, you can either run your app, and run webpack-dashboard independently (by installing with npm install webpack-dashboard -g) or run webpack-dashboard from your package.json. So if your dev server start script previously looked like:

"scripts": {
    "dev": "node index.js"
}

You would change that to:

"scripts": {
    "dev": "webpack-dashboard -- node index.js"
}

Now 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.

Run it

Finally, 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.

Then, sit back and pretend you're an astronaut.

API

webpack-dashboard (CLI)

Options
  • -c, --color [color] - Custom ANSI color for your dashboard
  • -m, --minimal - Runs the dashboard in minimal mode
  • -t, --title [title] - Set title of terminal window
  • -p, --port [port] - Custom port for socket communication
Arguments

[command] - The command you want to run, i.e. webpack-dashboard -- node index.js

Webpack plugin

Options

  • port - Custom port for socket communication
  • handler - Plugin handler method, i.e. dashboard.setData

Note: you can also just pass a function in as an argument, which then becomes the handler, i.e. new DashboardPlugin(dashboard.setData)

Credits

Module output deeply inspired by: https://github.com/robertknight/webpack-bundle-size-analyzer

Error output deeply inspired by: https://github.com/facebookincubator/create-react-app

Related Repositories

webpack-demos

webpack-demos

a collection of simple demos of Webpack ...

awesome-webpack-cn

awesome-webpack-cn

webpack优秀中文文章 ...

awesome-webpack

awesome-webpack

A curated list of awesome Webpack resources, libraries and tools ...

django-webpack-loader

django-webpack-loader

Transparently use webpack with django ...

redux-webpack-es6-boilerplate

redux-webpack-es6-boilerplate

A starter project for modern React apps with Redux ...


Top Contributors

kenwheeler exogen calesce appsforartists JoshAddington ebrillhart iDuuck bjrn chentsulin charlie-rudenstal th3fallen mistadikay benhollander dmarkow jamez14 transcranial mdressman Urthen stegben sparty02 Wobbly-Wibbly jedirandy graingert tim-mc

Dependencies

package version
babel-core ^6.24.0
babel-traverse ^6.23.1
babel-types ^6.23.0
babylon ^6.16.1
blessed ^0.1.81
bluebird ^3.5.0
chalk ^1.1.3
commander ^2.9.0
cross-spawn ^4.0.0
filesize ^3.3.0
handlebars ^4.0.6
inspectpack ^1.2.0
lodash ^4.17.4
socket.io ^1.4.8
socket.io-client ^1.4.8
webpack ^2.3.2
webpack-dev-server ^2.4.2
dev babel-eslint ^7.2.1
eslint ^3.18.0
eslint-config-formidable ^2.0.1
eslint-plugin-filenames ^1.1.0
eslint-plugin-import ^2.2.0
peer webpack *

Releases

-   v0.2.0 zip tar
-   v0.1.8 zip tar
-   v0.1.7 zip tar
-   v0.1.6 zip tar
-   v0.1.5 zip tar
-   v0.1.4 zip tar
-   v0.1.3 zip tar
-   v0.1.2 zip tar
-   v0.1.1 zip tar
-   v0.1.0 zip tar
-   v0.0.1 zip tar