快捷導(dǎo)航

webpack打包進(jìn)度展示以及美化教程

更新時(shí)間：2022年01月24日 15:37:21 作者：jsmask

webpack 是一個(gè)現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器(module bundler),下面這篇文章主要給大家介紹了關(guān)于webpack打包進(jìn)度展示以及美化的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

介紹

我們在自己搭建項(xiàng)目的時(shí)候，在打包構(gòu)建的時(shí)候等待非常的枯燥，尤其是特別大不知道還要等多久才是最恐怖的，這時(shí)不妨找一款進(jìn)度條插件，讓我們不再焦躁下去，本期我們會(huì)推薦三款進(jìn)度條插件給大家進(jìn)行選擇，找出或者改造喜歡的那一款來用到自己的項(xiàng)目中。

準(zhǔn)備

我們既然要美化進(jìn)度條就要考慮給他更改顏色。目前市面上給終端字符串上色最好用的還是chalk，支持的顏色非常多，而且非常干凈簡潔，我們這里用的是4.1.2版本。

# NPM
npm i -D chalk
# YARN
yarn add -D chalk

我們安裝后，在 webpack.config.js 中引用一下，如下：

// webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const chalk = require("chalk");
const plugins = [
  new CleanWebpackPlugin(),
  new HtmlWebpackPlugin({
    filename: "index.html",
    template: path.resolve(__dirname, "public/index.html")
  })
]
module.exports = {
  // ...
  plugins
}

這就是目前的基礎(chǔ)結(jié)構(gòu)，后面我們就會(huì)把介紹的插件推給plugins里面，那么，我們就要切入正題了。

1.webpack.ProgressPlugin

webpack.ProgressPlugin 作為webpack的內(nèi)置插件具備了可以在打包構(gòu)建中輸出當(dāng)前的進(jìn)度和簡述，雖然可能擴(kuò)展和美觀都有限，但是可以不用下載其他第三方插件了。

const { ProgressPlugin } = require("webpack")
let progressPlugin = new ProgressPlugin({
  activeModules: true,         // 默認(rèn)false，顯示活動(dòng)模塊計(jì)數(shù)和一個(gè)活動(dòng)模塊正在進(jìn)行消息。
  entries: true,  			   // 默認(rèn)true，顯示正在進(jìn)行的條目計(jì)數(shù)消息。
  modules: false,              // 默認(rèn)true，顯示正在進(jìn)行的模塊計(jì)數(shù)消息。
  modulesCount: 5000,          // 默認(rèn)5000，開始時(shí)的最小模塊數(shù)。PS:modules啟用屬性時(shí)生效。
  profile: false,         	   // 默認(rèn)false，告訴ProgressPlugin為進(jìn)度步驟收集配置文件數(shù)據(jù)。
  dependencies: false,         // 默認(rèn)true，顯示正在進(jìn)行的依賴項(xiàng)計(jì)數(shù)消息。
  dependenciesCount: 10000,    // 默認(rèn)10000，開始時(shí)的最小依賴項(xiàng)計(jì)數(shù)。PS:dependencies啟用屬性時(shí)生效。
})
plugins.push(progressPlugin)

主要的參數(shù)都寫明在注釋中就不一一贅述了。

最后，我們的輸出表現(xiàn)為：

注意，webpack.ProgressPlugin 還有一個(gè)參數(shù)沒有去寫上，他就是handler，它是可以返回構(gòu)建信息的鉤子函數(shù)，下面我們就來簡單寫一下。

new ProgressPlugin({
    // ...
    handler(percentage, message, ...args) {   // 鉤子函數(shù)
            console.log(chalk.yellow("進(jìn)度：") + chalk.green.bold(~~(percentage * 100) + "%") + " " + chalk.yellow.bold("操作：") + chalk.blue.bold(message))
    }
})

返回出的信息如下：

percentag：一個(gè)介于 0 和 1 之間的數(shù)字，表示編譯的完成百分比。
message：當(dāng)前執(zhí)行的鉤子的簡短描述。
...args：零個(gè)或多個(gè)描述當(dāng)前進(jìn)度的附加字符串。

以上鉤子函數(shù)的代碼輸出結(jié)果為：

2.progress-bar-webpack-plugin

progress-bar-webpack-plugin 這款插件，如果有熟悉node-progress的同學(xué)會(huì)感到并不陌生，因?yàn)樗x項(xiàng)幾乎跟node-progress一模一樣，而且改造擴(kuò)展起來也非常容易，總的來說就是，靈活易用十分小巧方便。

我們要先安裝一下吧：

# NPM
npm i -D progress-bar-webpack-plugin
# YARN
yarn add -D progress-bar-webpack-plugin

const ProgressBarPlugin = require('progress-bar-webpack-plugin');
let progressPlugin = new ProgressBarPlugin({
  width: 50, 					 // 默認(rèn)20，進(jìn)度格子數(shù)量即每個(gè)代表進(jìn)度數(shù)，如果是20，那么一格就是5。
  format: chalk.blue.bold("build") + chalk.yellow('[:bar] ') + chalk.green.bold(':percent') + ' (:elapsed秒)',
  stream: process.stderr,        // 默認(rèn)stderr，輸出流
  complete: "#",                 // 默認(rèn)“=”，完成字符
  clear: false,                  // 默認(rèn)true，完成時(shí)清除欄的選項(xiàng)
  renderThrottle: "",            // 默認(rèn)16，更新之間的最短時(shí)間（以毫秒為單位）
  callback() {                   // 進(jìn)度條完成時(shí)調(diào)用的可選函數(shù)
    console.log(chalk.red.bold("完成"))
  }
})
plugins.push(progressPlugin)

這里著重要說的是format就是進(jìn)度條的格式：

:bar 進(jìn)度條本身
:current 當(dāng)前刻度數(shù)
:total 總刻度
:elapsed 以秒為單位的時(shí)間
:percent 完成百分比
:msg 當(dāng)前進(jìn)度消息

這里我們只要寫出對應(yīng)的字符串就可以將需要展示的信息進(jìn)行構(gòu)建顯示。

最后，我們的輸出表現(xiàn)為：

3.webpackbar

webpackbar 這是一款個(gè)人感覺是個(gè)十分美觀優(yōu)雅的進(jìn)度條，很多成名框架都用過他。而且使用起來也極其方便，也可以支持多個(gè)并發(fā)構(gòu)建是個(gè)十分強(qiáng)大的進(jìn)度插件。

我們依然要先安裝一下：

# NPM
npm i -D webpackbar
# YARN
yarn add -D webpackbar

const WebpackBar = require('webpackbar');
let progressPlugin = new WebpackBar({
  color: "#85d",  // 默認(rèn)green，進(jìn)度條顏色支持HEX
  basic: false,   // 默認(rèn)true，啟用一個(gè)簡單的日志報(bào)告器
  profile:false,  // 默認(rèn)false，啟用探查器。
})
plugins.push(progressPlugin)

最常用的屬性配置其實(shí)就是這些，注釋里也寫的很清楚了。

當(dāng)然里面還有一個(gè)屬性就是reporters還沒有寫上，可以在里面注冊事件，也可以理解為各種鉤子函數(shù)。如下：

{   // 注冊一個(gè)自定義記者數(shù)組
    start(context) {
      // 在（重新）編譯開始時(shí)調(diào)用
      const { start, progress, message, details, request, hasErrors } = context
    },
    change(context) {
      // 在 watch 模式下文件更改時(shí)調(diào)用
    },
    update(context) {
      // 在每次進(jìn)度更新后調(diào)用
    },
    done(context) {
      // 編譯完成時(shí)調(diào)用
    },
    progress(context) {
      // 構(gòu)建進(jìn)度更新時(shí)調(diào)用
    },
    allDone(context) {
      // 當(dāng)編譯完成時(shí)調(diào)用
    },
    beforeAllDone(context) {
      // 當(dāng)編譯完成前調(diào)用
    },
    afterAllDone(context) {
      // 當(dāng)編譯完成后調(diào)用
    },
}

當(dāng)然多數(shù)情況下，我們并不會(huì)使用這些，基本默認(rèn)就足夠了。

最后，剛才的代碼我們的輸出表現(xiàn)為：

結(jié)語

最后個(gè)人對他們在使用中做個(gè)客觀評價(jià)吧：

進(jìn)度插件	美觀	擴(kuò)展性	額外安裝	大小
webpack.ProgressPlugin	差勁	容易/一般	無需	16.9 KB
progress-bar-webpack-plugin	良好	容易/優(yōu)秀	需要	5.72 kB
webpackbar	優(yōu)秀	復(fù)雜/優(yōu)秀	需要	134 KB