如何在 ASP.NET core 6 MVC 中對 cshtml 文件使用 webpack-dev-server

Question

我在我的 asp.net 核心 6 mvc 項目中使用 webpack。 我使用 webpack-dev-server 自動運行瀏覽器。 我的問題是，我怎樣才能看到 index.cshtml 而不是 index.html 的變化。 （當我將 html 文件的擴展名從 html 更改為 cshtml 時，瀏覽器無法加載 cshtml 文件）

在 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,
        },
    }
};

我想在具有 cshtml 擴展名的 mvc 項目視圖中使用 webpack-dev-server 功能

Answer 1

我不認為你能做到這一點。 Razor cshtml 文件需要在構建和運行項目之前將所有內容包含在視圖中，以便它可以構建 cshtml 並將其轉換為 html。

HtmlWebpackPlugin僅適用於 html，因此您可以選擇的唯一選項是在您的 .net 核心項目中提供 html 文件。