Webpack, как обрабатывать каждый файл, а не объединять все в один бандл?

Question

[Anton A]

У меня есть библиотека компонентов React + Typescript.

Озадачился вопросом тришейкинга, сейчас при сборке Webpack 5:

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

формируется огромный бандл с IIFE и как я понимаю поэтому не работает тришейкинг при подключении этой либы, хотелось бы на выходе получить готовые js файлы с d.ts (возможно и это не поможет).

Поделитесь мнением куда копать, заранее благодарен.

Comments

[Lynn «Кофеман»]

А зачем тогда webpack?
Может вам достаточно typescript (tsc)?

[Александр]

Или Rollup.

[Anton A]

Lynn «Кофеман», а как в случае с tsc со стилями поступить ?

[Кирилл Романов]

посмотрите в сторону Vite

Answer 1

[Виталий Яковенко]

snowpack так делает по умолчанию, сборка в общий бандл там опция.
Предполагаю что очевидный вариант с tsc напрямую вам не подходит отсутствием лоадеров для css например.

Answer 2

[Mikhail Derkach]

может быть что-то в таком духе?

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',
        },
      },
    },