webpack-graph

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

npm install webpack-graph
1 downloads in the last day
1 downloads in the last week
23 downloads in the last month

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.

Command Line

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

Resulting Image

  • 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

Example

webpack-graph

Interactive version

See more examples in webpack examples

npm loves you