webpackbar
适用于 webpack 3、4 和 5 的优雅进度条和分析器
优雅的 Webpack 进度条和分析器
✔ 在构建或监听时显示优雅的进度条
✔ 支持多个并发构建（对 SSR 有用）
✔ 漂亮地打印文件名和加载器
✔ 兼容 Windows
✔ 使用 reporters **完全**可自定义
✔ 高级构建分析器
多进度条
构建分析器
快速入门
首先，你需要安装 webpackbar
使用 npm
npm install webpackbar -D
使用 yarn
yarn add webpackbar -D
然后将 reporter 作为插件添加到你的 webpack 配置中。
webpack.config.js
const webpack = require("webpack");
const WebpackBar = require("webpackbar");
module.exports = {
context: path.resolve(__dirname),
devtool: "source-map",
entry: "./entry.js",
output: {
filename: "./output.js",
path: path.resolve(__dirname),
},
plugins: [new WebpackBar()],
};
选项
名称
- 默认值：
webpack
名称。
颜色
- 默认值：
green
主色（可以是 HEX 值，例如 #xxyyzz，也可以是网页颜色，例如 green）。
性能分析
- 默认值:
false
启用性能分析器。
fancy
- 默认值：当不在 CI 或测试模式下时为
true。
启用条形进度报告器。
basic
- 默认值：当在最小化环境下运行时为
true。
启用一个简单的日志报告器（只记录开始和结束）。
reporter
注册一个自定义报告器。
reporters
- 默认值：
[]
注册一个自定义报告器数组。（与 reporter 相同，但为数组）
自定义报告器
Webpackbar 开箱即用地提供了一个漂亮的进度条。但你可能希望在其他地方显示进度或提供自己的进度条。
为此，你可以使用 reporter 和 reporters 选项提供一个或多个额外的报告器。
**注意：**如果你计划提供自己的报告器，请不要忘记将 fancy 和 basic 选项设置为 false 以避免冲突。
报告器应该是一个类的实例或普通对象，并包含用于特殊钩子（hook）的函数。无需实现所有函数，webpackbar 只会调用存在的函数。
简单日志记录器
{
start(context) {
// Called when (re)compile is started
},
change(context) {
// Called when a file changed on watch mode
},
update(context) {
// Called after each progress update
},
done(context) {
// Called when compile finished
},
progress(context) {
// Called when build progress updated
},
allDone(context) {
// Called when _all_ compiles finished
},
beforeAllDone(context) {
},
afterAllDone(context) {
},
}
context 是插件的引用。你可以使用 context.state 来访问状态。
context.state 的 schema
{
start, progress, message, details, request, hasErrors;
}