Assets in Webpack

Every project has some resources, or assets. These assets are images, font files, and things like that.

Typically, we just want to move resources from the project folder to the build folder. But again, there is a problem with the cache. For example, the browser caches images. This means that if we change the image in the picture without changing the name of its file, then the site users will see the previous version of the picture, since it is cached.

The solution to the problem, as you already know, is to add a hash to the file name. Webpack allows you to copy resource files to the build folder, adding hashes to them and, most importantly, changing the paths to these resources in all files to new ones.

In Webpack, assets are handled using special asset modules. There are four types: asset/resource, asset/inline, asset/source, asset.

The asset/resource module copies files from the project folder to the build folder and replaces the paths to them with new ones. The asset/inline module takes files from the project folder and replaces the paths to the files in the build code with base64. The asset/source module takes files from the project folder and returns them as a text string. The asset module itself chooses whether to copy the file to the build folder or turn it into base. The choice is made depending on the file size. By default, files larger than 8kb are collected into files.

The general scheme of using these modules is as follows: