[Webpack] Use the Webpack Dashboard to Monitor Webpack Operations

Learn how to use the new Webpack Dashboard from Formidable Labs to display a pretty, useful output for monitoring the status of your webpack builds. This command line tool replaces the frequently unhelpful large text dump that webpack generates with a pretty user interface that breaks out useful information and presents it in a way that's easy to understand at a glance.

 

webpack-middleware:

var path = require('path');
var express = require('express');
var webpack = require('webpack');
var config = require('./webpack.config');

var Dashboard = require("webpack-dashboard");
var DashboardPlugin = require("webpack-dashboard/plugin");

var app = express();
var compiler = webpack(config);

var dashboard = new Dashboard();
compiler.apply(new DashboardPlugin(dashboard.setData));

app.use(express.static('public'));
app.use(require('webpack-dev-middleware')(compiler, {
  quiet: true
}));

app.listen(8080, "127.0.0.1", function(err) {
    if (err) {
        console.log(err);
        return;
    }

    console.log('Listening at http://localhost:8080');
});

 

 

webpack-dev-server:

var Dashboard = require('webpack-dashboard');
var DashboardPlugin = require('webpack-dashboard/plugin');
var dashboard = new Dashboard();

module.exports = {
    entry: './main.js',
    output: {
        path: './',
        filename: "index.js"
    },
    devServer: {
        inline: true,
        port: 3336,
        quite: true, // Add quite option for webpack dashboard
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel',
                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    },
    plugins: [
        new DashboardPlugin(dashboard.setData)
    ]
};