webpack.config.js

    const webpack = require('webpack');
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const dotenv = require('dotenv');

module.exports = () => {
  const env = dotenv.config().parsed;
  const envKeys = Object.keys(env).reduce((prev, next) => {
    prev[`process.env.${next}`] = JSON.stringify(env[next]);
    return prev;
  }, {});
  const isDev = process.env.NODE_ENV === 'development';

  return {
    mode: isDev ? 'development' : 'production',
    // optimization: {},
    optimization: isDev ? {} : { minimize: true, minimizer: [new CssMinimizerPlugin()] },
    entry: {
      index: './src/index.jsx',
    },
    output: {
      path: path.resolve(__dirname, 'build'),
      filename: isDev ? 'js/[name].js' : 'js/[name].[fullhash:4].js',
      clean: true,
      assetModuleFilename: isDev ? '[name][ext]' : '[name]_[fullhash:4][ext]',
    },
    devtool: isDev ? 'eval-cheap-module-source-map' : undefined,
    devServer: {
      port: 3000,
      compress: true,
      hot: true,
      open: true,
      historyApiFallback: true,
    },
    module: {
      rules: [
        {
          test: /\.(js|ts|jsx|tsx)?$/,
          exclude: /node_modules/,
          include: path.resolve(__dirname, 'src'),
          use: ['babel-loader'],
        },
        {
          test: /\.(css)$/,
          use: [
            'style-loader',
            {
              loader: 'css-loader',
              options: {
                importLoaders: 2,
                modules: {
                  localIdentName: '[local]_[hash:base64:4]',
                },
              },
            },
            'postcss-loader',
          ],
          include: /\.module\.css$/,
        },
        {
          test: /\.(css)$/,
          use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'],
          exclude: /\.module\.css$/,
        },
        {
          test: /\.svg$/i,
          type: 'asset',
          resourceQuery: /url/,
        },
        {
          test: /\.svg$/i,
          issuer: /\.[jt]sx?$/,
          resourceQuery: { not: [/url/] },
          use: ['@svgr/webpack'],
        },
        {
          test: /\.(ico|gif|png|jpg|jpeg)$/,
          type: 'asset/resource',
          generator: {
            filename: 'images/[name][ext]',
          },
        },
        {
          test: /\.(woff|woff2)$/i,
          type: 'asset/resource',
        },
      ],
    },
    resolve: {
      fallback: {
        'react/jsx-runtime': 'react/jsx-runtime.js',
        'react/jsx-dev-runtime': 'react/jsx-dev-runtime.js',
      },
      extensions: ['.ts', '.tsx', '.js', '.jsx'],
    },
    plugins: [
      new MiniCssExtractPlugin({
        filename: isDev ? './styles/[name].css' : './styles/[name].[fullhash:4].css',
      }),
      new HtmlWebpackPlugin({
        template: './public/index.html',
      }),
      new webpack.DefinePlugin(envKeys),
      new CopyPlugin({
        patterns: [
          {
            from: 'public/',
            filter: (resourcePath) => resourcePath.indexOf('index.html') < 0,
          },
        ],
      }),
    ],
  };
};