Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dominique-mueller/simple-progress-webpack-plugin
A simple progress plugin for Webpack.
https://github.com/dominique-mueller/simple-progress-webpack-plugin
logger plugin progress simple webpack
Last synced: 5 days ago
JSON representation
A simple progress plugin for Webpack.
- Host: GitHub
- URL: https://github.com/dominique-mueller/simple-progress-webpack-plugin
- Owner: dominique-mueller
- License: mit
- Created: 2017-04-08T15:05:32.000Z (over 7 years ago)
- Default Branch: develop
- Last Pushed: 2024-09-14T04:35:03.000Z (4 months ago)
- Last Synced: 2024-10-12T08:23:57.183Z (3 months ago)
- Topics: logger, plugin, progress, simple, webpack
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/simple-progress-webpack-plugin
- Size: 2.03 MB
- Stars: 64
- Watchers: 2
- Forks: 16
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# simple-progress-webpack-plugin
**A simple progress plugin for [Webpack](https://webpack.js.org/).**
## What it does
**simple-progress-webpack-plugin** is a plugin for **[Webpack](https://webpack.js.org/)**. 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](https://github.com/features/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
```
### 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:
```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',
}),
];
```
### Options
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.
#### `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](https://github.com/angular/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!
#### `simple`
The `simple` logger prints each build step, omitting further details. It's simply simple!
#### `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!
#### `expanded`
The `expanded` logger is pretty similar to the `compact` logger, but prints every sub-step into its own separate line.
#### `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).
## Similar / related projects
- **[Progress Bar Webpack Plugin](https://github.com/clessg/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](https://github.com/ZSkycat/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](https://github.com/geowarin/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!