Questions
6 of 6
What is this dependency graph?
Difficulty: 5/10
dependency graph, module resolution, tree shaking
When webpack processes your application, it starts from a list of modules defined on the command line or in its configuration file. Starting from these entry points, webpack recursively builds a dependency graph that includes every module your application needs, then bundles all of those modules into a small number of bundles - often, only one - to be loaded by the browser.
- 1
Any time one file depends on another, webpack treats this as a dependency. This allows webpack to take non-code assets, such as images or web fonts, and also provide them as dependencies for your application.
Scenario Questions
0-2 years experience
- 1If you add a new file that imports a utility module, how does Webpack's dependency graph change?
- 2What will happen to the bundle size if you remove an unused import from a module? Explain in terms of the dependency graph.
2-5 years experience
- 1We introduced a circular import between two modules and the build started failing. Walk me through how Webpack's dependency graph handles circular dependencies and how you'd debug it.
- 2During a feature rollout, a newly added dynamic import isn't being split into a separate chunk. What could be wrong with the dependency graph configuration?
5-8 years experience
- 1Our application is growing to 2000 modules and build times are soaring. How would you restructure the Webpack dependency graph or its plugins to improve incremental builds?
- 2We need to implement Module Federation across multiple teams. How does the dependency graph affect shared module versioning and runtime loading?
8+ years experience
- 1We're planning to migrate a legacy monolithic Webpack config to a micro‑frontend architecture with multiple independent builds. What architectural considerations around the dependency graph and shared runtime should we address to ensure maintainability?
- 2Across several product lines, teams have diverging dependency graph strategies (eager vs lazy loading). How would you establish a company‑wide policy that balances bundle size, caching, and developer experience?
Follow-up Questions
- What do the nodes and edges represent in Webpack's graph?
- How does tree shaking use the dependency graph to drop dead code?
- What effect does code splitting have on the graph structure?