Preloading assets with webpack

Question

I have a preloader that takes an array of image URLs and starts loading the files as soon as my app is opened. Every time I use require() on an image I would like webpack to add that image's URL to the array that my preloader will be using.

My first inclination is to create a new loader to chain together with file-loader (which I'm currently using for images). The new loader would keep track of my images and save them to a JS file in the form of an array, which my preloader would import. But I realize that probably won't work because the preloader would have a dependency on a file that is generated at build time.

My stop gap solution is to build the project once, generate the array from the resulting image directory, copy it back into the preloader, and build again.

I have a feeling there's a better approach that I'm neglecting, and I'm looking for recommendations.

Gills

Did you ever manage to find a solution for this? – Unconsidered

Answer 1

I don't think there really is a better solution. This pattern of wanting to include in the bundle something that is only complete when compilation is done comes up fairly often. I spent a while looking into it and the best I came up with was including the generated asset as a webpack external, which meant loading that asset separately at runtime. At least this way webpack was still aware of it and recognized it as a dependency, even though it wasn't part of the compilation.

I posted a question on this same topic a few yrs ago: Webpack plugin: how can I modify and re-parse a module after compilation? Someone did post an answer there that uses webpack's internals to try to accomplish this, in a fashion that I haven't yet tried; might be worth a look.

Tarsier