text: const path = require("path");
  const webpack = require("webpack");
  const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  const HtmlWebpackPlugin = require("html-webpack-plugin");
  const TerserWebpackPlugin = require("terser-webpack-plugin");
  const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
  const { CleanWebpackPlugin } = require('clean-webpack-plugin');
  
  module.exports = function(_env, argv) {
    const isProduction = argv.mode === "production";
    const isDevelopment = !isProduction;
    
    return {
      devtool: isDevelopment && "cheap-module-source-map",
      entry: path.resolve(__dirname, "src/app/index.jsx"),
      target: 'web',
      output: {
        path: path.resolve(__dirname, "dist"),
        filename: "assets/js/[name].[contenthash:8].js",
        publicPath: "/"
      },
      module: {
        rules: [
          {
            test: /\.(js|jsx)?$/,
            exclude: /node_modules/,
            use: {
              loader: "babel-loader",
              options: { babelrc: true }
            }
          },
          {
            test: /\.css$/,
            use: [
              isProduction ? MiniCssExtractPlugin.loader : "style-loader",
              "css-loader"
            ],
            type: 'javascript/auto'
          },
          {
            test: /\.(png|jpg|gif)$/i,
            use: [
              {
                loader: "url-loader",
                options: {
                  limit: 8192,
                  name: "static/media/[name].[contenthash:8].[ext]"
                }
              }
            ],
            type: 'javascript/auto'
          },
          {
            test: /\.svg$/,
            use: ["@svgr/webpack"],
            type: 'javascript/auto'
          },
          {
            test: /\.(eot|otf|ttf|woff|woff2)$/,
            loader: require.resolve("file-loader"),
            options: {
              name: "static/media/[name].[contenthash:8].[ext]"
            },
            type: 'javascript/auto'
          }
        ]
      },
      resolve: {
        extensions: ["*", ".js", ".jsx"],
      },
      plugins: [
        isProduction &&
        new MiniCssExtractPlugin({
          filename: "assets/css/[name].[contenthash:8].css",
          chunkFilename: "assets/css/[name].[contenthash:8].chunk.css"
        }),
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
          template: path.resolve(__dirname, "public/index.html"),
          favicon: 'public/favicon.ico',
          inject: true,
          // filename: "assets/index.html",
        }),
        new webpack.DefinePlugin({
          "process.env.NODE_ENV": JSON.stringify(
            isProduction ? "production" : "development"
          ),
          "process.env.IP_ADDRESS": JSON.stringify(
            isProduction ? "3.97.196.198" : "localhost"
          ),
        })
      ].filter(Boolean),
      optimization: {
        minimize: isProduction,
        minimizer: [
          new TerserWebpackPlugin({
            terserOptions: {
              compress: {
                comparisons: false
              },
              mangle: {
                safari10: true
              },
              output: {
                comments: false,
                ascii_only: true
              },
              warnings: false
            }
          }),
          new CssMinimizerPlugin()
        ],
        splitChunks: {
          chunks: "all",
          minSize: 0,
          maxInitialRequests: 10,
          maxAsyncRequests: 10,
          cacheGroups: {
            vendors: {
              test: /[\\/]node_modules[\\/]/,
              name(module, chunks, cacheGroupKey) {
                const packageName = module.context.match(
                  /[\\/]node_modules[\\/](.*?)([\\/]|$)/
                )[1];
                return `${cacheGroupKey}.${packageName.replace("@", "")}`;
              }
            },
            common: {
              minChunks: 2,
              priority: -10
            }
          }
        },
        runtimeChunk: "single"
      },
      devServer: {
        compress: true,
        historyApiFallback: true,
        open: true,
        overlay: true
      }
    };
  };