本文共 2205 字，大约阅读时间需要 7 分钟。

模块开发之webpack查看日志工具webpack-dashboard和jarvis(十)

前言

我们知道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

参数

webpack-dashboard是一统计和优化webpack日志的工具，可以以表格形势展示日志信息。其中包括构建过程和状态、日志以及涉及的模块列表。

效果图

下面以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启动的服务。所以它能实时监听。

注意，如果启动时程序报错，请删除项目的node_modules文件，然后执行cnpm i重新安装模块，屡试不爽。

可选参数

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 *///添加插件，指定监听端口是1337plugins: [  new Jarvis({    port: 1337 // optional: set a port  })];

查看效果

启动编译npm start或npm run dev（这些命令在package.json的scripts配置的）。

访问http://localhost:1337/即能看到好看的、美丽的界面了。

启动里，如果报Error: listen EADDRINUSE xxx错误，那是端口被占用了。打开任务管理器，然后杀死node.exe或nodex.js进程即可。

可选参数

jarvis提供了一些可选参数供自定义

• port:监听的端口，默认1337，监听面板将监听这个端口，通常像http://localhost:port/
• host:域名，默认localhost,也可以设为0.0.0.0，不限制域名。
• watchOnly:仅仅监听编译阶段。默认为true,如果高为false，jarvis不仅仅运行在编译阶段，在编译完成后还保持运行状态。

比如

new Jarvis({    host: 0.0.0.0  })

---

总结

这里介绍到这里。个人推荐jarvis方式，在浏览器打展示效果。

本篇介绍了webpack编译阶段使用的工具，下篇文章介绍运行阶段调试工具Redux-devTools。

转载地址：https://chenyuan.blog.csdn.net/article/details/80871055 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！