I have an app that uses webpack 5 with the HtmlWebpackPlugin to generate HTML for each entry point. The app will be translated into many languages and must load both localized messages that are custom to the app itself as well as localized assets from installed npm modules. I am looking for the best way to incorporate this into our webpack build.

Currently the generated HTML looks like this:

...
<script defer src="/.../app.[content hash].js"></script>
...

Ideally, I'd like to modify this to produce something like the following:

...
<!-- bundle containing localized assets; '{locale}' placeholder to be swapped in for (eg) 'en-US' at runtime when serving up the HTML -->
<script defer src="/.../app.{locale}.[content hash].js"></script>
<!-- bundle containing non-localized assets. Imports from the localized bundle -->
<script defer src="/.../app.[content hash].js"></script>
...

This structure seems appealing because it would (hopefully) make it easy to consume localized assets from within the app's TypeScript code, would only load the assets for the relevant locale, and would allow the localized assets to partake in browser caching based on the content hash.

Is there an easy way to do this with webpack? I've looked at webpack-localize-assets-plugin which offers similar functionality but (a) only produces a single bundle containing all code and localized assets for every locale and (b) requires that localized code use a custom syntax to inject localized strings which isn't obviously compatible with 3rd-party localized assets.

I've also considered simply loading the localized assets dynamically via an AJAX request. This would be simple to do but means no content-based browser caching and also means that code has to handle localized assets coming in asynchronously.