Converts JSON stats from webpack to a nice SVG-Image.
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
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
--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
See more examples in webpack examples