Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/unjs/webpackbar
Elegant ProgressBar and Profiler for Webpack 3 , 4 and 5
https://github.com/unjs/webpackbar
bundler javascript node profile progressbar webpack
Last synced: 5 days ago
JSON representation
Elegant ProgressBar and Profiler for Webpack 3 , 4 and 5
- Host: GitHub
- URL: https://github.com/unjs/webpackbar
- Owner: unjs
- License: mit
- Created: 2018-03-24T12:11:46.000Z (almost 7 years ago)
- Default Branch: main
- Last Pushed: 2024-12-29T01:56:30.000Z (14 days ago)
- Last Synced: 2024-12-30T20:07:33.251Z (12 days ago)
- Topics: bundler, javascript, node, profile, progressbar, webpack
- Language: TypeScript
- Homepage:
- Size: 2.69 MB
- Stars: 2,075
- Watchers: 11
- Forks: 66
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome - unjs/webpackbar - Elegant ProgressBar and Profiler for Webpack 3 , 4 and 5 (TypeScript)
- awesome - webpackbar - Elegant ProgressBar and Profiler for Webpack 3 and 4 (JavaScript)
- awesome-github-star - webpackbar
- awesome-list - webpackbar
README
[](https://npmjs.com/package/webpackbar)
[](https://npm.chart.dev/webpackbar)
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`:
```sh
# ✨ 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`**
```js
import WebpackBar from "webpackbar";
export default {
entry: "./src/entry.js",
plugins: [
new WebpackBar({
/* options */
}),
],
};
```
For using with [Rspack](https://rspack.dev/), you can use `webpackbar/rspack` (make sure `@rspack/core` peer dependency is installed).
**`rspack.config.mjs`**:
```js
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:**
```js
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`:**
```js
{
start, progress, message, details, request, hasErrors;
}
```
License
[MIT](./LICENSE)
[standard-js-src]: https://flat.badgen.net/badge/code%20style/standard/green
[standard-js-href]: https://standardjs.com
[npm-version-src]: https://flat.badgen.net/npm/v/webpackbar/latest
[npm-version-href]: https://npmjs.com/package/webpackbar
[npm-downloads-src]: https://flat.badgen.net/npm/dm/webpackbar
[npm-downloads-href]: https://npmjs.com/package/webpackbar
[package-phobia-src]: https://flat.badgen.net/packagephobia/install/webpackbar
[package-phobia-href]: https://packagephobia.now.sh/result?p=webpackbar
[checks-src]: https://flat.badgen.net/github/checks/nuxt-contrib/webpackbar/master
[checks-href]: https://github.com/nuxt-contrib/webpackbar/actions