4

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 !!!

0 Answers0