web-dev-qa-db-fra.com

La meilleure façon d'intégrer les versions de webpack avec ASP.NET Core 3.0?

Je mets à niveau mon application ASP.NET Core vers V3 et j'utilise Visual Studio 2019 pour le développement/débogage. Le processus s'est déroulé sans heurts à l'exception de ceci:

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

UseWebpackDevMiddleware n'est plus: https://github.com/aspnet/AspNetCore/issues/1289 .

Je cherche maintenant à comprendre la meilleure façon d'exécuter VS webpack à chaque fois que je débogue, idéalement uniquement sur du code JS qui a changé. C'était la valeur que j'obtenais de UseWebpackDevMiddleware. Mon application est une application React, et il semble qu'il y ait un nouveau remplacement pour cela si votre application a été démarrée à partir de CreateReactApp, mais la mienne ne l'était pas. (Je crois que les applications qui ont indiqué cela, mais ensuite séparés sont appelés "éjectés".) Est-il possible pour moi de tirer parti de cette fonctionnalité, même si mon application ne tire pas parti de CreateReactApp? De plus, quel est le rôle de CreateReactApp après avoir démarré votre nouveau React application? J'imaginais qu'il ne serait utilisé que pour gonfler le code du modèle au premier coup.

Quel est le rôle de Microsoft.AspNetCore.SpaServices.Extensions dans tout cela?

Je n'ai pas besoin de remplacement de module à chaud; Je n'ai pas besoin de pré-rendu côté serveur. J'essaie vraiment de comprendre comment obtenir mon JS pour construire de manière transparente (via Webpack) dans le cadre de mon processus de débogage. Est-ce quelque chose pour lequel je pourrais me connecter à MSBuild? J'imagine que d'autres vont faire face à la même question lors de leur mise à niveau.

Merci pour toutes suggestions.

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

Vous mentionnez VS. Ma solution est bonne pour Visual Studio, mais pas pour VS Code.

J'utilise WebPack Task Runner: https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebPackTaskRunner

Cela ajoute des tâches webpack.config.js dans l '"Explorateur du Gestionnaire de tâches" dans Visual Studio, et vous pouvez ensuite lier ces tâches à des événements comme "Avant la génération" ou "Après la construction"

2
Jamie F

Donc, j'utilisais UseWebpackDevMiddleware pour HMR pour un processus de développement beaucoup plus fluide - Au final, je suis revenu à l'utilisation de webpack-dev-server

Pas:

1) Ajoutez un package à package.json: "webpack-dev-server": "3.8.2", 2) Ajoutez 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"
        })
    ]
});

Notez que le paramètre de proxy ici sera utilisé pour effectuer un proxy vers le noyau ASP.Net pour les appels d'API

Modifier launchSettings.json pour pointer vers 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/"
    }
  }

(J'ai également eu quelques problèmes avec la configuration des bons emplacements dans le webpack, et j'ai trouvé this utile

Il faudra également démarrer webpack-dev-server, ce qui peut être fait via un script npm:

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

Et puis c'est bootstrapé

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

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

(ou vous pouvez installer l'extension du gestionnaire de tâches npm et:

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

Sinon, je me rends compte que vous pouvez utiliser le proxy dans l'autre sens en utilisant ce qui suit - de cette façon, toute demande sous "dist" sera transmise au proxy 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");
                }
            });

Et puis vous n'avez plus besoin de proxy à partir de ce dos et pouvez simplement servir/dist/content - à la fois chaud et précompilé par le fournisseur en utilisant comme web.config.js comme ceci:

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