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

先安裝 Plugin
npm i webpackbar -D
設定檔調整如下
var WebpackBar = require('webpackbar')
module.exports = {
plugins: [
new WebpackBar({
color: 'green',
profile: true
})
]
}
可客制化一些樣式,透過 profile
的設定,打包完成後可以秀出相關打包資訊。

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


先安裝 Plugin
npm i webpack-dashboard -D
設定檔調整如下
var DashboardPlugin = require('webpack-dashboard/plugin')
module.exports = {
plugins: [
new DashboardPlugin({
port: 3001
})
]
}
可以指定 Dashboard 開啟的 port。