webpack-stylish

0.1.8 verified Sat Apr 25 auth: no javascript maintenance

A stylish, opinionated reporter for webpack that replaces the default build output with a visually appealing, easy-to-read format. Version 0.1.8 supports webpack 2, 3, and 4. It ignores the stats config and works best with a single instance for MultiCompiler setups. Requires Node >=6. No options; opinionated defaults. Compared to alternatives like webpack-dashboard or friendly-errors-webpack-plugin, it focuses purely on output aesthetics with minimal configuration.

Common errors

error Error: Cannot find module 'webpack-stylish' ↓

cause Package not installed or incorrect import path.

fix

Run npm install webpack-stylish --save-dev and ensure require path matches.

error TypeError: Stylish is not a constructor ↓

cause Using ESM import syntax on a CommonJS module.

fix

Use const Stylish = require('webpack-stylish'); instead of import.

error Duplicate output shown in terminal ↓

cause Using webpack-cli without setting stats: 'none', or multiple instances per MultiCompiler.

fix

Add stats: 'none' to config, and share a single Stylish instance across all compiler configs.

Warnings

gotcha webpack-stylish ignores the `stats` config property entirely. ↓

fix Do not set `stats` in webpack config; if using webpack-cli, set `stats: 'none'` to avoid duplicate output.

breaking Requires webpack 2, 3, or 4; not compatible with webpack 5. ↓

fix Upgrade to a webpack 5 compatible alternative or stick with webpack 4.

gotcha Some loaders/plugins (e.g., stylelint-webpack-plugin) push multiple errors as one, causing wonky output. ↓

fix Use a single shared instance for MultiCompiler; otherwise duplicate output.

breaking Node.js version <6 is not supported. ↓

fix Upgrade Node.js to >=6.

Install

npm install webpack-stylish

yarn add webpack-stylish

pnpm add webpack-stylish

Imports

default

wrong

import Stylish from 'webpack-stylish';

correct

const Stylish = require('webpack-stylish');

Package does not ship ESM; use CommonJS require.

default (ESM)

wrong

import Stylish from 'webpack-stylish';

correct

const Stylish = require('webpack-stylish');

No ESM export; must use require.

instance usage
```
new Stylish()
```
Constructor returns a plugin instance. No options.

Quickstart

Basic webpack config with webpack-stylish plugin replacing default stats output.

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(),
  ],
};