A simple progress plugin for Webpack.
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).
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- simple-progress-webpack-plugin requires NodeJS 12 (or higher) to be installed
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()];
}To customize the plugin, pass options to the constructor of the plugin:
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 ... |
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!
The simple logger prints each build step, omitting further details. It's simply simple!
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!
The expanded logger is pretty similar to the compact logger, but prints every sub-step into its own separate line.
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).
- 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!