webpack-dashboard直观显示webpack构建
在进行webpack单页面打包时，过程中是不显示的，对于webpack打包进程是无法看到的。例如这样的过程：
image.png
这样总感觉太突兀了。
当然如果你要简单的显示，配置下打包命令就可以了
webpack --progress
这里我们来介绍webpack-dashboard
1. webpack-dashboard
webpack-dashboard是用于改善开发人员使用webpack时控制台用户体验的一款工具。它摒弃了webpack（尤其是使用dev server时）在命令行内诸多杂乱的信息结构，为webpack在命令行上构建了一个一目了然的仪表盘(dashboard)，其中包括构建过程和状态、日志以及涉及的模块列表。有了它，你就可以更加优雅的使用webpack来构建你的代码。
1.1 它是什么
简单地说，webpack-dashboard就是把原先你使用webpack时（特别是使用webpack dev server时）命令行控制台打印的日志：
Creating an optimized production build...
Compiled with warnings.
./src/App.js
Line 10: 'One' is assigned a value but never used no-unused-vars
Line 16: 'Two' is assigned a value but never used no-unused-vars
Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.
File sizes after gzip:
97.39 KB build/static/js/main.4348a7e3.js
69.13 KB build/static/js/0.f84fa404.chunk.js
39.43 KB build/static/js/2.81fe7f28.chunk.js
39.42 KB build/static/js/1.a2c322a6.chunk.js
The project was built assuming it is hosted at the server root.
To override this, specify the homepage in your package.json.
For example, add this to build it for GitHub Pages:
转换成了这样：
image.png
看到这里，是不是觉得整个人生都变美好了呢。仔细看，这个dashboard里面按日志(Log)、状态(Status)、运行(Operation)、过程(Progess)、模块(Modules)、产出(Assets)这6个部分将信息区分开来。用官方的话，这将会给你一种在NASA工作的即使感，哈哈。
1.2 如何使用
其实安装和使用webpack-dashboard的过程非常简单，首先使用npm本地安装它，到你基于webpack的前端项目上：
npm install webpack-dashboard --save-dev
如果你利用webpack-dev-server启动了一个server，而不是express的话，可以直接在webpack.config.js里面初始化dashboard。
首先，导入dashboard和其对应的插件，并创建一个dashboard的实例：
const Dashboard = require('webpack-dashboard');
const DashboardPlugin = require('webpack-dashboard/plugin');
const 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。
如下图所示，为我尝试时的截图：
image.png
这里显示的字符串“越界”，是因为没有使用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插件
new webpack.ProgressPlugin(function handler(percentage, msg) {
console.log((percentage.toFixed(2) * 100) + '%', msg);
})
3. progress-bar-webpack-plugin
image.png
安装：https://www.npmjs.com/package/progress-bar-webpack-plugin
配置：
new ProgressBarPlugin({
format: 'build [:bar] :percent (:elapsed seconds)',
clear: false,
width: 60
})
