I’m working with Webpack 4, and what I am trying to do is conceptually simple: I want to use file-loader with dynamically-generated content that can require other modules, instead of a static file.
In a little more detail, I want to:
- Generate an HTML page using Pug that requires a file
dynamicfile.xmlusingfile-loader. For example, the linelink(name='search' href=require('./dynamicfile.xml'))should generate something like<link name="search" href="/dynamicfile.58ef.xml">, and a filedynamicfile.58ef.xmlshould be written to disk. - The actual contents of
dynamicfile.58ef.xmlshould be generated by a template or JS module, where part of it requires another module usingfile-loader. For example, if the template is in EJS syntax and looks like<sometag file="<%= require('./image.png') %> />", then the final contents ofdynamicfile.58ef.xmlshould look something like<sometag file="/image.8a4e.png" />.
Note that I am using Webpack 4, not Webpack 5, because the project I am working with uses Webpack 4, and the migration to 5 would be very complicated and time-consuming.
I have already Googled and ChatGPT’ed the issue thoroughly and have not found a solution.
I tried generating the xml file dynamically with an EJS loader and then converting it to a string with apply-loader. In terms of the dynamically generated content, it gives my exactly what I want, if I require it inline in the HTML file. However, if I try to load it using file-loader in the HTML file, it always writes the source code of the template to the external xml file, instead of the dynamic content. So, I don’t understand why Webpack doesn’t evaluate the module’s code before writing it to the file (or how to do it). I think I have a conceptual misunderstanding that someone more knowledgeable can clear up for me.
I have also tried using val-loader@2, but it leads to exactly the same problem: file-loader writes out the source code generated by val-loader that would evaluate the module.