Naughty Pinching Mannequins

    webpack-graph

    0.1.4 • Public • Published

    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

    Keywords

    none

    Install

    npm i webpack-graph

    DownloadsWeekly Downloads

    7

    Version

    0.1.4

    License

    MIT

    Last publish

    Collaborators

    • sokra