Elegant ProgressBar and Profiler for Webpack 3 and 4
Clone or download

README.md

npm deps test test-windows coverage

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

✔ 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