Fixed and working.

• webpack stats.json parser/converter for visual/UI dependencies analysis
• configurable filters: exclude, except, include, max deps count
• output formats:
  • graphml graph for proprietary yed editor
  • DOT graph
  • *.png cytoscape graph export
  • json debug data

• v1.4.0
  • collapseNodePaths=[] option to simplify DI/Router/Libs deps view
• v1.5.0
  • add gephi examples
  • validate/refactor examples
• v2
  • npm package
• v3
  • webpack plugin
• v4
  • vscode plugin(folder/file right click) like in dependency cruiser
    • stats.json validation with current folder structure
    • collect stats.json before run
• v5+
  • replace UUID by relative path
  • fix circular.json comparing to eslint
  • add issuedPath
  • use xml schema for graphml parser
    • http://www.w3.org/2001/XMLSchema-instance
    • http://graphml.graphdrawing.org/xmlns
    • http://www.yworks.com/xml/schema/graphml/1.1/ygraphml.xsd
    • http://www.yworks.com/xml/yfiles-common/1.0/java
    • http://www.yworks.com/xml/yfiles-common/markup/primitives/2.0
    • http://www.yworks.com/xml/yfiles-common/markup/2.0
    • http://www.yworks.com/xml/graphml
    • http://www.yworks.com/xml/yed/3
  • local webpack dev server
  • deps size in UI
  • deps size in stats_summary.json
  • local web graphviz graph viewer
  • local web cytoscape graph viewer

• terminology:
  • webpack module: dependencies, source in graph
  • webpack reason(origin): consumer, destination in graph
• dependency map calculated only for nodes with dependencies. For the dot format it's ok, but for the graphml bunch of nodes added from the dependencies array
• see the full path in node data properties(right click)
  • 
• search in nodes, urls, properties
  • 
• Exporting one dependency in multiple files can be confusing
  • 
  • 
• Graph node label consist of file name only, so if you see similar names, you can right-click it and check the properties-->data tab to see the full path
  • 
  • 
  • 
• You can enable edge labeling and coloring to check similar dependencies origins
  • 
  • 

Generating graphml and editing it in yEd are the best option for now. Best yEd layouts: circular(alt+shift+c), hierarchical(alt+shift+h).

The graphviz layout renderer seems to be less useful. You can upload the simplified dot file into any graphviz editor and try to play with settings.

• input
  • example of the webpack stats
• output webpackV5
  • run npm run webpack
  • summary
  • deps.config.ts

        input: {
            webpackStatsFileName: "stats.json",
        },
        filters: {
            exclude: [
                "node_modules",
                "deps.config",
                "files",
                "logger"
            ],

  • json: circular dependencies
    • 
  • json: cytoscape
  • json: analyzed deps from webpack stats
  • xml: simplified dot graph
    • 
• output webpackV3
  • summary
  • deps.config.ts

        exclude: ["cache", "webpack", "node_modules", 'main', 'logger', 'index', 'profile', 'config', 'platform','settings', 'popup', 'app', 'confirm', 'analytics', 'theme', 'error', 'home'],
        excludeExcept: [], includeOnly: [],

  • json: circular dependencies
  • json: cytoscape
  • json: analyzed deps from webpack stats
  • xml: simplified dot graph
    • 

• xml: dot
  • 
• png: dot layout
  • 
  • 
• png: spring layout
  • 
• png: directed layout
  • 
  • 
• png: circular layout
  • 
  • 
• png: radial layout
  • 
• png: clustered layout
  • 

Used for yed editor

• graphml: raw xml

• Manually applied in yed circular layout: tools-->fit node to label, layout-->circular (alt+shift+c)

• exclude most frequently used dependencies

  • filters:

  	exclude: ["index", "node_modules", "main", "cache", "webpack", "logger", "profile", "config", "platform", "settings", "popup", "confirm", "analytics", "theme", "error",],
  	excludeExcept: [], includeOnlyDestNode: [], includeOnlySrcNode: [],
  	edgeTypeExclude: ["cjs self exports reference","export imported specifier",],

  • summary: imports: 594; dependencies: 123 nodesPaths: 166 nodes: 168
  • graphml
  • 

• include all

  • deps.config.ts

        exclude: [], excludeExcept: [],
        includeOnlyDestNode: [""], includeOnlySrcNode: [""],
        edgeTypeExclude: ["cjs self exports reference","export imported specifier"],

  • summary: imports: 8623; dependencies: 1630 nodesPaths: 2019 nodes: 2021
  • 

• who use @angular/forms dependencies: exclude node_nodules except angular and include only forms source modules

  • filters:

        filters: {
            exclude: ["node_modules"],
            excludeExcept: ["angular"], includeOnlyDestNode: ["key.ts"], includeOnlySrcNode: ["key.ts"],
        //...
        graphml: {
            showSourceEdgeLabels: false,
            showDestEdgeLabels: true,

  • 

• exclude non project files

  • summary: imports: 1654; dependencies: 195 nodesPaths: 224 nodes: 226
  • deps.config.ts

        exclude: ['cache', 'webpack', 'node_modules'],
        excludeExcept: [], includeOnly: [],

• Refactoring decision making helper
• addition tool for the code analysis methodic
• Detect a circular dependency in a large monorepo project.
• Figure out where the module is being used, imported and exported from.
• Analyze why webpack cannot tree-shake a particular module or dependency from the chunk.

• set the config params
• optionally use node version manager to choose node@16+
• execute in console

      nvm i 16 # optionally
      npm i
      cp ${your_project_folder}/stats.json ./webpack-dep-graph/webpack-stats.json
      npm run start
      

• deps graph with npm and vscode plugin
• deps diff with query language statoscope
• without webpack stats.json repo
• forked from: unmaintained broken draft repo
• Unmaintained repo
• Unmaintained repo