{"id":20836,"library":"webpack-stats-report","title":"Webpack Stats Report","description":"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.","status":"active","version":"2.0.6","language":"javascript","source_language":"en","source_url":"https://github.com/cenfun/webpack-stats-report","tags":["javascript"],"install":[{"cmd":"npm install webpack-stats-report","lang":"bash","label":"npm"},{"cmd":"yarn add webpack-stats-report","lang":"bash","label":"yarn"},{"cmd":"pnpm add webpack-stats-report","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Named export – default require will return the whole module object, not the class.","wrong":"const StatsReportPlugin = require('webpack-stats-report')","symbol":"StatsReportPlugin","correct":"const { StatsReportPlugin } = require('webpack-stats-report')"},{"note":"Package uses CommonJS; ESM imports may not work in Node <12 or without 'type':'module'.","wrong":"import { StatsReportGenerator } from 'webpack-stats-report'","symbol":"StatsReportGenerator","correct":"const { StatsReportGenerator } = require('webpack-stats-report')"},{"note":"Default import is the module object, not the class. Use named import for the plugin.","wrong":"import StatsReportPlugin from 'webpack-stats-report'","symbol":"StatsReportPlugin","correct":"import { StatsReportPlugin } from 'webpack-stats-report'"}],"quickstart":{"code":"const { StatsReportPlugin } = require('webpack-stats-report');\n\nmodule.exports = {\n  // ... other webpack config\n  plugins: [\n    new StatsReportPlugin({\n      title: 'My Bundle Report',\n      output: './reports/stats-report.html',\n      gzipSize: true,\n      outputStatsJson: './reports/stats.json'\n    })\n  ]\n};","lang":"javascript","description":"Minimal Webpack config to generate a stats report HTML file with gzip sizes. Shows the plugin import and basic options."},"warnings":[{"fix":"Ensure the stats object passed to StatsReportGenerator has source: true, or it will silently omit gzip sizes.","message":"When using gzipSize: true, Webpack stats must include the 'source' property – stats.toJson({ source: true }).","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Use named destructuring: const { StatsReportPlugin } = require('webpack-stats-report')","message":"The default import (require('webpack-stats-report')) returns the entire module object, not StatsReportPlugin or StatsReportGenerator.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Use require() in Node <12; or ensure 'type':'module' in package.json and use import {} from syntax.","message":"The package uses CommonJS (require). Using ES import syntax may fail in older Node versions or when 'type':'module' is not set.","severity":"gotcha","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Use const { StatsReportPlugin } = require('webpack-stats-report');","cause":"Default import of the module object instead of named import.","error":"TypeError: StatsReportPlugin is not a constructor"},{"fix":"When calling stats.toJson(), pass { source: true }.","cause":"Stats JSON missing 'source' property.","error":"gzip size shows 0 B even though assets have content"},{"fix":"Use const { StatsReportGenerator } = require('webpack-stats-report');","cause":"Incorrect import: using require('webpack-stats-report') and then calling it as StatsReportGenerator().","error":"TypeError: StatsReportGenerator is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}