🔄 Circular Dependency Plugin Visualizer
Use a package installer like NPM to install the package and the peer dependency circular-dependency-plugin
npm i --save-dev circular-dependency-plugin circular-dependency-plugin-visualizer
The visualizer takes all the same options as circular-dependency-plugin >=4.4.0 and an additional optional configuration object specific to the visualization.
// webpack.config.jsconst CircularDependencyPlugin = ;const visualizer = ;moduleexports =entry: "./src/index"plugins:;
You can hover over a node to show the file path.
The nodes show different colors for the directory that they're in (up to 10 directories). If because of your directory set up, they are all in the same root directory, like
src, try setting the
cwd property in the circular-dependency-plugin options to the common root.
// webpack.config.jsconst path = ;moduleexports =...plugins:};
The strokes between nodes are animating in the direction of the import, showing the direction of the dependency chain. If a.js imports b.js, you will see the animation go from the a.js node to the b.js node. This is also the same direction as the arrows from the circular-dependency-plugin.
a.js -> b.js