Currently, I am in the process of constructing a web application utilizing Webpack. However, I have encountered a challenge with a particular aspect of the design - hopefully someone in this forum has experience in similar tasks (or possesses enough knowledge to inform me if I am on the wrong path)!
Essentially, we are developing an Angular dashboard application that comprises a 'shell' (the standard user interface, session management services, etc.) and multiple modules (self-contained segments of the app that can be attached to the shell). The complexity arises from the fact that this application will be deployed to various clients, each requesting a distinct set of modules along with slightly different configuration options.
To date, I have managed to make progress by using DefinePlugin to load a JSON config file as a constant during build time:
const envConfig = require(`./config/${yargs.argv.env || "dev"}`);
...
new webpack.DefinePlugin({
__ENV__: Object.keys(envConfig).reduce((obj, key) => {
obj[key] = JSON.stringify(envConfig[key]);
return obj;
}, {})
})
I then attempted to utilize dynamic requiring to include only the specified modules, like this:
__ENV__.modules.map((id) => require(`./modules/${id}/index.ts`).default)
While this approach did work to some extent - loading the correct modules, it had a drawback. Webpack does not recognize that __ENV__ remains constant at runtime. Consequently, the build file contains all modules, even those that are disabled. This would unnecessarily increase the file size for clients who only need a single module, which is not ideal.
Therefore, my question is simple - Is there a straightforward method to load a specific set of modules based on a constant defined by DefinePlugin (or is there an alternative way to accomplish my objective)? It seems like there's something obvious that I might be overlooking.