Repository files navigation

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

To begin, you'll need to installwebpackbar:

# ✨ Auto-detectnpx nypm install webpackbar# npmnpm install webpackbar# yarnyarn add webpackbar# pnpmpnpm install webpackbar# bunbun install webpackbar# denodeno install webpackbar

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

webpack.config.mjs

importWebpackBarfrom"webpackbar";exportdefault{entry:"./src/entry.js",plugins:[newWebpackBar({/* options */}),],};

For using withRspack, you can usewebpackbar/rspack (make sure@rspack/core peer dependency is installed).

rspack.config.mjs:

importWebpackBarfrom"webpackbar/rspack";exportdefault{entry:"./src/entry.js",plugins:[newWebpackBar({/* options */}),],};

• Default:webpack

Name.

• Default:green

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

• Default:false

Enable profiler.

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

Enable bars reporter.

• Default:true when running in minimal environments.

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

Register a custom reporter.

• Default:[]

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

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 usingreporter andreporters options.

NOTE: If you plan to provide your own reporter, don't forget to settingfancy andbasic 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:

constlogger={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 usecontext.state to access status.

Schema ofcontext.state:

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

MIT