webpack-stylish

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 webpack-stylish:

$ npm install webpack-stylish --save-dev

Then add the reporter as a plugin to your webpack 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()
  ]
};

MultiCompilers

If you use a config that consists of an array of configs (aka. MultiCompiler), 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

Because webpack-cli reads the stats config property before the compilation starts, it tends to go on doing it's own thing. When using webpack-stylish 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.

Options

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 stats config property.

Gotchas

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

Contributing

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

nason / webpack-stylish