spw

simple-progress-webpack-plugin

A simple progress plugin for Webpack.

Showing:

Popularity

Downloads/wk

36.7K

GitHub Stars

59

Maintenance

Last Commit

5mos ago

Contributors

5

Package

Dependencies

3

Size (min+gzip)

16.1KB

License

MIT

Type Definitions

Built-In

Tree-Shakeable

Yes?

Categories

Readme

simple-progress-webpack-plugin

A simple progress plugin for Webpack.



What it does

simple-progress-webpack-plugin is a plugin for Webpack. It improves the overall Webpack Developer Experience by showing a much more detailed and also visually appealing build progress in the command line. Four different output formats are available, from which two are ready to be used in a CI environment (such as GitHub Actions).




How to install

You can get the simple-progress-webpack-plugin via npm by adding it as a new dev-dependency to your package.json file and running npm install. Alternatively, run the following command:

npm install simple-progress-webpack-plugin --save-dev

Requirements

  • simple-progress-webpack-plugin requires NodeJS 12 (or higher) to be installed




How to use

To use the plugin, import it into your Webpack configuration file and instantiate it within the list of plugins:

const SimpleProgressWebpackPlugin = require('simple-progress-webpack-plugin');

const webpackConfig = {
  plugins: [new SimpleProgressWebpackPlugin()];
}




How to customize

To customize the plugin, pass options to the constructor of the plugin:

plugins: [
  new SimpleProgressWebpackPlugin({
    format: 'compact',
  }),
];

Options

The following options exist, all of them totally optional:

OptionDescription
colorUse colorized console output (might not be available on some CI systems)
→ Default value: true
formatLogging output format
→ Default value: compact
nameName of the build
→ Default value. Webpack: Starting ...

Logging Formats

The following is a list of available logging output formats. While compact is the default format, expanded is the recommended one for being used within a CI environment.

minimal

The minimal logger prints everything into a single line, constantly updated during the build. This makes it look pretty similar to what the Angular CLI outputs during build. So, if you're a minimalist, this is probably the right logger for you!

Probably not the best choice for your CI!

Minimal Logger Preview GIF

simple

The simple logger prints each build step, omitting further details. It's simply simple!

Simple Logger Preview GIF

compact (default)

The compact logger prints each build step with further details (such as the sub-progress and several sub-steps) while still not taking up too much space (thus the name compact).

Probably not the best choice for your CI!

Compact Logger Preview GIF

expanded

The expanded logger is pretty similar to the compact logger, but prints every sub-step into its own separate line.

Expanded Logger Preview GIF

verbose

The verbose logger logs everything. Like, everything! The full truth, every crucial detail Webpack has to offer. Best use it for debugging purposes (or for finding bugs in this plugin).

Verbose Logger Preview GIF




  • Progress Bar Webpack Plugin is an alternative progress plugin for webpack. However, instead of just logging out colored text it uses an animated progress bar. Perfect for anyone who likes bars more than stupid text!
  • Ghost Progress Webpack Plugin is a no side effects progress plugin for webpack. It can output progress and does not affect the output log of other tools, and is more suitable for use in a development server environment.
  • Friendly Errors Webpack Plugin complements either this plugin or the Progress Bar Webpack Plugin described above. It gives developer a cleaner, more detailed screen once the build has finished. Definitely worth checking out!

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial