{"id":20852,"library":"webpack-visualizer-plugin","title":"Webpack Visualizer Plugin","description":"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.","status":"deprecated","version":"0.1.11","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/chrisbateman/webpack-visualizer","tags":["javascript"],"install":[{"cmd":"npm install webpack-visualizer-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add webpack-visualizer-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add webpack-visualizer-plugin","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"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).","wrong":"import Visualizer from 'webpack-visualizer-plugin';","symbol":"Visualizer","correct":"const Visualizer = require('webpack-visualizer-plugin');"},{"note":"The constructor accepts an options object with 'filename' property. Do not chain methods.","wrong":"plugins: [new Visualizer().filename('./stats.html')]","symbol":"new Visualizer({...})","correct":"plugins: [new Visualizer({ filename: './stats.html' })]"},{"note":"The module exports the constructor directly, not as a named export. Using destructuring may work in some environments but is not guaranteed.","wrong":"const Visualizer = require('webpack-visualizer-plugin').Visualizer;","symbol":"Visualizer","correct":"const { Visualizer } = require('webpack-visualizer-plugin');"}],"quickstart":{"code":"// webpack.config.js\nconst path = require('path');\nconst Visualizer = require('webpack-visualizer-plugin');\n\nmodule.exports = {\n  entry: './src/index.js',\n  output: {\n    path: path.resolve(__dirname, 'dist'),\n    filename: 'bundle.js'\n  },\n  plugins: [\n    new Visualizer({\n      filename: './statistics.html'\n    })\n  ]\n};","lang":"javascript","description":"Add the Visualizer plugin to a webpack configuration. Build outputs statistics.html along with bundle.js. Open stats.html in browser to see treemap."},"warnings":[{"fix":"Replace with webpack-bundle-analyzer: npm install --save-dev webpack-bundle-analyzer and update plugin import/usage.","message":"This package is no longer maintained. Use webpack-bundle-analyzer instead.","severity":"deprecated","affected_versions":">=0"},{"fix":"Check Webpack version; consider switching to webpack-bundle-analyzer for Webpack 4+.","message":"Works only with Webpack 1.x/2.x. May fail silently or not generate output with Webpack 3+.","severity":"gotcha","affected_versions":">=0"},{"fix":"Use alternatives like source-map-explorer for simpler visualizations or webpack-bundle-analyzer with static mode.","message":"The output HTML file is large and can cause browser performance issues with big bundles.","severity":"gotcha","affected_versions":">=0"},{"fix":"Manually move stats.html or set output.path accordingly.","message":"The plugin does not respect the output.publicPath; stats.html is always relative to output.path.","severity":"gotcha","affected_versions":">=0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run: npm install --save-dev webpack-visualizer-plugin","cause":"Package not installed or not in node_modules.","error":"Cannot find module 'webpack-visualizer-plugin'"},{"cause":"Using wrong import syntax (e.g., destructuring a non-exported member).","error":"const Visualizer = require('webpack-visualizer-plugin'); // Incorrect import","correct":"const Visualizer = require('webpack-visualizer-plugin'); // Correct: module exports constructor directly"},{"fix":"Use: new Visualizer({}) at minimum, even if empty object.","cause":"Plugin instantiated without options object, or options are undefined.","error":"Error: webpack-visualizer-plugin: No options passed"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}