webpack-shower

It gives you the ability to remove annoying Webpack outputs and organize, filter and prioritize those reports that we need.

Installation

npm install webpack-shower --save-dev

What is in it for me?

We all know that Webpack output is cool enough but we can turn that huge data to something useful like this:

With Webpack-Shower you can remove those stats that are repetitive, annoying and noisy.

Configuration

First you need to silent default Webpack output like below

// add to webpack.config.js
stats: {
    all: false
}

Second add the Webpack-Shower plugin to your Webpack configuration file

const WebpackShower = require('webpack-shower');
 
plugins: [new WebpackShower()];
 

Filtering Stats

To filter annoying stats and annoying outputs

plugins: [
  new WebpackShower({
      assetsToFilter: [
        '*.img', // filter based extension
        'hi.png', // string
        '/[h]/g' // passing regex
      ],
  })
]

available options are :

• modulesToFilter
• assetsToFilter
• warningsToFilter
• errorsToFilter
• entrypointsToFilter

Sorting Stats

You can sort assets and modules based on their size. In default mode, Webpack-Shower doesn't sort assets and modules.

plugins: [
  new WebpackShower({
      sortAssets: true,
      sortModules: true,
  });
]

Modes

There are different modes to use. In default mode, webpack-shower use normal mode. If you want to use webpack-shower for reporting in other environments like Jenkins and etc it is better to set mode: 'table'.

plugins: [
  new WebpackShower({
    mode: 'table'
  });
]