@kkt/simple-progress-webpack-plugin

1.1.5 • Public • Published

simple-progress-webpack-plugin

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

npm version dependency status dev dependency status travis ci build status Known Vulnerabilities license


What it does

simple-progress-webpack-plugin is a plugin for Webpack 2. 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 Travis CI).


How to install

To get the simple-progress-webpack-plugin via npm, simply add it as a new dev-dependency to your package.json file and run npm install. Alternatively, run the following command:

npm install @kkt/simple-progress-webpack-plugin --save-dev

How to use

First, import the plugin into your Webpack configuration file:

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

Then, instantiate it within the list of plugins:

plugins: [
  new SimpleProgressWebpackPlugin()
]

How to customize

To customize the plugin, simply pass the options in the constructor of the plugin:

plugins: [
  new SimpleProgressWebpackPlugin( { // Default options
    format: 'compact'
  } )
]

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.


name

  • Default: Webpack

Name.


minimal

The minimal logger prints everything into a single line, constantly updated during 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! This logger format is not recommended for being used within a CI environment.

Minimal Logger Preview GIF


compact

The compact logger is the default logger. It shows 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). This logger format is not recommended for being used within a CI environment.

Compact Logger Preview GIF


expanded

The expanded / extended logger is pretty similar to the compact logger, but prints every sub-step into its own separate line. This logger format can also be used within a CI environment.

Expanded Logger Preview GIF


verbose

The verbose / debug 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). This logger format can also be used within a CI environment.

Verbose Logger Preview GIF


Further recommendations

  • 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!

Idea Space

  • More log output formats
  • Extended log output configurability

You can't wait for one of those features, or have some new ideas?
Simply create an issue. Also, contributions to this project are highly welcomed at all time!


Creator

Dominique Müller

Package Sidebar

Install

npm i @kkt/simple-progress-webpack-plugin

Weekly Downloads

1

Version

1.1.5

License

MIT

Unpacked Size

1.69 MB

Total Files

16

Last publish

Collaborators

  • uiwjs
  • wcjiang