text: const path = require("path");
  const HtmlWebpackPlugin = require("html-webpack-plugin");
  const { ModuleFederationPlugin } = require("webpack").container;
  
  const isProduction = process.env.NODE_ENV == "production";
  
  const stylesHandler = "style-loader";
  
  const getRemoteEntryUrl = (port) => {
    return `//localhost:${port}/remoteEntry.js`;
  }
  
  const config = {
    entry: "./src/index.ts",
    output: {
      path: path.resolve(__dirname, "dist"),
    },
    devServer: {
      open: true,
      host: "localhost",
      contentBase: path.join(__dirname, "dist"),
      port: 3000,
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: "./public/index.html",
      }),
      new ModuleFederationPlugin({
        name: "formFactory",
        remotes: {
          inputFactory: `inputFactory@${getRemoteEntryUrl(3001)}`,
          buttonFactory: `buttonFactory@${getRemoteEntryUrl(3002)}`,
        },
        shared: {
          react: { singleton: true },
          "react-dom": { singleton: true }
        },
      }),
    ],
    module: {
      rules: [
        {
          test: /\.(ts|tsx)$/i,
          loader: "babel-loader",
          exclude: /node_modules/,
          options: {
            presets: ["@babel/preset-react"],
          },
        },
        {
          test: /\.css$/i,
          use: [stylesHandler, "css-loader"],
        },
        {
          test: /\.s[ac]ss$/i,
          use: [stylesHandler, "css-loader", "sass-loader"],
        },
        {
          test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
          type: "asset",
        },
  
        // Add your rules for custom modules here
        // Learn more about loaders from https://webpack.js.org/loaders/
      ],
    },
    resolve: {
      extensions: [".tsx", ".ts", ".js"],
    },
  };
  
  module.exports = () => {
    if (isProduction) {
      config.mode = "production";
    } else {
      config.mode = "development";
    }
    return config;
  };
  