Webpack vs webpack-dev-serveur vs webpack-dev-middleware vs webpack-hot-middleware vs etc

Je commence à travailler avec webpack avec un environnement node/express développant une application rendue côté serveur webpack avec webpack react-router . Je deviens très confus quant au rôle de chaque package Webpack pour les environnements de développement et de développement.

Voici le résumé de ma compréhension:

webpack : est un package, un outil permettant de rassembler différents éléments d’une application Web et d’un bundle, puis de les regrouper dans un seul fichier .js (normalement bundle.js ). Le fichier de résultat est ensuite servi dans un environnement prod pour être chargé par l’application et contient tous les composants nécessaires à l’exécution du code. Les fonctionnalités incluent la réduction du code, la réduction de la taille, etc.

webpack-dev-server : est un package qui offre un serveur pour traiter les fichiers du site Web. Il crée également un seul fichier .js ( bundle.js ) à partir des composants clients mais le sert en mémoire. Si a également l’option ( -hot ) pour surveiller tous les fichiers de construction et créer un nouveau paquet en mémoire en cas de modification du code. Le serveur est servi directement dans le navigateur (ex: http:/localhost:8080/webpack-dev-server/whatever ). La combinaison du chargement en mémoire, du traitement à chaud et du service de navigateur permet à l’utilisateur de mettre à jour l’application sur le navigateur lorsque le code change, idéal pour l’environnement de développement.

Si j’ai des doutes sur le texte ci-dessus, je ne suis pas vraiment sûr du contenu ci-dessous, alors veuillez me conseiller si nécessaire

Un problème courant lors de l’utilisation de webpack-dev-server avec node/express est que webpack-dev-server est un serveur, tout comme node/express . Cela rend cet environnement difficile à exécuter à la fois le client et certains codes de nœud / express (une API, etc.). NOTE: C’est ce à quoi j’ai dû faire face mais je serais ravi de comprendre pourquoi cela se produit plus en détail …

webpack-dev-middleware : Il s’agit d’un middleware avec les mêmes fonctions de webpack-dev-server (regroupement inmemory, rechargement à chaud), mais dans un format pouvant être injecté dans l’application server/express . De cette façon, vous avez une sorte de serveur (le serveur webpack-dev-server ) qui insère le serveur de nœud. Oups: Est-ce un rêve fou ??? Comment cette pièce peut-elle résoudre l’équation du développement et de la production et simplifier la vie

webpack-hot-middleware : Ceci … Coincé ici … a trouvé ce morceau lors de la recherche de webpack-dev-middleware … Aucune idée de comment l’utiliser.

NOTA: Désolé, il y a des idées fausses. J’ai vraiment besoin d’aide pour comprendre ces variantes dans un environnement complexe. S’il y a lieu, veuillez append plus de paquets / données pour construire le scénario entier.

webpack

Comme vous l’avez décrit, Webpack est un bundler de modules, il regroupe principalement différents formats de modules afin qu’ils puissent être exécutés dans un navigateur. Il offre à la fois une API CLI et Node .

webpack-dev-middleware

Webpack Dev Middleware est un middleware qui peut être monté sur un serveur express pour servir la dernière compilation de votre bundle pendant le développement. Cela utilise webpack ‘API Node de webpack en mode veille et au lieu de la générer dans le système de fichiers, elle sort en mémoire .

A titre de comparaison, vous pouvez utiliser quelque chose comme express.static au lieu de ce middleware en production.

webpack-dev-server

Webpack Dev Server est lui-même un serveur express qui utilise webpack-dev-middleware pour servir le dernier bundle et gère en outre les demandes de remplacement de module à chaud pour les mises à jour de module en direct dans le client.

webpack-hot-middleware

Webpack Hot Middleware est une alternative à webpack-dev-server mais au lieu de démarrer un serveur lui-même, il vous permet de le monter sur un serveur express existant / personnalisé avec webpack-dev-middleware .

Aussi…

webpack-hot-server-middleware

Juste pour confondre les choses encore plus, il y a aussi Webpack Hot Server Middleware qui est conçu pour être utilisé avec webpack-dev-middleware et webpack-hot-middleware pour gérer le remplacement à chaud des applications rendues par le serveur.

À compter de la mise à jour en 2018 et compte tenu de la note de webpack-dev-server sur sa page officielle GitHub:

Projet en maintenance Veuillez noter que webpack-dev-server est actuellement en mode maintenance uniquement et n’acceptera aucune fonctionnalité supplémentaire à court terme. La plupart des nouvelles demandes de fonctionnalités peuvent être accomplies avec le middleware Express; s’il vous plaît regarder dans l’utilisation des crochets avant et après dans la documentation.

Quel serait le choix naturel de construire un webpack HMR?