web-dev-qa-db-fra.com

Comment obtenir Webpack et iis Express pour travailler ensemble?

J'ai Angular 2 et Webpack 2 starter qui s'exécutent sur un nœud par Webpack-dev-server, et ce que je dois exécuter depuis Visual Studio avec Web-api.

Le problème vient du moment où angular2-webpack-starter exécute webpack-dev-server sur le port 3000. et IIS Express s'exécute sur un port différent 5000.

Ceci est très important pour moi car je veux utiliser HMR et recharger chaque fois que les fichiers sont modifiés.

Alors, comment peut-on les combiner? courir sur le même port? ou toute autre solution?

asp.netnode.jsiisangularwebpack
9
Shlomi Levi

Je l'ai trouvé ! - Combinaison avec un serveur existant Résumé et exemple:

Vous voudrez peut-être exécuter un serveur principal ou un modèle en développement. Vous ne devez pas utiliser webpack-dev-server en tant que backend. Son seul but est de servir des actifs statiques (webpackés).

Vous pouvez exécuter deux serveurs côte à côte: le serveur Webpack-dev-server et votre serveur principal.

Dans ce cas, vous devez apprendre aux ressources générées par Webpack à envoyer des requêtes au serveur Webpack-dev-server, même lors de l'exécution sur une page HTML envoyée par le serveur principal. D'autre part, vous devez apprendre à votre serveur principal à générer des pages HTML comprenant des balises de script pointant vers des ressources sur le serveur webpack-dev. En plus de cela, vous avez besoin d'une connexion entre webpack-dev-server et le runtime webpack-dev-server pour déclencher des rechargements lors de la recompilation.

Pour que Webpack apprenne à faire des requêtes (pour le chargement de blocs ou HMR) au serveur Webpack-dev-server, vous devez fournir une URL complète dans l'option output.publicPath.

Pour établir une connexion optimale entre webpack-dev-server et son environnement d'exécution, utilisez le mode en ligne avec --inline. La CLI webpack-dev-server inclut automatiquement un point d'entrée qui établit une connexion WebSocket. (Vous pouvez également utiliser le mode iframe si vous pointez --content-base du serveur webpack-dev-server sur votre serveur principal. Si vous avez besoin d’une connexion websocket à votre serveur principal, vous devrez utiliser le mode iframe.

Lorsque vous utilisez le mode en ligne, ouvrez simplement l'URL du serveur principal dans vos navigateurs Web. (Si vous utilisez le mode iframe, ouvrez l'URL/webpack-dev-server/prefixed de webpack-dev-server.)

https://webpack.github.io/docs/webpack-dev-server.html#combining-with-an-existing-server

12
Shlomi Levi

La réponse acceptée concerne la version 1. Si vous utilisez la version 2, vous pouvez utiliser un modèle de vue pour vous aider à démarrer. 

Sur la base des modèles de vue existants, j'ai créé un modèle de vue que vous pouvez installer avec vue-cli. Ce modèle vous permet de démarrer une application vue que vous pouvez étendre ou intégrer à votre environnement existant.

npm install -g vue-cli
vue init delcon/webpack-simple
cd my-project
npm install

devwatch:

Ce modèle a une option supplémentaire d’exécution de devwatch qui surveille les changements de fil au lieu d’utiliser le serveur webpack-dev-server. Cela le rend utilisable pour tout environnement de serveur Web existant. Il utilise livereload pour mettre à jour votre navigateur avec les changements.

npm run devwatch

dev:

pour l'exécuter avec le serveur Webpack-dev-server par défaut, supprimez <script src="http://localhost:35729/livereload.js"></script> dans index.html:

npm run dev

construire:

pour construire votre projet en production:

npm run build
1
Delcon

J'avais le même dilemme et je l'ai résolu en utilisant simplement l'option proxy dans la configuration du serveur de développement webpack:

module.exports = {
    devServer: {
        contentBase: './dist', /* output folder */
        proxy: {
            '/api': {                                 /* I had only to track calls to api, change path to one you need*/
                target: 'http://localhost:15536/'     /* specify your correct IIS port here */
            }
        }
    },
/*other configurations here*/
}

Une fois le code en place, exécutez simplement le projet VS et démarrez le serveur WebPack Dev en parallèle. Désormais, tous les appels de l'application seront redirigés vers votre serveur ASP.NET.

Faites-moi savoir si des questions.

0
nehfi