[Webpack] Use the Webpack Dashboard to Monitor Webpack Operations

最新推荐文章于 2025-09-12 17:28:06 发布

weixin_30929195

最新推荐文章于 2025-09-12 17:28:06 发布

阅读量55

点赞数

CC 4.0 BY-SA版权

文章标签： webpack ViewUI

原文链接：http://www.cnblogs.com/Answer1215/p/5778468.html

本文介绍如何使用Webpack Dashboard简化Webpack构建过程的监控。通过替换原始的命令行输出为直观的用户界面，帮助开发者更容易理解构建状态。文中还提供了使用webpack-middleware及webpack-dev-server结合Webpack Dashboard的具体配置实例。

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)
    ]
};