web-dev-qa-db-ja.com

WebpackビルドをASP.NET Core 3.0と統合する最良の方法は？

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/1289 。

私は今、デバッグするたびに、理想的には変更されたJSコードでのみVSがwebpackを実行する最良の方法を理解しようとしています。これは私がUseWebpackDevMiddlewareから得ていた値です。私のアプリはReactアプリです。アプリがCreateReactAppから起動されたものの、私がそうではなかった場合、これに代わる新しいものがあるようです。 （これから述べられ、その後分離されたアプリは「排出」と呼ばれます。）私のアプリがCreateReactAppを利用していなくても、その機能が何であれそれを利用することはどういうわけか可能ですか？また、新しいReactアプリケーションをブートストラップした後のCreateReactAppの役割は何ですか？私はそれが最初の段階でテンプレートコードをインフレートするためにのみ使用されるだろうと想像しました。

これらすべてにおけるMicrosoft.AspNetCore.SpaServices.Extensionsの役割は何ですか？

ホットモジュールの交換は必要ありません。サーバー側の事前レンダリングは必要ありません。私は本当に、自分のJSがデバッグプロセスの一部として（Webpackを介して）透過的にビルドする方法を理解しようとしています。これは、MSBuildにフックできるものですか？他の人がアップグレードするときに同じ質問に直面することになると思います。

提案をありがとう。

reactjsasp.net-corewebpackmsbuildasp.net-core-3.0
15
BenjiFB

あなたはVSについて言及しています。私のソリューションはVisual Studioには適していますが、VS Codeには適していません。

私はWebPackタスクランナーを使用します： https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebPackTaskRunner

これにより、webpack.config.jsタスクがVisual Studioの「タスクランナーエクスプローラー」に追加され、これらのタスクを「ビルド前」や「ビルド後」などのイベントにバインドできます。

2
Jamie F

だから、私はずっとスムーズな開発プロセスのためにHMRにUseWebpackDevMiddlewareを使用していました-結局私は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 が便利であることがわかりました

また、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 /コンテンツを提供することができます。

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