webpack-nicelog

2.3.1 verified Sat Apr 25 auth: no javascript maintenance

A webpack plugin that provides a prettier, colorful console output during and after webpack compilation. The current stable version is 2.3.1, with an older maintenance cadence (last update 2018). It replaces the default webpack build logs with a nicer formatted display, including optional progress bar, build time, and configurable colors and display name. Differentiators include simplicity and zero-config setup, though it is less maintained compared to alternatives like webpack-dashboard or friendly-errors-webpack-plugin. No dependencies required for basic use.

Common errors

error TypeError: WebpackNiceLog is not a constructor ↓

cause Incorrect import style - using named import instead of default.

fix

Use 'const WebpackNiceLog = require('webpack-nicelog')' or 'import WebpackNiceLog from 'webpack-nicelog''.

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

cause Package not installed or missing from node_modules.

fix

Run 'npm install webpack-nicelog --save-dev' or 'yarn add webpack-nicelog --dev'.

error TypeError: Invalid or unexpected token ↓

cause Using ES2015+ syntax (e.g., import/export) without appropriate Babel/Node version support.

fix

If using ESM, ensure Node >=12 and add 'type': 'module' to package.json, or use CommonJS require.

error TypeError: Cannot read property 'compilation' of undefined ↓

cause Plugin used in an incompatible webpack version (e.g., webpack 5 API changes).

fix

Upgrade to a compatible webpack version or use alternative logging plugin.

Warnings

deprecated Package has not been updated since 2018 and may not work with webpack 5+. Consider using webpack's built-in 'infrastructureLogging' options. ↓

fix Switch to webpack's 'infrastructureLogging.level' or use alternatives like 'webpack-dashboard'.

gotcha The 'clearScreen' option may cause flickering in some terminal environments (e.g., Windows CMD, CI systems). ↓

fix Set 'clearScreen: false' or ensure terminal compatibility.

gotcha When using webpack 5, the plugin might not suppress other log output correctly, resulting in duplicate messages. ↓

fix Set webpack's 'stats' configuration to minimal or use 'infrastructureLogging' to reduce noise.

deprecated The 'onDone' option callback signature uses the old webpack stats object format. In webpack 5, the stats object properties have changed. ↓

fix Update callback to handle stats object changes, such as using 'stats.toJson()'.

gotcha The 'color' option does not validate hex input; invalid strings may be silently ignored or cause errors. ↓

fix Provide a valid web color name or hex code (e.g., '#ff0000').

Install

npm install webpack-nicelog

yarn add webpack-nicelog

pnpm add webpack-nicelog

Imports

WebpackNiceLog

wrong

const { WebpackNiceLog } = require('webpack-nicelog')

correct

const WebpackNiceLog = require('webpack-nicelog')

The package exports a single constructor function, not a named export.

WebpackNiceLog
wrong
```
import { WebpackNiceLog } from 'webpack-nicelog'
```
correct
```
import WebpackNiceLog from 'webpack-nicelog'
```
ESM import works in Node >=12 with type:module or appropriate bundler config. The default export is the class.

Quickstart

Configures webpack-nicelog with a custom display name, green color, screen clearing, and build time display.

// webpack.config.js
const WebpackNiceLog = require('webpack-nicelog');

module.exports = {
  entry: './src/index.js',
  output: { filename: 'bundle.js', path: __dirname + '/dist' },
  plugins: [
    new WebpackNiceLog({
      name: 'MyApp',
      color: '#00ff00',
      clearScreen: true,
      skipBuildTime: false
    })
  ]
};