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

深碍√TFBOYSˉ_ 2022-05-21 05:41 793阅读 0赞

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

*   *  模块开发之webpack查看日志工具webpack-dashboard和jarvis(十)
 *  前言
 *  默认情况
 *  webpack-dashboard
    
     *  效果图
     *  安装模块
     *  在webpack.config.js里添加插件
     *  可选参数
     *  缺点
 *  jarvis
    
     *  效果图
     *  优点
     *  安装模块
     *  在webpack.config.js配置插件
     *  查看效果
     *  可选参数
 *  总结

# 前言 #

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

**效果如下**  
![这里写图片描述][70]  
![这里写图片描述][70 1]  
打印出一串文件，一般人很难看懂，随着项目变大，编译的工作量增加，就更复杂了。

# webpack-dashboard #

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

## 效果图 ##

![这里写图片描述][70 2]

下面以`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 #

参考[zouhir/jarvis][zouhir_jarvis]

## 效果图 ##

![这里写图片描述][70 3]  
它是在浏览器里展示的，所以它的自适应效果做的好，看的清楚。同时，它统计的信息也比较多。  
`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/`即能看到好看的、美丽的界面了。

> 启动里，如果报`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`。

[70]: /images/20220521/ff0a65ff070541c891e63e5620e10310.png
[70 1]: /images/20220521/a2e2885ed4dc48929419d7b69e4624bb.png
[FormidableLabs_webpack-dashboard]: https://github.com/FormidableLabs/webpack-dashboard
[70 2]: /images/20220521/5b7fc1af36554c229489f92324704e85.png
[zouhir_jarvis]: https://github.com/zouhir/jarvis
[70 3]: /images/20220521/16064dd3e2f74c97aaf0ac0366e4bbd9.png