iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 20
0
Modern Web

Webpack with ASP.NET MVC系列 第 20

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

  • 分享至 

  • xImage
  •  

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。

詳細使用方式請看這裡


上一篇
Webpack Plugin 介紹 - 提示工具篇
下一篇
HappyPack 介紹
系列文
Webpack with ASP.NET MVC30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言