Registry / devops / webpack-visualizer-plugin2

webpack-visualizer-plugin2

library2.0.0jsnpmunverified

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.

devops

npm install webpack-visualizer-plugin2

github ↗package ↗

INSTALL

IMPORT

SIG · WEBPACK-VISUALIZER

webpack-visualizer-plugin2

devopsjavascriptv2.0.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Visualizer

✓ import Visualizer from 'webpack-visualizer-plugin2'

✗ const Visualizer = require('webpack-visualizer-plugin2')

Package is ESM-only. CommonJS require is not supported.

Visualizer (type)

✓ import type { Visualizer } from 'webpack-visualizer-plugin2'

✗ import { Visualizer } from 'webpack-visualizer-plugin2'

Only default export; no named export exists. Type import is not needed as default export is a class.

Visualizer (CommonJS fallback)

✓ const Visualizer = require('webpack-visualizer-plugin2').default

✗ const Visualizer = require('webpack-visualizer-plugin2')

If using CommonJS with ESM package, must access .default property.

Shows ESM import and plugin instantiation with output filename and chunk modules option.

// webpack.config.js import Visualizer from 'webpack-visualizer-plugin2'; export default { plugins: [ new Visualizer({ filename: path.join('..', 'stats', 'statistics.html'), throwOnError: true, }, { chunkModules: true }), ], };

Debug

Known issues

gotchaThe filename option is relative to webpack's output path, not the project root.

fix

Use path.join('..', 'stats', 'statistics.html') if output.path is 'dist', to place stats in project root/stats.

affects: all

deprecatedPlugin only supports webpack 5; does not work with webpack 4 or older.

fix

Use webpack-visualizer-plugin (v1) for webpack 4 or migrate to webpack 5.

affects: all

gotchaRequires Node.js >= 5.0.0 (engines field) but modern Node versions are fine.

fix

Ensure Node.js version is at least 5; no other concerns.

affects: all

breakingForked from original plugin, breaking changes in options structure.

fix

Check updated options: first argument is an object with filename and throwOnError; second is chunkModules.

affects: >=1.0.0 <2.0.0

gotchaOutput HTML file may be large for projects with many modules; can slow down build.

fix

Consider alternative tools like webpack-bundle-analyzer for large projects.

affects: all

Errors

Common errors & fixes

Error: Cannot find module 'webpack-visualizer-plugin2'

Package not installed or missing from node_modules.

fix

npm install webpack-visualizer-plugin2 --save-dev

TypeError: Visualizer is not a constructor

Using CommonJS require without accessing .default.

fix

Use const Visualizer = require('webpack-visualizer-plugin2').default; or switch to ESM import.

Error: webpack version 4.x.x is not supported.

Plugin only works with webpack 5.

fix

Upgrade webpack to version 5 or use the original webpack-visualizer-plugin.

Module parse failed: Unexpected token

Plugin's generated HTML file may be interpreted as a module if not excluded from loaders.

fix

Ensure webpack config excludes the output stats path from being processed by loaders.

Upgrade

Version history

2.0.0latest on npm

Audit

Dependencies

webpackrequiredpeer dependency; designed as a webpack plugin

Agent activity

14 hits · last 30 days

node

Resources

githubhttps://github.com/jonamat/webpack-visualizer ↗

packagehttps://www.npmjs.com/package/webpack-visualizer-plugin2 ↗