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.ProgressPlugin | 差劲 | 容易/一般 | 无需 | 16.9 KB |
| progress-bar-webpack-plugin | 良好 | 容易/优秀 | 需要 | 5.72 kB |
| webpackbar | 优秀 | 复杂/优秀 | 需要 | 134 KB |
怎么样，反正我更青睐于webpackbar ，毕竟现在是个看脸的时代了。当然，具体好坏也是需要你自己去体会的，他们各自的官网上都有相应存在的问题和一些不同的扩展方法等你去发掘，还等什么？冲鸭~
栏 目：JavaScript代码
下一篇：JavaScript实现控制打开文件另存为对话框的方法
本文标题：webpack打包进度展示以及美化教程
本文地址：http://www.codeinn.net/misctech/208121.html
