Package imported solely in import with `webpackChunkName` must not be splitted by `splitChunks`

Bug report

When a package is imported solely with in import with webpackChunkName flag, such package must be not create an extra vendor chunk.

How to reproduce?

checkout https://github.com/atk4/ui/commit/034f075b056dd0436d966176c1a8763c214df2d0 and run npm run build in js dir

in https://github.com/atk4/ui/blob/034f075b056dd0436d966176c1a8763c214df2d0/js/src/services/vue.service.js#L84 this file:

https://github.com/atk4/ui/blob/034f075b056dd0436d966176c1a8763c214df2d0/js/src/vue-components/query-builder/query-builder.component.vue is imported which imports fomantic-ui-group.component.vue and fomantic-ui-rule.component.vue (in the same dir) which import from vue-query-builder package

no other files import from vue-query-builder package

What is the current behavior?

public/js/vendor-vue-query-builder.js is created but the content should go into public/js/atk-vue-query-builder.js especially when https://github.com/atk4/ui/blob/034f075b056dd0436d966176c1a8763c214df2d0/js/webpack.config.js#L41-L44 lines are removed (tested, the files are still vendored)

What is the expected behavior?

I would expect webpack to detect vue-query-builder is used from single (already chunked) exported (already chunked) public/js/atk-vue-query-builder.js file and NOT create additional/uneeded public/js/vendor-vue-query-builder.js chuck

Other relevant information: webpack version: 5.75.0 / latest

[mvorisek]

@alexander-akait big thank you ❤️

defaultVendors: false + removed cache group for the files that should be inlined by webpackChunkName annotated import is working

[alexander-akait]

Try this:

 splitChunks: {
                cacheGroups: {
                    defaultVendors: false,
                    vendorVueFlatpickr: {
                        test: /[\\/]node_modules[\\/](flatpickr|vue-flatpickr-component)[\\/]/,
                        name: 'vendor-vue-flatpickr',
                    },
                    vendorVue: {
                        test: /[\\/]node_modules[\\/](?!(vue-flatpickr-component|vue-query-builder)[\\/])([^\\/]+[-.])?vue([-.][^\\/]+)?[\\/]/,
                        name: 'vendor-vue',
                    },
                    vendor: {
                        test: /[\\/]node_modules[\\/](?!(([^\\/]+[-.])?vue([-.][^\\/]+)?|flatpickr)[\\/])/,
                        name: 'vendor',
                    },
                },
            },