Webpack vs webpack-dev-server vs webpack-dev-middleware vs webpack-hot-middleware vs etc.

Je commence à travailler avec webpackun node/expressenvironnement développant une ReactJSapplication de rendu côté serveur avec react-router. Je suis très confus quant au rôle de chaque package Webpack pour les environnements dev et prod (runtime).

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

webpack: Est un package, un outil pour réunir différents éléments d'une application web et les regrouper ensuite 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 pour exécuter le code. Les fonctionnalités incluent le code de réduction, la réduction, etc.

webpack-dev-server: Est un package qui offre un serveur pour traiter les fichiers du site Web. Il construit également un seul fichier .js ( bundle.js) à partir des composants clients mais le sert en mémoire. Il a également la possibilité ( -hot) de surveiller tous les fichiers de construction et de créer un nouveau bundle en mémoire en cas de changement de 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 du 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 vraiment pas sûr du contenu ci-dessous, veuillez donc m'en informer si nécessaire

Un problème courant lors de l'utilisation webpack-dev-serveravec node/expressest qu'il webpack-dev-servers'agit d'un serveur, tel quel node/express. Cela rend cet environnement difficile à exécuter à la fois le client et un code nœud / express (une API, etc.). REMARQUE: C'est ce à quoi j'ai été confronté, mais ce serait formidable de comprendre pourquoi cela se produit plus en détail ...

webpack-dev-middleware: Il s'agit d'un middleware avec les mêmes fonctions que webpack-dev-server(regroupement en mémoire, rechargement à chaud), mais dans un format qui peut être injecté dans l' server/expressapplication. De cette façon, vous avez une sorte de serveur (le webpack-dev-server) initié du serveur de nœuds. 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: Ce ... Coincé ici ... J'ai trouvé cette pièce en cherchant webpack-dev-middleware... Je ne sais pas comment l'utiliser.

ENDNOTE: Désolé, il y a une mauvaise pensée. J'ai vraiment besoin d'aide pour comprendre ces variantes dans un environnement complexe. Si cela vous convient, veuillez ajouter plus de packages / données qui permettront de construire l'ensemble du scénario.

webpack

Comme vous l'avez décrit, Webpack est un bundler de modules, il regroupe divers formats de modules principalement afin qu'ils puissent être exécutés dans un navigateur. Il offre à la fois une CLI et une API 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 webpackl'API Node de en mode surveillance et au lieu de sortir vers le système de fichiers, il sort en mémoire .

À titre de comparaison, vous pouvez utiliser quelque chose comme à la express.staticplace de ce middleware en production.

webpack-dev-server

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

webpack-hot-middleware

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

Aussi...

webpack-hot-server-middleware

Pour compliquer encore plus les choses, il existe également Webpack Hot Server Middleware qui est conçu pour être utilisé parallèlement webpack-dev-middlewareet webpack-hot-middlewarepour gérer le remplacement de module à chaud des applications rendues par le serveur.

À partir de la mise à jour en 2018 et en tenant compte de la note 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 effectuées avec le middleware Express; veuillez examiner l'utilisation des crochets avant et après dans la documentation.

Quel serait le choix naturel pour construire un webpack HMR?