We are developing a multi-brand webapp with Ionic 2 and we'd like to use webpack to bundle our code. We want to be able to generate a different bundle for each brand.
We have a generic module for each functionality of the app, but some brands require specific code. We'd like webpack to load the brand specific module instead of the generic one every time it detects that exists a module for the brand that is being bundled.
For example, our app has two modules (1 & 2) and we want to bundle it for three brands (X, Y & Z). These are the modules:
module1/module1.ts
module1/brandX.module1.ts
module2/module2.ts
module2/brandY.module2.ts
We'd like to be able to import these modules in a generic way, and the brand specific modules to be loaded dynamically if they existed:
We would import the modules this way in the code:
import { Module1 } from 'module1/*******module1';
import { Module2 } from 'module2/*******module2';
And the imports should be resolved this way for each brand:
BrandX:
'module1/brandX.module1.ts'
'module2/module2.ts'
BrandY:
'module1/module1.ts'
'module2/brandY.module2.ts'
BrandZ:
'module1/module1.ts'
'module2/module2.ts'
How could this be solved using webpack? Custom loaders? Aliases?
We'd like each of the bundles not to include code from other brands, that's why we are trying to solve it using webpack. However, if someone has a solution to solve it on runtime (dynamic dependency injection) would be also appreciated.