UseWebpackDevMiddleware

Startup.cs

        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
                if (Dependencies.DevOptions.UseWebpackDevMiddleware) // comes from appsettings
                {
#pragma warning disable CS0618 // Type or member is obsolete
                    app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
                    {
                        ProjectPath = env.ContentRootPath + @"\ClientApp",
                        HotModuleReplacement = Dependencies.DevOptions.UseHMR,
                        ReactHotModuleReplacement = Dependencies.DevOptions.UseHMR,
                        EnvParam = new {
                            dev = true 
                        }
                    });
#pragma warning restore CS0618 // Type or member is obsolete
                }
            }
            else
            {
                app.UseExceptionHandler("/Home/Error");
                app.UseHsts();
            }
            JwtSecurityTokenHandler.DefaultInboundClaimTypeMap.Clear();

            app.UseHttpsRedirection();
            app.UseStaticFiles();
            app.UseAuthentication();
            app.UseRequestLocalization(Dependencies.GetLocalizationConfig());
            app.UseSession();
           
            app.UseMvc(routes =>
            {
                routes.MapRoute(
                    name: "default",
                    template: "{controller=Home}/{action=Index}/{id?}");
                routes.MapRoute(
                    name: "accessDenied",
                    template: "Account/AccessDenied",
                    defaults: new { controller = "Home", action = "AccessDenied" });
                routes.MapRoute(
                    name: "otherRoute",
                    template: "otherRoute",
                    defaults: new { controller = "Home", action = "OtherRoute" });
                routes.MapSpaFallbackRoute(
                    name: "react",
                    defaults: new { controller = "Home", action = "Index" }
                );
            });
        }

webpack.config.js

/* eslint-disable */

const path = require('path');
const webpack = require('webpack');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const OptimizeCssPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = (env, argv) => {
  const dev = (argv && argv.mode && argv.mode === 'development') || (env && env.dev === true);

  console.log('********');
  console.log(`WEBPACK USING ${dev ? 'DEV' : 'PROD'} CONFIG`);
  console.log('********');

  // CSS/SCSS HMR Config
  let cssLoaders = ['css-loader', 'sass-loader'];
  dev
    ? (cssLoaders = ['style-loader', ...cssLoaders])
    : (cssLoaders = [{ loader: MiniCssExtractPlugin.loader }, ...cssLoaders]);

  const config = {
    context: __dirname,
    entry: {
      main: './src/index.tsx',
      otherRoute: './src/otherRoute.tsx',
      unauthorized: './src/unauthorized.tsx'
    },
    output: {
      filename: dev ? '[name].bundle.js' : '[name].[hash].bundle.js',
      path: path.resolve(__dirname, '../wwwroot'),
      publicPath: '/'
    },
    optimization: {
      splitChunks: {
        chunks: 'all'
      },
      minimizer: [new TerserPlugin(), new OptimizeCssPlugin()]
    },
    devtool: false,
    resolve: {
      extensions: ['.js', '.json', '.ts', '.tsx'],
      alias: {
        'react-dom': '@hot-loader/react-dom'
      }
    },
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          loader: 'ts-loader',
          options: {
            transpileOnly: true
          }
        },
        {
          test: /\.(scss|css)$/,
          use: cssLoaders
        },
        {
          test: /\.(png|jpg|jpeg|gif|woff|woff2|eot|ttf)$/,
          use: 'url-loader?limit=25000'
        }
      ]
    },
    plugins: [
      new ForkTsCheckerWebpackPlugin(),
      new webpack.SourceMapDevToolPlugin({
        test: /\.(js|css|ts|tsx)($|\?)/
      }),
      new HtmlWebpackPlugin({
        template: './src/views/Index.cshtml',
        filename: '../Views/Home/Index.cshtml',
        inject: false,
        chunks: ['main'],
        minify: false
      }),
      new HtmlWebpackPlugin({
        template: './src/views/OtherRoute.cshtml',
        filename: '../Views/Home/OtherRoute.cshtml',
        inject: false,
        chunks: ['otherRoute'],
        minify: false
      }),
      new HtmlWebpackPlugin({
        template: './src/views/Unauthorized.cshtml',
        filename: '../Views/Home/Unauthorized.cshtml',
        inject: false,
        chunks: ['unauthorized'],
        minify: false
      }),
      new MiniCssExtractPlugin({
        filename: dev ? '[name].bundle.css' : '[name].[hash].bundle.css'
      })
    ],
    mode: argv && argv.mode ? argv.mode : 'development'
  };

  if (env && env.ANALYZE_BUNDLE === 'true') {
    config.plugins.push(new BundleAnalyzerPlugin());
  }

  return config;
};