webpack打包进度展示以及美化教程

介绍

我们在自己搭建项目的时候，在打包构建的时候等待非常的枯燥，尤其是特别大不知道还要等多久才是最恐怖的，这时不妨找一款进度条插件，让我们不再焦躁下去，本期我们会推荐三款进度条插件给大家进行选择，找出或者改造喜欢的那一款来用到自己的项目中。

准备

我们既然要美化进度条就要考虑给他更改颜色。目前市面上给终端字符串上色最好用的还是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
}

这就是目前的基础结构，后面我们就会把介绍的插件推给plugins里面，那么，我们就要切入正题了。

1.webpack.ProgressPlugin

webpack.ProgressPlugin 作为webpack的内置插件具备了可以在打包构建中输出当前的进度和简述，虽然可能扩展和美观都有限，但是可以不用下载其他第三方插件了。

const { ProgressPlugin } = require("webpack")
let progressPlugin = new ProgressPlugin({
  activeModules: true,         // 默认false，显示活动模块计数和一个活动模块正在进行消息。
  entries: true,  			   // 默认true，显示正在进行的条目计数消息。
  modules: false,              // 默认true，显示正在进行的模块计数消息。
  modulesCount: 5000,          // 默认5000，开始时的最小模块数。PS:modules启用属性时生效。
  profile: false,         	   // 默认false，告诉ProgressPlugin为进度步骤收集配置文件数据。
  dependencies: false,         // 默认true，显示正在进行的依赖项计数消息。
  dependenciesCount: 10000,    // 默认10000，开始时的最小依赖项计数。PS:dependencies启用属性时生效。
})
plugins.push(progressPlugin)

主要的参数都写明在注释中就不一一赘述了。

最后，我们的输出表现为：

注意，webpack.ProgressPlugin 还有一个参数没有去写上，他就是handler，它是可以返回构建信息的钩子函数，下面我们就来简单写一下。

new ProgressPlugin({
    // ...
    handler(percentage, message, ...args) {   // 钩子函数
            console.log(chalk.yellow("进度：") + chalk.green.bold(~~(percentage * 100) + "%") + " " + chalk.yellow.bold("操作：") + chalk.blue.bold(message))
    }
})

返回出的信息如下：

• percentag：一个介于 0 和 1 之间的数字，表示编译的完成百分比。

• message：当前执行的钩子的简短描述。

• ...args：零个或多个描述当前进度的附加字符串。

以上钩子函数的代码输出结果为：

2.progress-bar-webpack-plugin

progress-bar-webpack-plugin 这款插件，如果有熟悉node-progress的同学会感到并不陌生，因为他选项几乎跟node-progress一模一样，而且改造扩展起来也非常容易，总的来说就是，灵活易用十分小巧方便。

我们要先安装一下吧：

# 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, 					 // 默认20，进度格子数量即每个代表进度数，如果是20，那么一格就是5。
  format: chalk.blue.bold("build") + chalk.yellow('[:bar] ') + chalk.green.bold(':percent') + ' (:elapsed秒)',
  stream: process.stderr,        // 默认stderr，输出流
  complete: "#",                 // 默认“=”，完成字符
  clear: false,                  // 默认true，完成时清除栏的选项
  renderThrottle: "",            // 默认16，更新之间的最短时间（以毫秒为单位）
  callback() {                   // 进度条完成时调用的可选函数
    console.log(chalk.red.bold("完成"))
  }
})
plugins.push(progressPlugin)

这里着重要说的是format就是进度条的格式：

• :bar 进度条本身

• :current 当前刻度数

• :total 总刻度

• :elapsed 以秒为单位的时间

• :percent 完成百分比

• :msg 当前进度消息

这里我们只要写出对应的字符串就可以将需要展示的信息进行构建显示。

最后，我们的输出表现为：

3.webpackbar

webpackbar 这是一款个人感觉是个十分美观优雅的进度条，很多成名框架都用过他。而且使用起来也极其方便，也可以支持多个并发构建是个十分强大的进度插件。

我们依然要先安装一下：

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

const WebpackBar = require('webpackbar');
let progressPlugin = new WebpackBar({
  color: "#85d",  // 默认green，进度条颜色支持HEX
  basic: false,   // 默认true，启用一个简单的日志报告器
  profile:false,  // 默认false，启用探查器。
})
plugins.push(progressPlugin)

最常用的属性配置其实就是这些，注释里也写的很清楚了。

当然里面还有一个属性就是reporters还没有写上，可以在里面注册事件，也可以理解为各种钩子函数。如下：

{   // 注册一个自定义记者数组
    start(context) {
      // 在（重新）编译开始时调用
      const { start, progress, message, details, request, hasErrors } = context
    },
    change(context) {
      // 在 watch 模式下文件更改时调用
    },
    update(context) {
      // 在每次进度更新后调用
    },
    done(context) {
      // 编译完成时调用
    },
    progress(context) {
      // 构建进度更新时调用
    },
    allDone(context) {
      // 当编译完成时调用
    },
    beforeAllDone(context) {
      // 当编译完成前调用
    },
    afterAllDone(context) {
      // 当编译完成后调用
    },
}

当然多数情况下，我们并不会使用这些，基本默认就足够了。

最后，刚才的代码我们的输出表现为：

结语

最后个人对他们在使用中做个客观评价吧：

怎么样，反正我更青睐于webpackbar ，毕竟现在是个看脸的时代了。当然，具体好坏也是需要你自己去体会的，他们各自的官网上都有相应存在的问题和一些不同的扩展方法等你去发掘，还等什么？冲鸭~

到此这篇关于webpack打包进度展示以及美化的文章就介绍到这了,更多相关webpack打包进度展示内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞！