Tengo una aplicación que usa webpack 5 con HtmlWebpackPlugin para generar HTML para cada punto de entrada. La aplicación se traducirá a muchos idiomas y debe cargar tanto los mensajes localizados que son personalizados para la propia aplicación como los activos localizados de los módulos npm instalados. Estoy buscando la mejor manera de incorporar esto en nuestra compilación de paquete web.

Actualmente, el HTML generado se ve así:

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

Idealmente, me gustaría modificar esto para producir algo como lo siguiente:

 ... <!-- 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> ...

Esta estructura parece atractiva porque (con suerte) facilitaría el consumo de activos localizados desde el código TypeScript de la aplicación, solo cargaría los activos para la configuración regional relevante y permitiría que los activos localizados participen en el almacenamiento en caché del navegador según el hash de contenido. .

¿Hay una manera fácil de hacer esto con webpack? Miré webpack-localize-assets-plugin que ofrece una funcionalidad similar pero (a) solo produce un solo paquete que contiene todo el código y los activos localizados para cada configuración regional y (b) requiere que el código localizado use una sintaxis personalizada para inyectar cadenas localizadas que obviamente no es compatible con activos localizados de terceros.

También he considerado simplemente cargar los activos localizados dinámicamente a través de una solicitud AJAX. Esto sería simple de hacer, pero significa que no hay almacenamiento en caché del navegador basado en contenido y también significa que el código tiene que manejar los activos localizados que ingresan de forma asíncrona.