webpackbar

What is webpackbar?

webpackbar is a progress bar plugin for Webpack that provides a visual indication of the build process. It helps developers understand the progress of their Webpack builds by displaying a progress bar in the terminal or console.

What are webpackbar's main functionalities?

Basic Progress Bar

This feature adds a basic progress bar to your Webpack build process. By including the WebpackBar plugin in your Webpack configuration, you can see a progress bar in the terminal that indicates the build progress.

const WebpackBar = require('webpackbar');

module.exports = {
  plugins: [
    new WebpackBar()
  ]
};

Customizing the Progress Bar

This feature allows you to customize the progress bar by setting options such as the name and color. The 'name' option sets a custom name for the progress bar, and the 'color' option sets a custom color.

const WebpackBar = require('webpackbar');

module.exports = {
  plugins: [
    new WebpackBar({
      name: 'MyApp',
      color: '#f56be2'
    })
  ]
};

Profile Mode

This feature enables profile mode, which provides detailed timing information about the build process. By setting the 'profile' option to true, you can get insights into the time taken by different parts of the build.

const WebpackBar = require('webpackbar');

module.exports = {
  plugins: [
    new WebpackBar({
      profile: true
    })
  ]
};

Other packages similar to webpackbar

progress-bar-webpack-plugin

progress-bar-webpack-plugin is another plugin that provides a progress bar for Webpack builds. It is similar to webpackbar in that it displays a progress bar in the terminal, but it may not offer as many customization options as webpackbar.

webpack-dashboard

webpack-dashboard is a plugin that provides a more comprehensive dashboard for Webpack builds, including a progress bar, build statistics, and error reporting. It offers more features compared to webpackbar but may be more complex to set up.

webpack-build-notifier

webpack-build-notifier is a plugin that provides desktop notifications for Webpack build events. While it does not provide a progress bar, it offers a different way to stay informed about the build process by sending notifications when builds start, succeed, or fail.

README

Elegant ProgressBar and Profiler for [Webpack](https://webpack.js.org/) and [Rspack](https://rspack.dev/).

✔ 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:

# ✨ Auto-detect
npx nypm install webpackbar

# npm
npm install webpackbar

# yarn
yarn add webpackbar

# pnpm
pnpm install webpackbar

# bun
bun install webpackbar

# deno
deno install webpackbar

Then add the reporter as a plugin to your webpack config (make sure webpack peer dependency is installed).

webpack.config.mjs

import WebpackBar from "webpackbar";

export default {
  entry: "./src/entry.js",
  plugins: [
    new WebpackBar({
      /* options */
    }),
  ],
};

For using with Rspack, you can use webpackbar/rspack (make sure @rspack/core peer dependency is installed).

rspack.config.mjs:

import WebpackBar from "webpackbar/rspack";

export default {
  entry: "./src/entry.js",
  plugins: [
    new WebpackBar({
      /* options */
    }),
  ],
};

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:

const 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

Changelog

v7.0.0

compare changes

🚀 Enhancements

• Support rspack (#149)

🩹 Fixes

• Missing compilation completion information in concurrent mode. #81 (#141, #81)

💅 Refactors

• Update repo (379d628)
• Uses ansis for color support (#145)
• Use named export of markdown-table (c0be4d7)

📦 Build

• Inline esm-only dependencies (e58277f)

🏡 Chore

• Migrate to vitest (f8435c1)
• Sort package.json (9e1ce59)
• Update lockfile (1d99de1)

❤️ Contributors

• Pooya Parsa (@pi0)
• 风中追风 (@hangaoke1)
• Sukka [e-mail]