webpack-dep-finder

Webpack Dep Finder

A fast and efficient tool for pinpointing the issuer path of a specific dependency in your Webpack bundles.

Example Output

Found target dependency: /path/to/your/dependency.js
/path/to/your/entry-file.js
  /path/to/another/dependency.js
    /path/to/your/dependency.js

This output shows the path from the entry file to the target dependency.

Usage

As a CLI Utility

You can use webpack-dep-finder as a CLI tool:

# Install the package globally
npm install -g webpack-dep-finder

# Run the CLI tool
npx webpack-dep-finder --dependency-pattern /your-regex-pattern/ --config path/to/webpack.config.js

New Features

• Specify an entry point: You can specify an entry point using the --entry-point option or search for an entry point using a partial string or regex match with --entry-match.
• Override ts-loader: If ts-loader is detected, it is automatically overridden to use transpileOnly: true to speed up TypeScript builds during dependency scanning.

CLI Options

-d, --dependency-pattern <pattern>   Regex pattern to match the resource path/filename to locate. (Required)
--no-halt-on-match                   Continue searching even after the dependency is found. (Default: false)
--show-webpack-output                Display Webpack's build output. (Default: false)
-c, --config <path>                  Path to the Webpack configuration file. (Default: "webpack.config.js")
--entry-point <path>                 Specify an entry point to begin the search from.
--entry-match <pattern>              Specify a regex or partial string to match the entry point filename.
-V, --version                        Output the version number.
-h, --help                           Output usage information.

As a Webpack Plugin

# NPM
npm install --save-dev webpack-dep-finder
# Yarn
yarn add -D webpack-dep-finder

const WebpackDepFinder = require("webpack-dep-finder");

new WebpackDepFinder({
    dependencyPattern: /your-regex-pattern/,
    haltOnMatch: true,
    showWebpackOutput: false
});

Performance Insights

Speed Benefits:

• Up to 100x Faster: Unlike tools that analyze the entire Webpack build, webpack-dep-finder identifies dependencies quickly by stopping the search as soon as the specified dependency is found.
• Conditional Timing: If the dependency is not found, the tool will run for the entire build duration. The effectiveness can vary based on your project’s size and structure.

Visualizing Speedup:

Major Use Cases

• Optimizing Script Evaluation Time: Speed up the process of finding and analyzing dependencies, crucial for large React web applications.
• Reducing Bundle Chunk Size: Efficiently locate and manage dependencies to optimize bundle sizes and overall performance.

Troubleshooting

Why is webpack-dep-finder so fast?

webpack-dep-finder is designed for speed by stopping the search as soon as the specified dependency is found during the Webpack compilation process. This approach contrasts with tools that analyze the entire bundle, making webpack-dep-finder a quicker option for targeted searches.

What happens if the dependency is not found?

If the specified dependency isn't found, webpack-dep-finder will complete the entire build process without performing any additional analysis. Ensure that the dependency name is correct and that it is included in your Webpack build.

Other Tools

• Statoscope - A more comprehensive Webpack bundle analysis tool with additional features like interactive treemaps.

Maintainers

puj

Support the developer!

Contributing

We welcome contributions to Webpack Dep Finder! Please see CONTRIBUTING.md for more details.