https://github.com/webpack/graph

[DEPRECATED] Converts JSON stats from webpack to a nice SVG-Image.
https://github.com/webpack/graph

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/webpack/graph
• Owner: webpack
• Archived: true
• Created: 2012-10-09T15:27:04.000Z (about 12 years ago)
• Default Branch: master
• Last Pushed: 2012-11-02T08:29:31.000Z (about 12 years ago)
• Last Synced: 2024-05-22T23:32:23.780Z (6 months ago)
• Language: JavaScript
• Homepage:
• Size: 184 KB
• Stars: 13
• Watchers: 5
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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 [ []]`

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

`--context ` - Shorten filenames according to this context

`--width ` - The max width of the output svg

`--height ` - The max height of the output svg

`--steps ` - 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](http://webpack.github.com/graph/example/webpackBrowsertest.svg)

[Interactive version](http://webpack.github.com/graph/example/webpackBrowsertestInteractive.svg)

See more examples in webpack examples