The connections between assets need to be mapped by the bundler to produce an output containing everything the app needs. This process uses a data structure called a dependency graph.
A dependency graph is a type of data structure formed by a directed graph representing the relationship between different files. When one file depends on another, a connection is added to the graph. Once all the connections are added, the bundler knows exactly what it must incorporate into the build.
Take a look at the representation of a dependency graph on the right. index.js depends on two files: style.css and user.js. style.css also has a dependency for a font file, font.woff. user.js depends on another JavaScript file, util.js, and two image assets, banner.png and profile.png.
Instructions
Here are some questions to test your understanding of key concepts! Think of your answer first, then click on the “Check Answer” button to check your answer.
What is a dependency graph used for?
Check Answer
A dependency graph maps the connections between different files to tell the bundler what needs to be included in order to build the application.