[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)
]
};
[Webpack] Use the Webpack Dashboard to Monitor Webpack Operations的更多相关文章
- webpack入门(二)what is webpack
webpack is a module bundler.webpack是一个模块打包工具,为了解决上篇一提到的各种模块加载或者转换的问题. webpack takes modules with dep ...
- Webpack+React项目入门——入门及配置Webpack
一.入门Webpack 参考文章:<入门Webpack,看这篇就够了> 耐心看完这篇非常有帮助 二.React+Webpack环境配置 参考文章:<webpack+react项目初体 ...
- webpack构建多页面react项目(webpack+typescript+react)
目录介绍 src:里面的每个文件夹就是一个页面,页面开发相关的组件.图片和样式文件就存放在对应的文件夹下. tpl:里面放置模板文件,当webpack打包时为html-webpack-plugin插件 ...
- webpack安装低于4版本(没有配置webpack.config.js)
webpack安装低于4版本(没有配置webpack.config.js) webpack 无需配置输出参数-o 低版本 1.初始化项目 npm init -y 初始化项目 2.安装webpack@ ...
- Webpack学习笔记一:What is webpack
#,Loaders干嘛的,webpack can only process JavaScript natively, but loaders are used to transform other ...
- 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 ...
- webpack需要全局安装,才能使用webpack命令
webpack全局安装,具体项目中才能使用webpack命令: npm install webpack -g
- [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 ...
- [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 ...
随机推荐
- 记一次SSH登陆失败问题的定位
创建用户之后,使用ssh协议登陆提示失败. useradd -d /home/hdp -m hdp -g dba -s /bin/bash 通过命令 ssh -v hdp@127.0.0.1 登陆,查 ...
- [原]Unity3D深入浅出 - 导航网格自动寻路(Navigation Mesh)
NavMesh(导航网格)是3D游戏世界中用于实现动态物体自动寻路的一种技术,将游戏中复杂的结构组织关系简化为带有一定信息的网格,在这些网格的基础上通过一系列的计算来实现自动寻路..导航时,只需要给导 ...
- mysql_insert_id 为什么会返回空值
如果同时打开了一个以上的数据库资源,如果其中一个资源,没有使用insert语句或没有auto_increment类型的数据,或返回结果恰好为空值时,会导致mysql_insert_id()返回空值. ...
- Oracle查看LogMiner的详解
Oracle数据库查看日志的方法很多,我们可以根据SQL语句来实现,也可以通过日志查看工具LogMiner来实现,本文我们主要就介绍了这一过程,接下来就让我们一起来了解一下吧. 一.Or ...
- Gen_server行为分析与实践
1.简介 Gen_server实现了通用服务器client_server原理,几个不同的客户端去分享服务端管理的资源(如图),gen_server提供标准的接口函数和包含追踪功能以及错误报告来实现通用 ...
- C# DataGridView绑定数据源的几种常见方式
开始以前,先认识一下WinForm控件数据绑定的两种形式,简单数据绑定和复杂数据绑定. 1. 简单的数据绑定 例1 using (SqlConnection conn = new SqlConnect ...
- POJ 3345-Bribing FIPA(树状背包)
题意: 有n个国家投票,要得到一个国家的投票有一定的花费,如果给到一个国家的票同时也得到了它所有附属国的票,给出国家关系树,求至少得到m票的最小花费. 分析:基础树状背包,dp[i][j],以i为根的 ...
- POJ 3186 Treats for the Cows 一个简单DP
DP[i][j]表示现在开头是i物品,结尾是j物品的最大值,最后扫一遍dp[1][1]-dp[n][n]就可得到答案了 稍微想一下,就可以, #include<iostream> #inc ...
- C++基类和派生类之间的转换
本文讲解内容的前提是派生类继承基类的方式是公有继承,关键字public 以下程序为讲解用例. #include<iostream> using namespace std; class A ...
- Base-Android快速开发框架(五)--网络操作之RequestModel、ResponeModel、CustomAsyncHttpClient
在正式介绍CustomAsyncHttpClient之前,刚好最近有一个朋友找我帮忙给他们看下一个APP.我先上一段代码截图.一段检测版本更新的接口代码.