Webpack, how to process each file, and not combine everything into one bundle?

Question

webpack

I have a React + Typescript component library.

I was puzzled by the issue of trishaking, now when building Webpack 5:

output: {
path: path.join(__dirname, '/dist'),
filename: pkg.name + 'js,
library: pkg.name,
libraryTarget: 'umd',
umdNamedDefine: true,
},

a huge bundle with IIFE is being formed, and as I understand it, trishaking does not work when connecting this lib, I would like to get ready-made js files with d.ts at the output (perhaps this will not help either).

Share your opinion where to dig, thanks in advance.

Answer 1

snowpack does this by default, building into a common bundle is an option there.
I assume that the obvious option with tsc directly does not suit you due to the lack of loaders for css, for example.

Answer 2

maybe something like that?

splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name(module) {
            const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
            return `vendor-${packageName.replace('@', '')}`;
          },
        },
        app: {
          name: 'app',
          enforce: true,
          maxSize: 249856,
          chunks: 'all',
        },
      },
    },