{"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,"search_vec":"'2':3 '2.0.0':29 '5':42 'abandon':34 'add':40 'altern':64 'analyz':70 'breakdown':61 'bundl':15,69,81 'chunk':23,63,82 'composit':17 'contribut':21 'current':25 'differenti':47 'featur':77 'file':54 'fork':31 'function':73 'generat':8 'granular':57 'html':53 'interact':10,76 'javascript':78 'level':60 'like':66 'modul':20,59 'module-level':58 'offer':71 'output':50 'plugin':6,38 'provid':56 'releas':44 'setup':49 'show':18 'similar':72 'simpl':48 'size':24 'specif':30 'sporad':46 'stabl':26 'standalon':52 'statist':80 'support':43 'tool':65 'treemap':11 'version':27 'visual':2,12,37 'webpack':1,5,36,41,68,79 'webpack-bundle-analyz':67 'webpack-visualizer-plugin':35 'within':62","created_at":"2026-04-25T11:25:19.256715+00:00","updated_at":"2026-04-25T11:25:19.256715+00:00","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,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/jonamat/webpack-visualizer","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/webpack-visualizer-plugin2","openapi_spec":null,"status_page":null,"smithery":null,"categories":["devops"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-24","install_tag":null}}