Webpack Visualizer 2

2.0.0 verified Sat Apr 25 auth: no javascript

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.

Common errors

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

cause Package not installed or missing from node_modules.

fix

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

error TypeError: Visualizer is not a constructor ↓

cause Using CommonJS require without accessing .default.

fix

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

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

cause Plugin only works with webpack 5.

fix

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

error Module parse failed: Unexpected token ↓

cause 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.

Warnings

gotcha The 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.

deprecated Plugin 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.

gotcha Requires 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.

breaking Forked from original plugin, breaking changes in options structure. ↓

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

gotcha Output 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.

Install

npm install webpack-visualizer-plugin2

yarn add webpack-visualizer-plugin2

pnpm add webpack-visualizer-plugin2

Imports

Visualizer

wrong

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

correct

import Visualizer from 'webpack-visualizer-plugin2'

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

Visualizer (type)
wrong
```
import { Visualizer } from 'webpack-visualizer-plugin2'
```
correct
```
import type { 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)

wrong

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

correct

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

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

Quickstart

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
    }),
  ],
};