Registry / devops / webpack-visualizer-plugin

webpack-visualizer-plugin

library0.1.11jsnpmunverified

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.

devops

npm install webpack-visualizer-plugin

github ↗package ↗

INSTALL

IMPORT

SIG · WEBPACK-VISUALIZER

webpack-visualizer-plugin

devopsjavascriptv0.1.11

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

✓ const Visualizer = require('webpack-visualizer-plugin');

✗ import Visualizer from '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({...})

✓ plugins: [new Visualizer({ filename: './stats.html' })]

✗ plugins: [new Visualizer().filename('./stats.html')]

The constructor accepts an options object with 'filename' property. Do not chain methods.

Visualizer

✓ const { Visualizer } = require('webpack-visualizer-plugin');

✗ const Visualizer = require('webpack-visualizer-plugin').Visualizer;

The module exports the constructor directly, not as a named export. Using destructuring may work in some environments but is not guaranteed.

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

Debug

Known issues

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

affects: >=0

gotchaWorks 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+.

affects: >=0

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

affects: >=0

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

affects: >=0

Errors

Common errors & fixes

Cannot find module 'webpack-visualizer-plugin'

Package not installed or not in node_modules.

fix

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

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

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

Error: webpack-visualizer-plugin: No options passed

Plugin instantiated without options object, or options are undefined.

fix

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

Upgrade

Version history

0.1.11latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

7 hits · last 30 days

node

Resources

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

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