/ REACT WEBPACK ASP.NET MVC

Webpack Plugin 介紹 - 提示工具篇

Webpack-Notifier

一款能夠在 Bundle Successfully or Failure 時，跳出桌面級的提醒視窗，具有明顯的提示效果。底層是使用 node-notifier，WINDOWS、MAC 系統皆可支援。

Webpack-Notifier

先安裝 Plugin

npm i webpack-notifier -D

設定檔調整如下

webpack.common.js
var path = require('path')
var WebpackNotifierPlugin = require('webpack-notifier')
module.exports = {
    plugins: [
        new WebpackNotifierPlugin({
            title: 'MyProject',
            contentImage: path.join(__dirname, 'logo.png'),
            alwaysNotify: true
        })
    ]
}

可以自行設定提示標題、圖檔、提示時機等。

詳細使用方式請看這裡

Progress-Bar-Webpack-Plugin

在 Webpack Bundle 時，使用進度條的方式顯示在 Terminal，讓我們更容易掌握打包完成的時間。

Progress-Bar-Webpack-Plugin

先安裝 Plugin

npm i progress-bar-webpack-plugin -D

設定檔調整如下

webpack.common.js
var ProgressBarPlugin = require('progress-bar-webpack-plugin')
module.exports = {
    plugins: [new ProgressBarPlugin()]
}

詳細使用方式請看這裡

2019 IT 邦鐵人賽文章連結