web-dev-qa-db-fra.com

Ai-je besoin de webpack-dev-server si j'utilise un serveur de noeud comme express

Je suis en train de suivre des tutoriels pour construire une application isomorphe avec express et react. Je suis confus avec le webpack-dev-server.

Le tutoriel webpack dit à propos du serveur webpack-dev:

Cela lie un petit serveur express sur localhost: 8080 qui sert vos actifs statiques ainsi que le bundle (compilé automatiquement).

Il met automatiquement à jour la page du navigateur lorsqu'un paquet est recompilé (socket.io). Ouvrez http: // localhost: 8080/webpack-dev-server/bundle dans votre navigateur.

Puisque j'ai un serveur express, ai-je vraiment besoin de webpack-dev-server? Ou quels sont les avantages et les inconvénients de son utilisation? Et si je veux utiliser react-hot-loader, le webpack-dev-server est-il nécessaire?

44
Brick Yang

Puisque j'ai un serveur express, ai-je vraiment besoin de webpack-dev-server?

Oui et non. Vous pouvez utiliser une approche hybride, qui configure essentiellement le webpack-dev-server comme proxy. Vous avez votre serveur express qui sert tout sauf les actifs. Si c'est un atout, la demande est transmise/mandatée au webpack-dev-server. Voir la réponse ici pour plus de détails: Comment autoriser webpack-dev-server à autoriser les points d'entrée de react-router

Alternativement, vous pouvez utiliser webpack-dev-middleware et webpack-hot-middleware à la place si vous ne voulez pas gérer toute la logique de proxy difficile et avoir 2 serveurs en cours d'exécution . Voir l'exemple ici: https://github.com/glenjamin/webpack-hot-middleware/blob/master/example/server.js

quels sont les avantages et les inconvénients de son utilisation?

Rechargement en direct et remplacement de module à chaud. Fonction très utile pour le développement à mon avis

Et si je veux utiliser react-hot-loader, le webpack-dev-server est-il nécessaire?

Non, cela fonctionne au-dessus de Webpack interface de remplacement de module à chaud . Vous pouvez créer votre propre "serveur chaud" si vous le souhaitez. Le client webpack-dev-server écoute simplement socket.io pour les mises à jour à chaud et appelle postMessage ( https://github.com/webpack/webpack-dev-server/blob/8e8f540b2f7b35f7b6c3ce616a7fd2215aaa6eea/client/index.js# L64-L67 ) qui est ensuite récupéré par le serveur https://github.com/webpack/webpack/blob/bac9b48bfb0f7dd9732f2faafb43ebb22ee2a2a7/hot/only-dev-server.js#L59-L67 =.

Ou ce que je recommande, c'est que vous pouvez simplement utiliser à la place le middleware webpack-dev-middleware et webpack-hot-middleware. De cette façon, vous n'avez pas à vous soucier de la logique du proxy et vous pouvez facilement intégrer le rechargement à chaud dans votre serveur express existant sans avoir besoin de webpack-dev-server

59
trekforever