Webpack config to single file

I’m having trouble building a Preact widget project,
Before that, I used microbundle to build index.js and index.css files
Then I want to use webpack to build one more time to combine these 2 files into 1 js file to embed into other websites that need to use it.
[enter image description here][1]

// webpack.config.js
const Dotenv = require("dotenv-webpack");
const path = require("path");

module.exports = {
  entry: "./dist/index.js",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [
              ["@babel/preset-env", { targets: "defaults" }],
              ["@babel/preset-react", { runtime: "automatic" }],
            ],
          },
        },
      },
    ],
  },
  resolve: {},
  plugins:[
    new Dotenv()
  ]
};

[1]: https://i.stack.imgur.com/Q6HxL.png