webpack-dashboard直观显示webpack构建

在进行webpack单页面打包时，过程中是不显示的，对于webpack打包进程是无法看到的。例如这样的过程：

这样总感觉太突兀了。

当然如果你要简单的显示，配置下打包命令就可以了

这里我们来介绍webpack-dashboard

1. webpack-dashboard

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

1.1 它是什么

简单地说，webpack-dashboard就是把原先你使用webpack时（特别是使用webpack dev server时）命令行控制台打印的日志：

转换成了这样：

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

1.2 如何使用

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

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

然后，在对应的plugins里面添加DashboardPlugin：

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

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

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

  如下图所示，为我尝试时的截图：

这里显示的字符串“越界”，是因为没有使用quiet模式

1.3 最后

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

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

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

2. PROGRESSPLUGIN插件

3. progress-bar-webpack-plugin

安装：https://www.npmjs.com/package/progress-bar-webpack-plugin

配置：