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: 3 months 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 (about 6 years ago)
- Default Branch: main
- Last Pushed: 2024-03-20T21:18:20.000Z (3 months ago)
- Last Synced: 2024-03-21T21:22:53.325Z (3 months ago)
- Topics: bundler, javascript, node, profile, progressbar, webpack
- Language: TypeScript
- Homepage:
- Size: 2.41 MB
- Stars: 2,043
- Watchers: 13
- Forks: 67
- Open Issues: 34
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Lists
- awesome-bookmarks - **webpackbar**
- awesome-list - webpackbar
- awesome-stars - unjs/webpackbar - Elegant ProgressBar and Profiler for Webpack 3 , 4 and 5 (TypeScript)
- awesome - unjs/webpackbar - Elegant ProgressBar and Profiler for Webpack 3 , 4 and 5 (TypeScript)
- awesome - unjs/webpackbar - Elegant ProgressBar and Profiler for Webpack 3 , 4 and 5 (TypeScript)
- fuck-awesome-stars - unjs/webpackbar - Elegant ProgressBar and Profiler for Webpack 3 , 4 and 5 (TypeScript)
- awesome-github-star - webpackbar
- awesome-stars - webpackbar
README
[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![package phobia][package-phobia-src]][package-phobia-href]
[![github actions][checks-src]][checks-href]
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:
```bash
npm install webpackbar -D
```
Using yarn:
```bash
yarn add webpackbar -D
```
Then add the reporter as a plugin to your webpack config.
**webpack.config.js**
```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:**
```js
{
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