Webpack – Dashboard – Webpack dashboard display

That’s cool, but its mostly noisy and scrolly and not super helpful. This plugin changes that. Now when you run your dev server, you basically work at NASA:

Note: This project is in super alpha. This is literally the first release, and it’s been very lightly tested.

You have to use webpack-dev-server programmatically, via something like express, for this to work properly.

You can see a great example of how that’s done here:

Github.com/gaearon/rea…

You also need to turn off all error logging by setting your webpack config quiet option to true. If you use webpack-hot-middleware, that is done by setting the log option to a no-op. You can do something sort of like this, depending upon your setup:

app.use(require('webpack-dev-middleware')(compiler, {
  quiet: true,
  publicPath: config.output.publicPath,
}));

app.use(require('webpack-hot-middleware')(compiler, {
  log: () => {}
}));
Copy the code

Once you have the above in place, get this going by:

First, import the dashboard and webpack plugin:

var Dashboard = require('webpack-dashboard');
var DashboardPlugin = require('webpack-dashboard/plugin');
Copy the code

Next, right after you create your compiler, create an instance of the dashboard and apply the plugin, like so:

var compiler = webpack(config);

var dashboard = new Dashboard();

compiler.apply(new DashboardPlugin(dashboard.setData));
Copy the code

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 alone those lines.

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