Webpack Visualizer Plugin

0.1.11 verified Sat Apr 25 auth: no javascript deprecated

Webpack plugin to generate an interactive treemap visualization of your bundle composition. Version 0.1.11 is the latest and last release, with no updates since 2017. The plugin outputs a standalone HTML file (stats.html) that shows which modules consume the most space and identifies duplicates. Unlike webpack-bundle-analyzer (which offers more features and active maintenance), this plugin is minimal and no longer actively developed. It works with Webpack 1.x/2.x, but compatibility with Webpack 3+ is uncertain.

Common errors

error Cannot find module 'webpack-visualizer-plugin' ↓

cause Package not installed or not in node_modules.

fix

Run: npm install --save-dev webpack-visualizer-plugin

error const Visualizer = require('webpack-visualizer-plugin'); // Incorrect import ↓

cause Using wrong import syntax (e.g., destructuring a non-exported member).

error Error: webpack-visualizer-plugin: No options passed ↓

cause Plugin instantiated without options object, or options are undefined.

fix

Use: new Visualizer({}) at minimum, even if empty object.

Warnings

deprecated This package is no longer maintained. Use webpack-bundle-analyzer instead. ↓

fix Replace with webpack-bundle-analyzer: npm install --save-dev webpack-bundle-analyzer and update plugin import/usage.

gotcha Works only with Webpack 1.x/2.x. May fail silently or not generate output with Webpack 3+. ↓

fix Check Webpack version; consider switching to webpack-bundle-analyzer for Webpack 4+.

gotcha The output HTML file is large and can cause browser performance issues with big bundles. ↓

fix Use alternatives like source-map-explorer for simpler visualizations or webpack-bundle-analyzer with static mode.

gotcha The plugin does not respect the output.publicPath; stats.html is always relative to output.path. ↓

fix Manually move stats.html or set output.path accordingly.

Install

npm install webpack-visualizer-plugin

yarn add webpack-visualizer-plugin

pnpm add webpack-visualizer-plugin

Imports

Visualizer
wrong
```
import Visualizer from 'webpack-visualizer-plugin';
```
correct
```
const Visualizer = require('webpack-visualizer-plugin');
```
This plugin does not export ES modules; use CommonJS require. If using Webpack 2+ and ES module syntax, you may need to use default import syntax: import Visualizer from 'webpack-visualizer-plugin' (which transpiles under the hood).
new Visualizer({...})
wrong
```
plugins: [new Visualizer().filename('./stats.html')]
```
correct
```
plugins: [new Visualizer({ filename: './stats.html' })]
```
The constructor accepts an options object with 'filename' property. Do not chain methods.
Visualizer
wrong
```
const Visualizer = require('webpack-visualizer-plugin').Visualizer;
```
correct
```
const { Visualizer } = require('webpack-visualizer-plugin');
```
The module exports the constructor directly, not as a named export. Using destructuring may work in some environments but is not guaranteed.

Quickstart

Add the Visualizer plugin to a webpack configuration. Build outputs statistics.html along with bundle.js. Open stats.html in browser to see treemap.

// webpack.config.js
const path = require('path');
const Visualizer = require('webpack-visualizer-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  plugins: [
    new Visualizer({
      filename: './statistics.html'
    })
  ]
};