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

[Webpack] Use the Webpack Dashboard to Monitor Webpack Operations的更多相关文章

  1. webpack入门(二)what is webpack

    webpack is a module bundler.webpack是一个模块打包工具,为了解决上篇一提到的各种模块加载或者转换的问题. webpack takes modules with dep ...

  2. Webpack+React项目入门——入门及配置Webpack

    一.入门Webpack 参考文章:<入门Webpack,看这篇就够了> 耐心看完这篇非常有帮助 二.React+Webpack环境配置 参考文章:<webpack+react项目初体 ...

  3. webpack构建多页面react项目(webpack+typescript+react)

    目录介绍 src:里面的每个文件夹就是一个页面,页面开发相关的组件.图片和样式文件就存放在对应的文件夹下. tpl:里面放置模板文件,当webpack打包时为html-webpack-plugin插件 ...

  4. webpack安装低于4版本(没有配置webpack.config.js)

    webpack安装低于4版本(没有配置webpack.config.js) webpack 无需配置输出参数-o 低版本  1.初始化项目 npm init -y 初始化项目 2.安装webpack@ ...

  5. Webpack学习笔记一:What is webpack

      #,Loaders干嘛的,webpack can only process JavaScript natively, but loaders are used to transform other ...

  6. webpack笔记_(2)_Refusing to install webpack as a dependency of itself

    安装webpack时,出现以下问题: Refusing to install webpack as a dependency of itself npm ERR! Windows_NT npm ERR ...

  7. webpack需要全局安装,才能使用webpack命令

    webpack全局安装,具体项目中才能使用webpack命令: npm install webpack -g

  8. [Webpack 2] Expose modules to dependencies with Webpack

    When you have a dependency that has dependencies on global variables (like jQuery or lodash) or assu ...

  9. [Webpack 2] Grouping vendor files with the Webpack CommonsChunkPlugin

    Often, you have dependencies which you rarely change. In these cases, you can leverage the CommonsCh ...

随机推荐

  1. 记一次SSH登陆失败问题的定位

    创建用户之后,使用ssh协议登陆提示失败. useradd -d /home/hdp -m hdp -g dba -s /bin/bash 通过命令 ssh -v hdp@127.0.0.1 登陆,查 ...

  2. [原]Unity3D深入浅出 - 导航网格自动寻路(Navigation Mesh)

    NavMesh(导航网格)是3D游戏世界中用于实现动态物体自动寻路的一种技术,将游戏中复杂的结构组织关系简化为带有一定信息的网格,在这些网格的基础上通过一系列的计算来实现自动寻路..导航时,只需要给导 ...

  3. mysql_insert_id 为什么会返回空值

    如果同时打开了一个以上的数据库资源,如果其中一个资源,没有使用insert语句或没有auto_increment类型的数据,或返回结果恰好为空值时,会导致mysql_insert_id()返回空值. ...

  4. Oracle查看LogMiner的详解

    Oracle数据库查看日志的方法很多,我们可以根据SQL语句来实现,也可以通过日志查看工具LogMiner来实现,本文我们主要就介绍了这一过程,接下来就让我们一起来了解一下吧.        一.Or ...

  5. Gen_server行为分析与实践

    1.简介 Gen_server实现了通用服务器client_server原理,几个不同的客户端去分享服务端管理的资源(如图),gen_server提供标准的接口函数和包含追踪功能以及错误报告来实现通用 ...

  6. C# DataGridView绑定数据源的几种常见方式

    开始以前,先认识一下WinForm控件数据绑定的两种形式,简单数据绑定和复杂数据绑定. 1. 简单的数据绑定 例1 using (SqlConnection conn = new SqlConnect ...

  7. POJ 3345-Bribing FIPA(树状背包)

    题意: 有n个国家投票,要得到一个国家的投票有一定的花费,如果给到一个国家的票同时也得到了它所有附属国的票,给出国家关系树,求至少得到m票的最小花费. 分析:基础树状背包,dp[i][j],以i为根的 ...

  8. POJ 3186 Treats for the Cows 一个简单DP

    DP[i][j]表示现在开头是i物品,结尾是j物品的最大值,最后扫一遍dp[1][1]-dp[n][n]就可得到答案了 稍微想一下,就可以, #include<iostream> #inc ...

  9. C++基类和派生类之间的转换

    本文讲解内容的前提是派生类继承基类的方式是公有继承,关键字public 以下程序为讲解用例. #include<iostream> using namespace std; class A ...

  10. Base-Android快速开发框架(五)--网络操作之RequestModel、ResponeModel、CustomAsyncHttpClient

    在正式介绍CustomAsyncHttpClient之前,刚好最近有一个朋友找我帮忙给他们看下一个APP.我先上一段代码截图.一段检测版本更新的接口代码.