1. webpackbar
Elegant ProgressBar and Profiler for Webpack
webpackbar
Package: webpackbar
Created by: unjs
Last modified: Mon, 19 Feb 2024 10:37:34 GMT
Version: 6.0.1
License: MIT
Downloads: 4,662,222
Repository: https://github.com/unjs/webpackbar

Install

npm install webpackbar
yarn add webpackbar

npm version
npm downloads
package phobia
github actions

Elegant ProgressBar and Profiler for Webpack

✔ Display elegant progress bar while building or watch

✔ Support of multiple concurrent builds (useful for SSR)

✔ Pretty print filename and loaders

✔ Windows compatible

Fully customizable using reporters

✔ Advanced build profiler


Multi progress bars



Build Profiler


Getting Started

To begin, you'll need to install webpackbar:

Using npm:

 npm install webpackbar -D

Using yarn:

 yarn add webpackbar -D

Then add the reporter as a plugin to your webpack config.

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()],
};

Options

name

  • Default: webpack

Name.

color

  • Default: green

Primary color (can be HEX like #xxyyzz or a web color like green).

profile

  • Default: false

Enable profiler.

fancy

  • Default: true when not in CI or testing mode.

Enable bars reporter.

basic

  • Default: true when running in minimal environments.

Enable a simple log reporter (only start and end).

reporter

Register a custom reporter.

reporters

  • Default: []

Register an Array of your custom reporters. (Same as reporter but array)

Custom Reporters

Webpackbar comes with a fancy progress-bar out of the box.
But you may want to show progress somewhere else or provide your own.

For this purpose, you can provide one or more extra reporters using reporter and reporters options.

NOTE: If you plan to provide your own reporter, don't forget to setting fancy and basic options to false to prevent conflicts.

A reporter should be instance of a class or plain object and functions for special hooks. It is not necessary to implement all functions, webpackbar only calls those that exists.

Simple logger:

 {
 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 is the reference to the plugin. You can use context.state to access status.

Schema of context.state:

 {
  start, progress, message, details, request, hasErrors;
}

License

MIT

RELATED POST

10 Must-Know Windows Shortcuts That Will Save You Time

10 Must-Know Windows Shortcuts That Will Save You Time

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Navigating AWS Networking: Essential Hacks for Smooth Operation

Navigating AWS Networking: Essential Hacks for Smooth Operation

Achieving Stunning Visuals with Unity's Global Illumination

Achieving Stunning Visuals with Unity's Global Illumination

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code