Webpack-Bar

更為精緻的進度條 XD，使用進度條以及更精確的資訊顯示在 Terminal，明確的列出當前處理檔案為何，讓我們更容易掌握打包進度。



先安裝 Plugin

npm i webpackbar -D

設定檔調整如下

webpack.common.js

var WebpackBar = require('webpackbar')
module.exports = {
  plugins: [
    new WebpackBar({
      color: 'green',
      profile: true
    })
  ]
}

可客制化一些樣式，透過 profile 的設定，打包完成後可以秀出相關打包資訊。



詳細使用方式請看這裡

Webpack-Dashboard

將 Webpack 打包資訊，整合成 Dashboard，作者說：使用這個套件，就像在 NASA 工作一樣 XD

未使用 Webpack-Dashboard



使用 Webpack-Dashboard，顯示打包資訊的介面十分科技感



先安裝 Plugin

npm i webpack-dashboard -D

設定檔調整如下

webpack.common.js

var DashboardPlugin = require('webpack-dashboard/plugin')
module.exports = {
  plugins: [
    new DashboardPlugin({
      port: 3001 
    })
  ]
}

可以指定 Dashboard 開啟的 port。

詳細使用方式請看這裡