Assets are primarily managed via the dependency graph, which we covered in Chapter 1, Introduction to Webpack 5.

Before the great advent of Webpack, developers would use tools such as grunt and gulp to process these assets and move them from the source folder into the production directory or the development directory (usually named /build and /dist, respectively).

The same principle was used for JavaScript modules, but Webpack 5 dynamically bundles all dependencies. As every module explicitly states its dependencies, unused modules won't be bundled.

In Webpack 5, any other type of file can now be included, besides JavaScript—for which a loader is used. This method means that all the features possible when using JavaScript can also be utilized.

In the following subsection, we will explore practical asset management. The following topics will be covered:

• Setting up the project for asset management configurations
• Loading Cascading Style Sheets (CSS) files
• Loading images
• Loading fonts
• Loading data
• Adding global assets

Then, there will be a subsection on wrapping up.

Each subsection will have steps and instructional content to follow. This can become quite a large topic, so hold on tight! We will begin by preparing the configuration of your project.