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，我是否仍可以某种方式利用该工具的优势？另外，在启动新的React应用程序之后，CreateReactApp的作用是什么？我以为它只会在一开始就被用于夸大模板代码。

Microsoft.AspNetCore.SpaServices.Extensions在所有这些中的作用是什么？

我不需要热模块更换；我不需要服务器端预渲染。我实际上只是在尝试了解如何在调试过程中通过Webpack透明地构建JS。我可以将其连接到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"
        })
    ]
});

请注意，此处的代理设置将用于代理API调用的ASP.Net核心

修改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 TaskRunner扩展程序和：

  "-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 /内容即可 -像这样像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"
        })
    ]
});

Answer 2

我认为，Kram的答案应标记为已接受，因为它确实提供了所需的内容。我最近花了一些时间来设置.NET Core / React / Webpack项目，但无法使spa.UseReactDevelopmentServer正常工作，但是spa.UseProxyToSpaDevelopmentServer却很吸引人。谢谢克拉姆！

以下是我可能会帮助某人的一些陷阱：

webpack.config.js（摘录）：

const path = require('path');
const webpack = require('webpack');

output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'build.[hash].js',
},

devServer: {
    contentBase: path.resolve(__dirname, 'public'),
    publicPath: '/dist',
    open: false,
    hot: true
},

plugins: [
    new webpack.HotModuleReplacementPlugin()
]

DevServer通过publicPath属性设置其根，并完全忽略根中的output.path属性。因此，即使您的输出文件（用于prod）将转到dist文件夹，但在webpack服务器下，默认情况下它们仍将在根目录下提供。如果要保留相同的URL，则必须设置publicPath: '/dist'。这意味着您的默认页面将位于http：// localhost：8083 / dist下。我想不出一种方法来将资产放置在子文件夹下，同时又将索引保留在根目录中（而不是硬编码资产路径）。
您需要HotModuleReplacementPlugin才能观看模式，还需要在devServer配置中进行hot: true设置（或在启动时将其作为参数传递）。
如果您（像我一样）使用open: true复制一些开发服务器配置（默认为false），则将在应用程序启动时打开两个浏览器，而另一个由launchSettings {{ 1}}。一开始有点令人惊讶。

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

Startup.cs（摘录）：

"launchBrowser": true

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

Webpack 5更新

public void ConfigureServices(IServiceCollection services) { services.AddCors(options => { options.AddPolicy(name: "developOrigins", builder => { builder.WithOrigins("http://localhost:8083"); }); }); } public void Configure(IApplicationBuilder app, IWebHostEnvironment env) { if (env.IsDevelopment()) app.UseCors("developOrigins"); }命令不再起作用。使用：

webpack-dev-server

您可能还需要在Webpack 5的"build:hotdev": webpack serve --config webpack.config.development.js中添加target: 'web'才能使热模块重新加载工作：

webpack.config.js

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

Answer 3

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

我使用WebPack Task Runner [https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebPackTaskRunner]

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

Answer 4

扩展在这里：AspNetCore.SpaServices.Extensions

您可以在这里找到示例：https://github.com/RimuTec/AspNetCore.SpaServices.Extensions

使用核心 3.1 或 5.0 与 webpack 反应

使用：spaBuilder.UseWebpackDevelopmentServer(npmScriptName: "start");

将Webpack构建与ASP.NET Core 3.0集成的最佳方法？

4 个答案: