I want to setup a webpack.config file that is able to dynamically accept entry points, and build them, whilst outputting all of the used node modules as chunks. So for example if we had:
// main-a.js
import { a, b, c } from 'node-module-a'
import hello from 'node-module-b'
I'd like to have an output folder that contains:
- main-a.js
- node-module-a.js
- node-module-b.js
Note that node-module-a.js should contain all of its dependencies as well, so that node-module-a contains the entire imported library. So then if I used the same webpack configuration file with another entrypoint as shown:
// main-b.js
import { b, d } from 'node-module-a'
import there from 'node-module-c'
My output folder would now contain:
- main-a.js
- main-b.js
- node-module-a.js
- node-module-b.js
- node-module-c.js
Loading both main-a.js and main-b.js from the browser should work.
What I tried
I tried achieving this with the optimisation.splitChunks option, to detect the node_modules and to place them into their own chunks. This seems to have a few issues:
- It doesn't reliably seem to work with async modules (but that could just be a misconfiguration)
- On production builds, the modules from the first build are not recognised by the second build
Is there a better way to achieve this? I get the hint that this isn't what splitChunks is designed for. The purpose here is to be able to use the node_modules that I've installed almost like modules, since I will have lots of different entry points, and don't want to include any of the node modules code in those entry points.