/ REACT WEBPACK ASP.NET MVC

Webpack Plugin 介紹 - 打包資訊工具篇

Webpack-Bar

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

webpackbar

先安裝 Plugin

npm i webpackbar -D

設定檔調整如下

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

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

webpackbar

詳細使用方式請看這裡

Webpack-Dashboard

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

未使用 Webpack-Dashboard

Webpack-Dashboard

使用 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。

詳細使用方式請看這裡

2019 IT 邦鐵人賽文章連結