Reactjs 将网页包版本与ASP.NET Core 3.0集成的最佳方法？

我正在将我的ASP.NET核心应用升级到V3，并使用Visual Studio 2019进行开发/调试。除此之外，整个过程一直很顺利：

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

UseWebpackDevMiddleware不再是：

我现在想了解让VS在每次调试时都运行webpack的最佳方法，理想情况下只在已经更改的JS代码上运行。这是我从

UseWebpackDevMiddleware

获得的值。我的应用程序是一个React应用程序，如果你的应用程序是从CreateReact应用程序启动的，似乎有一些新的替代程序，但我的不是。（我相信从这里声明但随后分离的应用程序被称为“弹出”）我是否有可能仍然利用该功能，即使我的应用程序没有利用CreateReactApp？另外，CreateReactApp在引导新的React应用程序后扮演什么角色？我想象它只会在第一次使用时用于膨胀模板代码

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

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

谢谢您的建议。

您提到了VS。我的解决方案适用于Visual Studio，但不适用于VS代码

我使用WebPack任务运行程序：

---

这会将webpack.config.js任务添加到Visual Studio中的“任务运行器资源管理器”中，然后您可以将这些任务绑定到事件，如“生成前”或“生成后”

因此，我使用HMR的

UseWebpackDevMiddleware

进行更为平滑的开发过程-最后我恢复使用

webpack开发服务器

            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");
                }
            });

步骤：

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

以指向网页包开发服务器：

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

（另外，我在webpack中配置正确的位置时遇到一些问题，并发现它们很有用。）

此外，还需要启动可通过npm脚本完成的webpack dev server：

  "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/content即可 -使用as 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"
        })
    ]
});

---

在我看来，Kram的答案应该被标记为被接受，因为它确实提供了所需的东西。我最近花了一些时间建立了一个.NET核心/React/Webpack项目，我无法让

spa.UseReactDevelopmentServer

工作，但是

spa.useproxytopad开发服务器

工作得很好。谢谢Kram

以下是我的几个问题，它们可能会帮助某些人：

webpack.config.js（摘录）：

DevServer通过

publicPath

属性设置其根目录，并完全忽略根目录中的

output.path

属性。因此，即使您的输出文件（用于prod）将转到webpack server下的dist文件夹，默认情况下，它们将在根目录下提供服务。如果要保留相同的url，必须设置

publicPath:'/dist'

。 这意味着您的默认页面将处于http://localhost:8083/dist. 我想不出一种方法来将资源放在子文件夹下，同时将索引保留在根目录中（除了硬编码资源的路径）

您需要

HotModuleReplacementPlugin

才能观察模式是否正常工作，以及devServer配置中的

hot:true

设置（或在启动时将其作为参数传递）

如果您（像我一样）使用

open:true

（默认值为false）复制一些dev服务器配置，那么在应用程序启动时将打开两个浏览器，而另一个浏览器将由launchSettings打开

“launchBrowser”：true

。一开始就有点意外

此外，您必须为项目启用CORS，否则后端调用将被阻止：

Startup.cs（节选）：

如果我想到其他任何事情，我会更新答案，希望这对某人有所帮助

第5页更新

webpack dev server

命令不再工作。请使用：

"build:hotdev": webpack serve --config webpack.config.development.js

您可能还需要在webpack 5中的

webpack.config.js

中添加

target:'web'

，以启用热模块重新加载：

module.exports = {
    target: 'web'
}

---

或者，您可能需要创建一个browserlist文件。希望这个问题尽快得到解决。

扩展名在这里：AspNetCore.SpaServices.Extensions

您可以在此处找到示例：

具有核心3.1或5.0 使用网页包进行反应

---

使用：

spaBuilder.UseWebpackDevelopmentServer（npmScriptName:“start”）；

谢谢您的评论。但是编辑JavaScript（或者，在我的情况下，编辑Typescript）会吗文件在调试时触发内置VS？双击task Runner Explorer中的任务将启动它。因此，您可以跳过对生成的绑定，然后只需双击Watch-Development即可启动

网页包正在监视文件…

它将继续运行。但这不会进行热模块更换，而热模块是主要的精简功能g哪个

使用webpackdevmiddleware

offers@JamieF扩展的链接已断开，因为它包含了作为查询参数一部分的结束方括号。这应该可以工作：Task Runner上的“Watch-Development”可以完美地工作。这对我来说应该是真正的答案，因为这允许您

module.exports = {
    target: 'web'
}