webpack-graph

Converts JSON stats from webpack to a nice SVG-Image.

webpack-graph

It visualize your dependency tree as svg image.

Provide it with webpack stats (as JSON) for version > 0.7.

You can generate them by calling webpack with --json.

webpack-graph [<stats.json> [<output.svg>]]

If you don't provide the files as parameters webpack-graph will read them from stdin or write it to stdout.

--context <path> - Shorten filenames according to this context

--width <number> - The max width of the output svg

--height <number> - The max height of the output svg

--steps <number> - Limit the simulation steps

--interactive - Emit simulation code to browser

--color-by-loaders - Choose colors by loaders

--color-by-module - Choose colors by loaders

--color-switch - Chosse colors by hovering

  • Circles are modules/contexts
  • The size visualize the file size.
  • The color visualize the chunks in which the module is emitted.
  • Connections are dependencies
  • webpack-graph try to guess libaries and connect them with thin lines
  • Dashed lines visualize async requires.
  • Hover modules/contexts to display more info
  • Tooltip display module name and loaders
  • Tooltip display chunks
  • Green lines display requires from other modules/contexts
  • Red lines display requires to other modules/contexts
  • Brown lines display requires to and from other modules/contexts
  • In interactive mode
  • You can drag modules/contexts with your mouse
  • Layouting happens live
  • Only tested on latest Chrome and Firefox
  • Older browsers are not supported

Interactive version

See more examples in webpack examples