Webpack Stats Report

2.0.6 verified Sat Apr 25 auth: no javascript

Version 2.0.6 (active, monthly releases). Generates an HTML grid report from Webpack stats JSON, useful for visualizing bundle composition and size. Key differentiators: lightweight, no external dependencies, supports gzip size display, works both as a Webpack plugin and standalone Node API. Unlike webpack-bundle-analyzer, it produces a single static HTML file with grid layout.

Common errors

error TypeError: StatsReportPlugin is not a constructor ↓

cause Default import of the module object instead of named import.

fix

Use const { StatsReportPlugin } = require('webpack-stats-report');

error gzip size shows 0 B even though assets have content ↓

cause Stats JSON missing 'source' property.

fix

When calling stats.toJson(), pass { source: true }.

error TypeError: StatsReportGenerator is not a function ↓

cause Incorrect import: using require('webpack-stats-report') and then calling it as StatsReportGenerator().

fix

Use const { StatsReportGenerator } = require('webpack-stats-report');

Warnings

gotcha When using gzipSize: true, Webpack stats must include the 'source' property – stats.toJson({ source: true }). ↓

fix Ensure the stats object passed to StatsReportGenerator has source: true, or it will silently omit gzip sizes.

deprecated The default import (require('webpack-stats-report')) returns the entire module object, not StatsReportPlugin or StatsReportGenerator. ↓

fix Use named destructuring: const { StatsReportPlugin } = require('webpack-stats-report')

gotcha The package uses CommonJS (require). Using ES import syntax may fail in older Node versions or when 'type':'module' is not set. ↓

fix Use require() in Node <12; or ensure 'type':'module' in package.json and use import {} from syntax.

Install

npm install webpack-stats-report

yarn add webpack-stats-report

pnpm add webpack-stats-report

Imports

StatsReportPlugin

wrong

const StatsReportPlugin = require('webpack-stats-report')

correct

const { StatsReportPlugin } = require('webpack-stats-report')

Named export – default require will return the whole module object, not the class.

StatsReportGenerator

wrong

import { StatsReportGenerator } from 'webpack-stats-report'

correct

const { StatsReportGenerator } = require('webpack-stats-report')

Package uses CommonJS; ESM imports may not work in Node <12 or without 'type':'module'.

StatsReportPlugin

wrong

import StatsReportPlugin from 'webpack-stats-report'

correct

import { StatsReportPlugin } from 'webpack-stats-report'

Default import is the module object, not the class. Use named import for the plugin.

Quickstart

Minimal Webpack config to generate a stats report HTML file with gzip sizes. Shows the plugin import and basic options.

const { StatsReportPlugin } = require('webpack-stats-report');

module.exports = {
  // ... other webpack config
  plugins: [
    new StatsReportPlugin({
      title: 'My Bundle Report',
      output: './reports/stats-report.html',
      gzipSize: true,
      outputStatsJson: './reports/stats.json'
    })
  ]
};