前言
我们知道webpack编译阶段打印出来的日志一般人是看不懂的。如果有个工具能统计这些信息让程序员看懂就好了,下面有几个工具,可以说是查看webpack编译情况的利器。
默认情况
一般情况下,通过在webpack-dev-server命令后添加–progress –colors选项可以查看webpack编译进度。
命令类似下面
“scripts”: {
“webpack-dev-server –config webpack.dev.config.js –mode development –devtool eval-source-map –progress –colors”
}
打印出一串文件,一般人很难看懂,随着项目变大,编译的工作量增加,就更复杂了。
webpack-dashboard
参数FormidableLabs/webpack-dashboard
webpack-dashboard
是一统计和优化webpack日志的工具,可以以表格形势展示日志信息。其中包括构建过程和状态、日志以及涉及的模块列表。
下面以webpack-dev-server方式启动服务为例。
使用起来很简单,只要添加插件即可。
下面以webpack-dev-server
方式启动服务为例。
使用起来很简单,只要添加插件即可。
安装模块
npm install webpack-dashboard --save-dev
在webpack.config.js里添加插件
//导入模块 var DashboardPlugin = require('webpack-dashboard/plugin'); //添加插件 plugins: [ new DashboardPlugin() ]
对,只要这些配置就可以了。
webpack-dashboard
插件使用socket连接方式连接webpack-dev-server
启动的服务。所以它能实时监听。
可选参数
DashboardPlugin
有几个可选参数。
port
:指定连接socket客户端的端口host
:指定连接socket客户端的域名handler
:插件的处理方法
因为有handler,所以还可以如下使用
//引入模块
var Dashboard = require(‘webpack-dashboard’);
var DashboardPlugin = require(‘webpack-dashboard/plugin’);
var dashboard = new Dashboard();//添加插件方法
new DashboardPlugin(dashboard.setData)
如果使用webpack-dashboard
,推荐使用这种方式。
缺点
这种方式虽然好,但由于在dos面板上展示的,dos面板必需要大才能看的清楚,电脑分辨率要高,不然展示不全,看起来更别扭。同时统计的信息也不是很全。所以我推荐下面的方式jarvis
。
jarvis
它是在浏览器里展示的,所以它的自适应效果做的好,看的清楚。同时,它统计的信息也比较多。
jarvis是Just A Rather Very Intelligent System首字母缩写,意思是它是一个非常聪明的系统。你可以通过浏览器展示结果,它能收集webpack编译或者运行阶段的信息。
优点
界面美观
运行在浏览器里
很方便查看资源大小
错误提示做的非常好
安装模块
npm i -D webpack-jarvis
在webpack.config.js配置插件
//引入模块
const Jarvis = require(“webpack-jarvis”);/* the rest of your webpack configs */
//添加插件,指定监听端口是1337
plugins: [
new Jarvis({
port: 1337 // optional: set a port
})
]
查看效果
启动编译npm start
或npm run dev
(这些命令在package.json的scripts配置的)。
访问http://localhost:1337/
即能看到好看的、美丽的界面了。
可选参数
jarvis提供了一些可选参数供自定义
port:监听的端口,默认1337,监听面板将监听这个端口,通常像http://localhost:port/
host:域名,默认localhost,也可以设为0.0.0.0,不限制域名。
watchOnly:仅仅监听编译阶段。默认为true,如果高为false,jarvis不仅仅运行在编译阶段,在编译完成后还保持运行状态。比如
new Jarvis({
host: 0.0.0.0
})