Click here to Skip to main content
15,664,273 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
i use webpack in my 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: {
                            ['@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

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900