I am developing an Vue mixins library, I want to be able to import mixins in both these ways from this library:

// import type A
import { Theme } from 'awesome-lib/mixins'

and

// import type B
import Theme from 'awesome-lib/mixins/Theme'

for the type A of import, I have 1 entry in my webpack config file:

output: {
  path: path.join(__dirname, '/dist'),
  filename: '[name].js',
  libraryTarget: "umd",
  globalObject: 'this',
},
entry: {
  mixins: './src/mixins.js',

and for the type B of import, I create a separate entry for each file in mixins directory, like this:

entry: {
    // other entries
    ...glob.sync('./src/mixins/*.js').reduce((entries, file) => {
        const p = path.parse(file)
        entries[p.name] = {
            import: file,
            filename: 'mixins/' + p.base,
            dependOn: Dependencies[p.name],
        }
        return entries
    }, {}),

As it is visible this method has a downside, I need to set dependencies between entries manually for webpack or it will duplicate shared code in separated bundles. I have searched about bundling chunks based on file, but I could not find how? I have experimented with optimization.splitChunks with no luck. and a question: If I manage to config webpack to bundle by filename, can I load that file only in another package?

I was hoping with the right config I can achieve both outputs with only 1 entry and code splitting