使用webpack命令行工具:webpack-dashboard

2016-08-28 Wenjie Yao 更多博文 » 博客 » GitHub »

Webpack Dashboard 命令行 Front-end

原文链接 https://yaowenjie.github.io/front-end/using-webpack-dashboard
注:以下为加速网络访问所做的原文缓存,经过重新格式化,可能存在格式方面的问题,或偶有遗漏信息,请以原文为准。


  webpack-dashboard是用于改善开发人员使用webpack时控制台用户体验的一款工具。它摒弃了webpack(尤其是使用dev server时)在命令行内诸多杂乱的信息结构,为webpack在命令行上构建了一个一目了然的仪表盘(dashboard),其中包括构建过程状态日志以及涉及的模块列表。有了它,你就可以更加优雅的使用webpack来构建你的代码。

  另外,它自开源以来短短半个月,就已经在github上收获了6000多枚star,足见人们对于提升开发工具的用户体验有着巨大的需求。

<!--more-->

它是什么

  简单地说,webpack-dashboard就是把原先你使用webpack时(特别是使用webpack dev server时)命令行控制台打印的日志:

  转换成了这样:

  看到这里,是不是觉得整个人生都变美好了呢。仔细看,这个dashboard里面按日志(Log)、状态(Status)、运行(Operation)、过程(Progess)、模块(Modules)、产出(Assets)这6个部分将信息区分开来。用官方的话,这将会给你一种在NASA工作的即使感,哈哈。

如何使用

  其实安装和使用webpack-dashboard的过程非常简单,首先使用npm本地安装它,到你基于webpack的前端项目上:

npm install webpack-dashboard --save-dev

  如果你利用webpack-dev-server启动了一个server,而不是express的话,可以直接在webpack.config.js里面初始化dashboard。

  首先,导入dashboard和其对应的插件,并创建一个dashboard的实例:

var Dashboard = require('webpack-dashboard');
var DashboardPlugin = require('webpack-dashboard/plugin');
var dashboard = new Dashboard();

  然后,在对应的plugins里面添加DashboardPlugin:

plugins: [
  new DashboardPlugin(dashboard.setData)
]

  最后,你需要让dev server在静默的状态中启动(主要是为了去掉多余的日志),要实现这一点,你可以像官方的做法那样,在WebpackDevServer的构造函数里添加 quiet: true

new WebpackDevServer(
  Webpack(settings),
  {
    publicPath: settings.output.publicPath,
    hot: true,
    quiet: true, // lets WebpackDashboard do its thing
    historyApiFallback: true,
  }
).listen(

  当然,你也可以在npm的script里面启动dev server时添加quiet选项(我在尝试的时候选择这种简单的方式)。

"scripts": {
  "start": "webpack-dev-server --quiet"
},

  这样,你就可以运行诸如npm start这样的命令启动你的server。然后,你就可以休息一下,泡杯咖啡,假装自己就是一位宇航员,静静地看着你的dashboard。

  如下图所示,为笔者尝试时的截图:

最后

  本文只介绍了基于webpack-dev-server的这一种使用情况,其他启动server的方式(比如express)或者其他情况可以参考webpack-dashboard github官方仓库

  webpack-dashboard目前还处于初期阶段,所以必然还有一些值得注意或者值得改进的地方。如果你使用的是OS X自带的终端(Terminal),需要确认“View → Allow Mouse Reporting”是使能(Enable)状态,如果你的终端没有这个功能的话,你或许可以尝试一下iTerm2。另外,如果你忘记使用quiet模式或者你的某句日志或者名字过长,可能会导致显示的字符串“越界”,跑到另一个区域,看起来没有那么直接美观了。

  最后,如果你想简单的看一下webpack-dashboard启动起来的效果,你可以参考使用本文示例代码