I have a large react app with material ui and many components. It has 2 webpack config files. One is called webpack.base.config.js and other is webpack.prod.config.js. My script in package.json when I run npm start is webpack-dev-server --mode development --config config/webpack.base.config.js --open --hot --history-api-fallback --env.PLATFORM=local --env.VERSION=stag

To be exact it takes 36 seconds on my 11th Gen Core i5 to hot reload only with eslint code commented out. Also is it a possibility to remove webpack and use normal react-scripts? Complete file is this

const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const Dotenv = require('dotenv-webpack');

module.exports = env => {
  const { PLATFORM } = env;
  return merge([
    {
      entry: ['@babel/polyfill', path.resolve(__dirname, '../src')],
      module: {
        rules: [
          {
            test: /\.(js|jsx)$/,
            exclude: [/node_modules/, /test\.(js|jsx)$/],
            use: {
              loader: 'babel-loader',
            },
          },
          {
            test: /\.(woff(2)?|ttf|eot|otf|jpe?g|png|gif|svg)$/i,
            loader: 'file-loader',
            options: {
              outputPath: 'images',
              name: '[name].[ext]',
            },
          },
          // {
          //   enforce: 'pre',
          //   test: /\.(js|jsx|mjs)$/,
          //   exclude: /node_modules/,
          //   use: [
          //     {
          //       loader: require.resolve('eslint-loader'),
          //       options: {
          //         eslintPath: require.resolve('eslint'),
          //         emitWarning: true,
          //       },
          //     },
          //   ],
          // },
          {
            test: /\.(scss|css)$/,
            use: [
              PLATFORM === 'production' ? MiniCssExtractPlugin.loader : 'style-loader',
              'css-loader',
              'sass-loader',
            ],
          },
        ],
      },
      plugins: [
        new Dotenv({
          path: './.env',
          systemvars: true,
        }),
        new HtmlWebpackPlugin({
          template: './src/index.html',
          fileName: './index.html',
          hash: true,
        }),
        new webpack.DefinePlugin({
          'process.env.VERSION': JSON.stringify(env.VERSION),
          'process.env.PLATFORM': JSON.stringify(env.PLATFORM),
        }),
        new CopyWebpackPlugin([{ from: './src/assets/favicon.png' }]),
      ],
      output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, '..', 'dist'),
        publicPath: '/',
      },
    },
  ]);
};