text: const path = require("path");
  const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  const HtmlWebpackPlugin = require("html-webpack-plugin");
  const webpack = require("webpack");
  const TerserWebpackPlugin = require("terser-webpack-plugin");
  
  module.exports = function(_env, argv) {
    const isProduction = argv.mode === "production";
    const isLocal = !isProduction;
  
    return {
      devtool: isLocal && "cheap-module-source-map",
      entry: "./src/index.js",
      output: {
        path: path.resolve(__dirname, "dist"),
        filename: "assets/js/[name].[contenthash:8].js",
        publicPath: "/",
      },
      module: {
        rules: [
          {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            use: {
              loader: "babel-loader",
              options: {
                cacheDirectory: true,
                cacheCompression: false,
                envName: isProduction ? "production" : "development",
              },
            },
          },
          {
            test: /\.css$/,
            use: [
              isProduction ? MiniCssExtractPlugin.loader : "style-loader",
              "css-loader",
            ],
            exclude: /\.module\.css$/,
          },
          {
            test: /\.module\.css$/,
            use: [
              "style-loader",
              {
                loader: "css-loader",
                options: {
                  importLoaders: 1,
                  modules: true,
                },
              },
            ],
          },
          {
            test: /\.(png|jpg|gif)$/i,
            use: {
              loader: "url-loader",
              options: {
                limit: 8192,
                name: "static/media/[name].[hash:8].[ext]",
              },
            },
          },
          {
            test: /\.svg$/,
            use: ["@svgr/webpack"],
          },
        ],
      },
      resolve: {
        modules: ["src", "node_modules"],
        extensions: [".js", ".jsx"],
        alias: {
          components: path.resolve(__dirname, "src/components/"),
          containers: path.resolve(__dirname, "src/containers/"),
          context: path.resolve(__dirname, "src/context/"),
          utils: path.resolve(__dirname, "src/utils/"),
        },
      },
      plugins: [
        new webpack.ProvidePlugin({
          React: "react",
        }),
        new webpack.HotModuleReplacementPlugin(),
        isProduction &&
          new MiniCssExtractPlugin({
            filename: "assets/css/[name].[contenthash:8].css",
            chunkFilename: "assets/css/[name].[contenthash:8].chunk.css",
          }),
        new HtmlWebpackPlugin({
          template: path.resolve(__dirname, "public/index.html"),
          inject: true,
        }),
      ].filter(Boolean),
      optimization: {
        minimize: isProduction,
        minimizer: [
          new TerserWebpackPlugin({
            terserOptions: {
              compress: {
                comparisons: false,
              },
              mangle: {
                safari10: true,
              },
              output: {
                comments: false,
                ascii_only: true,
              },
              warnings: false,
            },
          }),
        ],
        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,
        hot: true,
      },
    };
  };
  