webpack-dashboard直觀顯示webpack構建

極客教程發表於2018-02-09
Web

在進行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

安裝：www.npmjs.com/package/pro…

配置：

new ProgressBarPlugin({
    format: 'build [:bar] :percent (:elapsed seconds)',
    clear: false, 
    width: 60
  })
複製程式碼

4. webpack 相關文章

相關文章