Is there a way to include chunk files created by dynamic import inside dependent module as chunk file in main application.
Here is what I am trying -
I have two npm modules, say M1, M2.
M2 dynamically imports M1 using import() operator. While bundling M2, I am using webpackChunkName to create vendor~M1.js
M2.js
...
import(/* webpackChunkName: "M1" */ 'M1/index')
.then(){}
Then there is a react application A1 that statically imports M2.
A1.js
import index from 'M2'
...
While bundling A1, I am using splitChunks to create M2bundle.js for M2
webpack.config.js looks like this -
splitChunks: {
cacheGroups: {
default: false,
commons: {
test: /[\\/]node_modules[\\/]/,
name: 'M2bundle',
chunks: 'all',
minChunks: 1,
},
},
},
Output of this creates main.js for A1.js, M2bundle.js for M2 module but it does not include vendor~M1.js which is in node_module/M2 directory.
Is there a way in webpack config to achieve this ?
Appreciate the help !!!