How to publish multiple components in React UI library using webpack

Question

I have few components in my library inside "src/components" eg: Button, Badge

Exporting the components

src/index.js

export { Button} from "./components/Button";

export { Badge } from "./components/Badge";

webpack.config.js

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "index.js",
    library: "@ab_components/component-library",
    libraryTarget: "umd",
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        include: [path.resolve(__dirname, "src")],
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: ["@babel/env", "@babel/react"],
              plugins: [
                "@babel/plugin-transform-react-jsx",
                "@babel/plugin-transform-runtime",
              ],
            },
          },
        ],
        exclude: [
          "/node_modules/",
          "/storybook-static/",
          "/src/*.stories.js/",
        ],
      },
      {
        test: /\.((c|sa|sc)ss)$/i,
        use: [
          {
            loader: "style-loader",
          },
          {
            loader: "css-loader",
            options: {
              importLoaders: 1,
            },
          },
          {
            loader: "postcss-loader",
          },
          {
            loader: "resolve-url-loader",
          },
          {
            loader: "sass-loader",
          },
        ],
      },
      {
        test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/i,
        type: "asset",
      },
    ],
  },
  resolve: {
    extensions: [".js", ".jsx", ".ts", ".tsx"],
  },
  externals: {
    react: "react",
    "react-dom": "react-dom",
    "styled-components": {
      commonjs: "styled-components",
      commonjs2: "styled-components",
      amd: "styled-components",
    },
  },
  devtool: "source-map",
};

package.json:

{
  "name": "@ab_components/component-library",
  "baseUrl": "src",
  "version": "0.8.96",
  "description": "",
  "main": "dist/index.js",
  "scripts": {
    ...
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "jest": {
    "verbose": true,
    "plugins": [
      "@babel/plugin-syntax-jsx"
    ]
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    ...
  },
  "devDependencies": {
    ...,
    "webpack": "^5.69.1",
    "webpack-cli": "^4.9.2"
  },
  "peerDependencies": {
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-draggable": "^4.4.4",
    "styled-components": ">= 3"
  },
  "files": [
    "./dist"
  ],
  "publishConfig": {
    "@ab_components:registry": "http://host.api/v4/projects/61/packages/npm/"
  },
  "include": [
    "src"
  ]
}

Usage: it works fine :)

// importing the components from library

import { Button, Badge } from "@ab_components/component-library";

Expected: I would like to import each component as default instead of destructuring. what I have to do in webpack to achieve this?

import Button from "@ab_components/component-library/dist/Button";
import Badge from "@ab_components/component-library/dist/Badge";

----------------- ( or ) --------------------

import Button from "@ab_components/component-library/Button";
import Badge from "@ab_components/component-library/Badge";

Actual

import { Button, Badge } from "@ab_components/component-library";