Лучший способ интегрировать сборки веб-пакетов с ASP.NET Core 3.0?

Вы упомянули VS. Мое решение подходит для Visual Studio, но не для VS Code.

Я использую средство запуска задач WebPack: https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebPackTaskRunner

Это добавляет задачи webpack.config.js в «Task Runner Explorer» в Visual Studio, и затем вы можете привязать эти задачи к таким событиям, как «Before Build» или «After Build».

Итак, я использовал 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 для вызовов 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-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 task runner и:

  "-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 - как горячую, так и предварительно скомпилированную поставщиком, используя как 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"
        })
    ]
});

На мой взгляд, ответ Крама следует отметить как принятый, поскольку он действительно дает то, что нужно. Недавно я потратил некоторое время на настройку проекта .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()
]

1. DevServer устанавливает свой корень свойством publicPath и полностью игнорирует свойство output.path в корне. Таким образом, даже если ваши выходные файлы (для prod) будут попадать в папку dist, на сервере webpack они по умолчанию будут обслуживаться под корнем. Если вы хотите сохранить тот же URL-адрес, вам нужно установить publicPath: '/dist'. Это означает, что ваша страница по умолчанию будет находиться по адресу http: // localhost: 8083 / dist. Я не мог придумать способ разместить активы в подпапке, сохранив индекс в корне (кроме жесткого кодирования пути для активов).

2. Вам понадобится HotModuleReplacementPlugin для того, чтобы режим просмотра работал, а также hot: true параметр в конфигурации devServer (или передать его как параметр при запуске).

3. Если вы (как и я) скопируете некоторую конфигурацию сервера разработки с open: true (по умолчанию false), вы закончите с двумя браузерами, открытыми при запуске приложения, поскольку другой открывается с помощью launchSettings "launchBrowser": true. Поначалу это было немного неожиданно.

Кроме того, вам нужно будет включить CORS для вашего проекта, иначе ваши внутренние вызовы будут заблокированы:

Startup.cs (отрывок):

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 5

webpack-dev-server команда больше не работает. Использовать:

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

Вам также может потребоваться добавить target: 'web' к вашему webpack.config.js в Webpack 5, чтобы разрешить перезагрузку горячего модуля:

module.exports = {
    target: 'web'
}

В качестве альтернативы вам может потребоваться создать файл списка браузера. Надеюсь, эта проблема скоро будет исправлена.

Расширение здесь: AspNetCore.SpaServices.Extensions

Примеры можно найти здесь: https://github.com/RimuTec/AspNetCore.SpaServices.Extensions < / а>