webpack如何实现打包进度展示以及美化

这篇文章给大家分享的是有关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) {
      // 当编译完成后调用
    },
}

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

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

结语

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

感谢各位的阅读！关于“webpack如何实现打包进度展示以及美化”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！