[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 ...
随机推荐
- ASP.NET程序中动态修改web.config中的设置项目(后台CS代码)
using System;using System.Collections;using System.ComponentModel;using System.Data;using System.Dra ...
- 阿里云主机安装Memcached
http://www.zyuns.com/?page_id=354 前言最近发现阿里云主机在使用中,并发访问量稍大,页面加载速度就很慢.于是学习了一些服务器优化的文章,决定安装Memcached,优化 ...
- CentOS 7 安装 tomcat7.0
安装tomcat: [root@admin local]# cd /usr/local[root@admin local]# tar -zxv -f apache-tomcat-7.0.29.tar. ...
- 学习Erlang--1、入门
1.正式起航 从前,一名程序员偶然读到了一本古怪的语言图书,相等其实不是相等,变量其实是不能改变的,语法是那么陌生,它甚至不是面向对象,这些程序实在是太过另类…… 另类的不仅仅是程序,编程的教学步骤也 ...
- (二)学习CSS之cursor属性
参考:http://www.w3school.com.cn/tiy/t.asp?f=csse_zindex cursor 属性规定要显示的光标的类型(形状). <html> <bod ...
- Java序列化 如何把多个对象存储在一个文件中
/** * 用于保存模板文件,内容包括: * 1,标志位,1 int * 2,版本 1 int * 3,数据头长度 1 int * 4,预留数据头空间 5120 byte * 5,后续数据长度 ...
- Educational Codeforces Round 3 E (609E) Minimum spanning tree for each edge
题意:一个无向图联通中,求包含每条边的最小生成树的值(无自环,无重边) 分析:求出这个图的最小生成树,用最小生成树上的边建图 对于每条边,不外乎两种情况 1:该边就是最小生成树上的边,那么答案显然 2 ...
- WebDriver运行异常列表
1. WebDriverException: Component returned failure code: 0x804b000a 这个异常通常是因为在navigate到url时,丢失了http,务 ...
- 【树莓PI】下载机
sudo app-get install ntfs-3g 读写ntfs格式的磁盘 mount -t ntfs /dev/sda4 /mnt/usb -o nls=utf8,umask=0 fdisk ...
- 【译】 AWK教程指南 3计算并打印文件中指定的字段数据
awk 处理数据时,它会自动从数据文件中一次读取一条记录,并会将该记录切分成一个个的字段:程序中可使用 $1, $2,... 直接取得各个字段的内容.这个特色让使用者易于用 awk 编写 reform ...