reactjs - 将 webpack 构建与 ASP.NET Core 3.0 集成的最佳方式？

Question

我正在将 ASP.NET Core 应用升级到 V3，并使用 Visual Studio 2019 进行开发/调试。除了这一点之外，整个过程都很顺利:

public void Configure(…..
                app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
                {
                    HotModuleReplacement = false,
                    ReactHotModuleReplacement = false
                });

UseWebpackDevMiddleware 不再存在:https://github.com/aspnet/AspNetCore/issues/12890 .

我现在希望了解每次调试时让 VS 运行 webpack 的最佳方式，最好只在已更改的 JS 代码上运行。这是我从 UseWebpackDevMiddleware 获得的值。我的应用程序是一个 React 应用程序，如果您的应用程序是从 CreateReactApp 启动的，那么似乎有一些新的替代品，但我的应用程序不是。 (我相信从此声明但随后分离的应用程序被称为“弹出”。)即使我的应用程序不利用 CreateReactApp，我是否仍然可以利用该设施？另外，CreateReactApp 在引导您的新 React 应用程序后起什么作用？我想它只会用于第一次膨胀模板代码。

Microsoft.AspNetCore.SpaServices.Extensions 在这一切中扮演什么角色？

我不需要热更换模块；我不需要服务器端预渲染。我真的只是想了解如何让我的 JS 透明地构建(通过 Webpack)作为我的调试过程的一部分。我可以将其连接到 MSBuild 中吗？我想其他人在升级时也会面临同样的问题。

感谢您的任何建议。

Answer 1

因此，我使用 UseWebpackDevMiddleware 进行 HMR，以获得更顺畅的开发过程 - 最后我恢复使用 webpack-dev-server

步骤:

1) 将包添加到 package.json: "webpack-dev-server": "3.8.2",2)添加webpack.development.js

const merge = require('webpack-merge');
const common = require('./webpack.config.js');
const ExtractCssPlugin = require('mini-css-extract-plugin');

const webpackDevServerPort = 8083;
const proxyTarget = "http://localhost:8492";

module.exports = merge(common(), {
    output: {
        filename: "[name].js",
        publicPath: '/dist/'
    },
    mode: 'development',
    devtool: 'inline-source-map',
    devServer: {
        compress: true,
        proxy: {
            '*': {
                target: proxyTarget
            }
        },
        port: webpackDevServerPort
    },
    plugins: [
        new ExtractCssPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css"
        })
    ]
});

请注意，此处的代理设置将用于代理到 ASP.Net core 进行 API 调用

修改launchSettings.json以指向webpack-dev-server:

"profiles": {
    "VisualStudio: Connect to HotDev proxy": {
      "commandName": "Project",
      "launchBrowser": true,
      "launchUrl": "http://localhost:8083/",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      },
      "applicationUrl": "http://localhost:8492/"
    }
  }

(我在 webpack 中配置正确的位置时也遇到了一些问题，发现 this 很有用

此外，还需要启动 webpack-dev-server，这可以通过 npm 脚本完成:

  "scripts": {
    "build:hotdev": "webpack-dev-server --config webpack.development.js --hot --inline",

然后这是引导的

            app.UseSpa(spa =>
            {
                spa.Options.SourcePath = "ClientApp";

                if (env.IsDevelopment())
                {
                    spa.UseReactDevelopmentServer(npmScript: "build:hotdev");
                }
            });

(或者您可以安装 npm 任务运行程序扩展并且:

  "-vs-binding": {
    "ProjectOpened": [
      "build:hotdev"
    ]
  }

或者，我意识到您可以使用以下方式代理其他方式 - 这样任何对“dist”下的请求都将被推送到代理 webpack-dev-server

            app.UseSpa(spa =>
            {
                spa.Options.SourcePath = "dist";

                if (env.IsDevelopment())
                {
                    // Ensure that you start webpack-dev-server - run "build:hotdev" npm script
                    // Also if you install the npm task runner extension then the webpack-dev-server script will run when the solution loads
                    spa.UseProxyToSpaDevelopmentServer("http://localhost:8083");
                }
            });

然后您就不再需要从后面代理，只需提供/dist/内容即可 - 热编译和 vendor 预编译都使用 web.config.js，如下所示:

module.exports = merge(common(), {
    output: {
        filename: "[name].js",
        publicPath: '/dist/',
    },
    mode: 'development',
    devtool: 'inline-source-map',
    devServer: {
        compress: true,
        port: 8083,
        contentBase: path.resolve(__dirname,"wwwroot"),
    },

    plugins: [
        new ExtractCssPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css"
        })
    ]
});