Как сделать библиотеку по-настоящему доступной для дерева с помощью веб-пакета?

Question

У меня есть библиотека с несколькими реагирующими компонентами, и я хочу сделать библиотеку доступной для дерева, чтобы при импорте такого компонента, как

import { Checkbox } from 'my-react-components'

, я не импортировал весь пакет.

Мой index.js выглядит следующим образом

export { default as Button } from './components/Button'
export { default as Checkbox } from './components/Checkbox'
export { default as FlexView } from './components/FlexView'
export { default as Radio } from './components/Radio'
export { default as Select } from './components/Select'
export { default as TextInput } from './components/TextInput'
export { default as Toggle } from './components/Toggle'

И я упаковываю с помощью веб-пакета

module.exports = {
  mode: 'production',
  entry: './src/index.ts',
  output: {
    path: path.resolve('./lib'),
    filename: 'react-components.js',
    libraryTarget: 'commonjs2',
  },

  // loaders and stuff...
  // terser-webpack-plugin...

  externals: {
    // don't include react in the bundle
    react: {
      root: 'React',
      commonjs2: 'react',
      commonjs: 'react',
      amd: 'react',
    },
  },
  optimization: {
    splitChunks: false,
    sideEffects: false,
  },
}

И в моей конфигурации Babel конечно у меня есть

['@babel/preset-env', {
  modules: false,
}]

С этой настройкой, когда я импортирую только один компонент, и весь пакет включается (я использую веб-пакет также, когда я импортирую его).Как мне предотвратить это?