简介
WebpackBar 是一个能够实时展示 Webpack 构建进度的命令行工具，可以帮助我们更好地了解 Webpack 构建过程，并且在构建时间很长的情况下提升开发体验。
安装
使用 npm 进行安装：
npm install webpackbar --save-dev
配置
WebpackBar 的配置很简单，只需要在 Webpack 配置文件中引入并将其作为插件即可：
const WebpackBar = require('webpackbar');
module.exports = {
// ...
plugins: [new WebpackBar()],
// ...
};上述代码中，plugins 数组中加入了 WebpackBar 插件。
功能
WebpackBar 提供了许多有用的功能，可以优化 Webpack 构建过程，包括：
实时展示构建进度
WebpackBar 可以实时展示 Webpack 构建进度，包括正在构建的模块、剩余时间和构建速度等信息。这对于开发者来说非常有用，可以更好地了解构建过程。
颜色区分
WebpackBar 使用颜色区分不同的构建状态，比如绿色代表已经完成的模块，黄色代表正在编译的模块，红色代表出错的模块等等。这样可以让开发者更加直观地了解构建状态。
构建进度百分比
WebpackBar 可以实时展示构建进度百分比，让开发者知道当前 Webpack 构建的完成情况。
自定义输出格式
WebpackBar 支持自定义输出格式，可以根据自己的需求来调整输出格式，比如可以将构建信息输出到一个单独的文件中。
示例代码
以下是一个简单的 Webpack 配置文件，演示了如何使用 WebpackBar 插件：
-- -------------------- ---- -------
----- ---- - ----------------
----- ---------- - ----------------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- --------
--
-------- ---- --------------
--总结
WebpackBar 是一个非常有用的插件，可以帮助我们更好地了解 Webpack 构建过程，并提升开发体验。使用 WebpackBar 非常简单，只需要安装并在 Webpack 配置文件中引入即可。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/46380