A simple progress plugin for Webpack.

Downloads in past


64122.0.02 years ago6 years agoMinified + gzip package size for simple-progress-webpack-plugin in KB


A simple progress plugin for Webpack, coming with four different logging output formats.

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: ```bash npm install simple-progress-webpack-plugin --save-dev ```


  • 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: ```js 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: ```js plugins: new SimpleProgressWebpackPlugin({
format: 'compact',
; ```


The following options exist, all of them totally optional: | Option | Description | | -------- | --------------------------------------------------------------------------------------------------- | | color | Use colorized console output (might not be available on some CI systems)
→ Default value: true | | format | Logging output format
→ Default value: compact | | name | Name 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.


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


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


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


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

Similar / related projects

However, instead of just logging out colored text it uses an animated progress bar. Perfect for anyone who likes bars more than stupid text! 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. Progress Bar Webpack Plugin described above. It gives developer a cleaner, more detailed screen once the build has finished. Definitely worth checking out!