Making WebPack include dynamically referenced assets

Tags: Typescript, WebPack, Aurelia, dynamic loading

Dynamically selected view assets are problematic with WebPack because there static dependency detection fails to recognise them as required and does not include them in the build.

To persuade WebPack to bundle them we declare these assets as dependencies of a module. However, it can be very tedious to work out what string identifies a particular module, so it's less trouble to hang them off a well known module name. Depending on your skeleton or generator this will be "configure", "main", "app" or "boot". I use the Microsoft .NET Core SPA template so for me it's "boot".

Typically these assets are inside the folder of the component that uses them; it is highly unusual to leave junk littering a component folder. The plugin required supports globs. This allow us to apply this solution to all components by adding this to the end of the plugins section of the webpack.config.js file in the root of your project.

new GlobDependenciesPlugin({ "boot": ["ClientApp/app/components/**/*.html"] })

No Comments