How to use webpack-dev-server for cshtml files in ASP.NET core 6 MVC

See more:

Javascript

MVC

ASP.NET-Core

, +

i use webpack in my asp.net core 6 mvc project. I use webpack-dev-server to run the browser automatically. My question is, how can I see the changes on index.cshtml instead of index.html. (When I change the extension of the html file from html to cshtml, the browser cannot load the cshtml file)

in webpack.config.js:

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const TerserPlugin = require("terser-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

const NodePolyfillPlugin = require("node-polyfill-webpack-plugin"); 

module.exports = {
    entry: {
        opencv: './wwwroot/Source/example1.js',
    },
    mode: 'development',

    devtool: 'inline-source-map',//baraye modiriate khataha
    devServer: {//jahate webpack-dev-server(hmr bedoobe webpack-hot-middleware )
        static: {
            directory: path.join(__dirname,'/wwwroot/distt/' ),
            publicPath: '/devserverdist4/', 
        }, 
        compress: true,
        port: 9003,
        open: true,
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'index1',
        }),     
        new HtmlWebpackPlugin({
            title: 'index2',
            filename: 'index2.html',
        }),

        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
            Popper: ['popper.js', 'default']
        }),
        new MiniCssExtractPlugin({
            //filename: "allstyles_for_bonLarma.css",
            filename: '[name].styles.css',
        }),

        new NodePolyfillPlugin(),//taze ezafe baraye erore fs

        new webpack.DefinePlugin({
            'process.env.ASSET_PATH': JSON.stringify(ASSET_PATH),
        }),
    ],
    output: { 
        filename: '[name].bundle.js',
        path: path.join/*resolve*/(__dirname, '/wwwroot/dist/'),
        publicPath:   '/outputdist1/',        
        clean: true,
    },
    
    optimization: {
        minimize: true,
        minimizer: [new TerserPlugin(), new CssMinimizerPlugin(),],
    },
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: [MiniCssExtractPlugin.loader, "css-loader"],
            },
            {
                test: /\.js?$/,
                use: {
                    loader: 'babel-loader', options: {
                        presets:
                            ['@babel/preset-react', '@babel/preset-env']
                    }
                }
            },
        ]
    },
    resolve: { //taze ezafe baraye erore fs
        fallback: {
            fs: false,
        },
    }
};

What I have tried:

I want to use the webpack-dev-server feature in my mvc project views that have cshtml extension