anthrax3 / webpackbar

Elegant ProgressBar and Profiler for Webpack 3 and 4

Elegant ProgressBar and Profiler for Webpack

✔ Display elegant progress bar while building or watch

✔ Support of multiply concurrent builds (useful for SSR)

✔ Pretty print filename and loaders

✔ Windows compatible

✔ Customizable

✔ 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

Display name

color

• Default: green

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

profile

• Default: false

Enable profiler.

stream

• Default: process.stderr

Output stream.

minimal

• Default: Auto enabled on CI, non-TTY and test environments

Hide progress bar and only show Compiling/Compiled messages.

compiledIn

• Default: true

Show Compiled in message after build.

done

• Type: Function(sharedState, ctx)

A function that will be called when all builds are finished.

Maintainers

Pooya Parsa