@ifoxxie_dev/brdoc-input-react/webpack.prod.js

React component for BRDOC input validation

import MiniCssExtractPlugin from "mini-css-extract-plugin";
import path from "path";

/** @type {import('webpack').Configuration} */
const config = {
  mode: "production",
  entry: {
    index: {
      import: "./src/app.js", // Entry point for the application
    },
  },
  output: {
    path: path.resolve("./dist"), // Output directory
    filename: "[name].js",
    clean: true, // Clean the output directory before each build
    library: {
      type: "module", // Use CommonJS2 module format for Node.js compatibility
    },
  },
  experiments: {
    outputModule: true,
  },
  resolve: {
    extensions: [".js", ".jsx", ".css"],
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"],
            plugins: ["@babel/plugin-transform-runtime"],
          },
        },
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },

  plugins: [
    new MiniCssExtractPlugin({
      filename: "app.css", // Output CSS file name
    }),
  ],
};

export default config;