Need help with webpack-stylish?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

204 Stars 19 Forks MIT License 21 Commits 0 Opened issues


A stylish, optionated reporter for webpack

Services available


Need anything else?

Contributors list

npm node deps tests chat


ℹ️ DEPRECATION. Reporters moved into webpack-cli as feature. The issue for webpack-cli

A stylish, opinionated reporter for webpack.

Compared to the default output:

Let's be honest, the default build output for webpack wouldn't exactly hang in the Louvre. Great tools should have beautiful output. This reporter is specifically structured to present common, important¹ information about a build in a visually pleasing and easy-to-read format and style.

¹ subjective, but based on shared experiences.

Getting Started

To begin, you'll need to install

$ npm install webpack-stylish --save-dev

Then add the reporter as a plugin to your

config. For example:
const path = require('path');
const webpack = require('webpack');
const Stylish = require('webpack-stylish');

module.exports = { context: path.resolve(__dirname), devtool: 'source-map', entry: './entry.js', output: { filename: './output.js', path: path.resolve(__dirname) }, plugins: [ new webpack.NamedModulesPlugin(), new Stylish() ] };


If you use a config that consists of an array of configs (aka.

), we recommend using a single instance of the reporter across all configs. eg;
const StylishReporter = require('webpack-stylish');
const stylish = new StylishReporter();

module.exports = [ { ... plugins: [ new webpack.NamedModulesPlugin(), stylish ] }, { ... plugins: [ new webpack.NamedModulesPlugin(), stylish ] } ];

Internally, the reporter will keep track of the compiler instances it's been added to and will display summary information for all compilers. If you don't use a single, shared instance of the reporter, you're going to see a lot of duplicate information, and that'd just be silly.

Webpack CLI


reads the
config property before the compilation starts, it tends to go on doing it's own thing. When using
in a config that you're running via the CLI, you need to add
stats: 'none'
to the config. Otherwise you'll see both this reporter's output, and the CLI's.


There are none! If you're in need of fine-grained control of webpack's build information out, please don't use this reporter. Instead, you can fine-tune webpack's default output via the

config property.



reporter will straight up ignore the
property in your
config, if you have one set. (This reporter is opinionated!).

Naughty Loaders and Plugins

Some loaders and plugins are going to need a spanking. For they have been naughty and are pushing wonky formatting and multiple-errors-packed-into-one errors onto a compliation's error and/or warning stacks.

does it's best to compensate for that, but be aware that some plugins will cause some wonky output. For example,
is guilty of this.

It's impossible for us to test the world (aka. every plugin ever) so if you see something off, please open an issue and let us know. We'll either compensate further in the code here, or try to bring the offending plugin or loader into the light.


We welcome your contributions! Please have a read of for more information on how to get involved.



We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.