在進(jìn)行webpack單頁面打包時，過程中是不顯示的，對于webpack打包進(jìn)程是無法看到的。例如這樣的過程：
這樣總感覺太突兀了。
當(dāng)然如果你要簡單的顯示，配置下打包命令就可以了
webpack --progress
這里我們來介紹webpack-dashboard
1. webpack-dashboard
webpack-dashboard是用于改善開發(fā)人員使用webpack時控制臺用戶體驗(yàn)的一款工具。它摒棄了webpack（尤其是使用dev server時）在命令行內(nèi)諸多雜亂的信息結(jié)構(gòu)，為webpack在命令行上構(gòu)建了一個一目了然的儀表盤(dashboard)，其中包括構(gòu)建過程和狀態(tài)、日志以及涉及的模塊列表。有了它，你就可以更加優(yōu)雅的使用webpack來構(gòu)建你的代碼。
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:
轉(zhuǎn)換成了這樣：
看到這里，是不是覺得整個人生都變美好了呢。仔細(xì)看，這個dashboard里面按日志(Log)、狀態(tài)(Status)、運(yùn)行(Operation)、過程(Progess)、模塊(Modules)、產(chǎn)出(Assets)這6個部分將信息區(qū)分開來。用官方的話，這將會給你一種在NASA工作的即使感，哈哈。
1.2 如何使用
其實(shí)安裝和使用webpack-dashboard的過程非常簡單，首先使用npm本地安裝它，到你基于webpack的前端項(xiàng)目上：
npm install webpack-dashboard --save-dev
如果你利用webpack-dev-server啟動了一個server，而不是express的話，可以直接在webpack.config.js里面初始化dashboard。
首先，導(dǎo)入dashboard和其對應(yīng)的插件，并創(chuàng)建一個dashboard的實(shí)例：
const Dashboard = require('webpack-dashboard');
const DashboardPlugin = require('webpack-dashboard/plugin');
const dashboard = new Dashboard();
然后，在對應(yīng)的plugins里面添加DashboardPlugin：
plugins: [
new DashboardPlugin(dashboard.setData)
]
最后，你需要讓dev server在靜默的狀態(tài)中啟動（主要是為了去掉多余的日志），要實(shí)現(xiàn)這一點(diǎn)，你可以像官方的做法那樣，在WebpackDevServer的構(gòu)造函數(shù)里添加 quiet: true。
new WebpackDevServer(
Webpack(settings),
{
publicPath: settings.output.publicPath,
hot: true,
quiet: true, // lets WebpackDashboard do its thing
historyApiFallback: true,
}
).listen
當(dāng)然，你也可以在npm的script里面啟動dev server時添加quiet選項(xiàng)（我在嘗試的時候選擇這種簡單的方式）。
"scripts": {
"start": "webpack-dev-server --quiet"
},
這樣，你就可以運(yùn)行諸如npm start這樣的命令啟動你的server。然后，你就可以休息一下，泡杯咖啡，假裝自己就是一位宇航員，靜靜地看著你的dashboard。
如下圖所示，為我嘗試時的截圖：
這里顯示的字符串“越界”，是因?yàn)闆]有使用quiet模式
1.3 最后
本文只介紹了基于webpack-dev-server的這一種使用情況，其他啟動server的方式（比如express）或者其他情況可以參考webpack-dashboard github官方倉庫。
webpack-dashboard目前還處于初期階段，所以必然還有一些值得注意或者值得改進(jìn)的地方。如果你使用的是OS X自帶的終端(Terminal)，需要確認(rèn)“View → Allow Mouse Reporting”是使能(Enable)狀態(tài)，如果你的終端沒有這個功能的話，你或許可以嘗試一下iTerm2。另外，如果你忘記使用quiet模式或者你的某句日志或者名字過長，可能會導(dǎo)致顯示的字符串“越界”，跑到另一個區(qū)域，看起來沒有那么直接美觀了。
最后，如果你想簡單的看一下webpack-dashboard啟動起來的效果，你可以參考使用本文示例代碼。
2. PROGRESSPLUGIN插件
new webpack.ProgressPlugin(function handler(percentage, msg) {
console.log((percentage.toFixed(2) * 100) + '%', msg);
})
3. progress-bar-webpack-plugin
安裝：https://www.npmjs.com/package/progress-bar-webpack-plugin
配置：
new ProgressBarPlugin({
format: 'build [:bar] :percent (:elapsed seconds)',
clear: false,
width: 60
})
