webpack-dependency-flow

0.3.0 verified Sat Apr 25 auth: no javascript

A webpack plugin that visualizes the dependency graph between modules in real-time or as a static HTML file. Version 0.3.0 supports both a live development server (with WebSocket updates) and static export. Key differentiators: lightweight, no external visualization library required, and integrates directly into webpack's build process. Release cadence is unknown; likely infrequent.

Common errors

error Error: Cannot find module 'webpack-dependency-flow' ↓

cause Package not installed

fix

npm install webpack-dependency-flow --save-dev

error TypeError: DependencyFlow is not a constructor ↓

cause Incorrect import syntax (ESM)

fix

Use require() instead of import.

Warnings

deprecated The API signature uses positional arguments which may be confusing. ↓

fix Use object-based options: new DependencyFlow({build: ..., serve: ...}) if supported in future versions.

gotcha The plugin only works in webpack watch mode for the live server. ↓

fix Ensure you run webpack with --watch when using the serve option.

gotcha Default ports may conflict (3001 and 3000). ↓

fix Explicitly set ports via serve options.

Install

npm install webpack-dependency-flow

yarn add webpack-dependency-flow

pnpm add webpack-dependency-flow

Imports

DependencyFlow

wrong

import DependencyFlow from 'webpack-dependency-flow'

correct

const DependencyFlow = require('webpack-dependency-flow')

Package uses CommonJS only; ESM import not supported in v0.3.0. Use require.

Quickstart

Create a static HTML file of dependency graph outputting to ./flows/dependency-flow.html.

// webpack.config.js
const DependencyFlow = require('webpack-dependency-flow');

module.exports = {
  plugins: [
    new DependencyFlow({
      build: { dir: './flows', name: 'dependency-flow.html' },
      serve: false
    })
  ]
};