Preloading assets with Webpack 5

Problem to solve

Imagine you are working on a custom-made single-page application project that uses Webpack 5 for bundling source files and assets. You have index.html which is supposed to stay simple as much as possible. Because you want your app to be optimized you are going to use some sort of image processing modules during the build stage. In order to improve the user experience, you decided to preload hero images because they will be loaded at the start each time anyway. The problem is that after every build, those files will have a different hash in their name, so you can't hardcode those names in the index.html. The second problem is that you can't add links to page head using javascript because at the moment of processing in index.js it will be (relatively) late to preload.