{"id":20853,"library":"webpack-visualizer-plugin2","title":"Webpack Visualizer 2","description":"A webpack plugin that generates an interactive treemap visualization of your bundle's composition, showing which modules contribute to chunk sizes. Current stable version is 2.0.0, specifically forked from the abandoned webpack-visualizer-plugin to add webpack 5 support. Releases are sporadic. Differentiators: simple setup, outputs a standalone HTML file, and provides granular module-level breakdown within chunks. Alternative tools like webpack-bundle-analyzer offer similar functionality with more interactive features.","status":"active","version":"2.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/jonamat/webpack-visualizer","tags":["javascript","webpack","statistics","bundle","chunks"],"install":[{"cmd":"npm install webpack-visualizer-plugin2","lang":"bash","label":"npm"},{"cmd":"yarn add webpack-visualizer-plugin2","lang":"bash","label":"yarn"},{"cmd":"pnpm add webpack-visualizer-plugin2","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency; designed as a webpack plugin","package":"webpack","optional":false}],"imports":[{"note":"Package is ESM-only. CommonJS require is not supported.","wrong":"const Visualizer = require('webpack-visualizer-plugin2')","symbol":"Visualizer","correct":"import Visualizer from 'webpack-visualizer-plugin2'"},{"note":"Only default export; no named export exists. Type import is not needed as default export is a class.","wrong":"import { Visualizer } from 'webpack-visualizer-plugin2'","symbol":"Visualizer (type)","correct":"import type { Visualizer } from 'webpack-visualizer-plugin2'"},{"note":"If using CommonJS with ESM package, must access .default property.","wrong":"const Visualizer = require('webpack-visualizer-plugin2')","symbol":"Visualizer (CommonJS fallback)","correct":"const Visualizer = require('webpack-visualizer-plugin2').default"}],"quickstart":{"code":"// webpack.config.js\nimport Visualizer from 'webpack-visualizer-plugin2';\n\nexport default {\n  plugins: [\n    new Visualizer({\n      filename: path.join('..', 'stats', 'statistics.html'),\n      throwOnError: true,\n    }, {\n      chunkModules: true\n    }),\n  ],\n};","lang":"javascript","description":"Shows ESM import and plugin instantiation with output filename and chunk modules option."},"warnings":[{"fix":"Use path.join('..', 'stats', 'statistics.html') if output.path is 'dist', to place stats in project root/stats.","message":"The filename option is relative to webpack's output path, not the project root.","severity":"gotcha","affected_versions":"all"},{"fix":"Use webpack-visualizer-plugin (v1) for webpack 4 or migrate to webpack 5.","message":"Plugin only supports webpack 5; does not work with webpack 4 or older.","severity":"deprecated","affected_versions":"all"},{"fix":"Ensure Node.js version is at least 5; no other concerns.","message":"Requires Node.js >= 5.0.0 (engines field) but modern Node versions are fine.","severity":"gotcha","affected_versions":"all"},{"fix":"Check updated options: first argument is an object with filename and throwOnError; second is chunkModules.","message":"Forked from original plugin, breaking changes in options structure.","severity":"breaking","affected_versions":">=1.0.0 <2.0.0"},{"fix":"Consider alternative tools like webpack-bundle-analyzer for large projects.","message":"Output HTML file may be large for projects with many modules; can slow down build.","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"npm install webpack-visualizer-plugin2 --save-dev","cause":"Package not installed or missing from node_modules.","error":"Error: Cannot find module 'webpack-visualizer-plugin2'"},{"fix":"Use const Visualizer = require('webpack-visualizer-plugin2').default; or switch to ESM import.","cause":"Using CommonJS require without accessing .default.","error":"TypeError: Visualizer is not a constructor"},{"fix":"Upgrade webpack to version 5 or use the original webpack-visualizer-plugin.","cause":"Plugin only works with webpack 5.","error":"Error: webpack version 4.x.x is not supported."},{"fix":"Ensure webpack config excludes the output stats path from being processed by loaders.","cause":"Plugin's generated HTML file may be interpreted as a module if not excluded from loaders.","error":"Module parse failed: Unexpected token"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}