const path = require("node:path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const backendPort = process.env.BACKEND_PORT || 3001;
const frontendPort = process.env.FRONTEND_PORT || 3000;

module.exports = (_env, argv) => {
  const isDev = argv.mode !== "production";

  return {
    entry: "./src/index.tsx",
    devtool: isDev ? "eval-source-map" : "source-map",
    output: {
      path: path.resolve(__dirname, "dist"),
      filename: "bundle.[contenthash].js",
      clean: true,
    },
    resolve: {
      extensions: [".tsx", ".ts", ".js"],
    },
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          use: "ts-loader",
          exclude: /node_modules/,
        },
      ],
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: "./public/index.html",
      }),
    ],
    devServer: {
      port: frontendPort,
      historyApiFallback: true,
      hot: true,
      proxy: [
        {
          context: ["/range"],
          target: `http://localhost:${backendPort}`,
        },
      ],
    },
  };
};