Webpack vs webpack-dev-serveur vs webpack-dev-middleware vs webpack-hot-middleware vs etc.
Je commence à travailler avec webpack avec un node/express environnement développant une application ReactJS rendue côté serveur avec react-router. Je suis très confus quant au rôle de chaque paquet Webpack pour les environnements de développement et de développement (exécution).
Voici le résumé de ma compréhension:
webpack: est un paquet, un outil permettant de réunir différentes parties d’une application Web et de les regrouper dans un seul fichier .js (normalement bundle.js). Le fichier de résultat est ensuite servi dans un environnement prod à charger par l'application et contient tous les composants nécessaires à l'exécution du code. Les fonctionnalités comprennent la réduction du code, la minification, etc.
webpack-dev-server: Est un package qui offre un serveur pour traiter les fichiers du site Web. Il crée également un fichier .js unique (bundle.js) depuis les composants clients mais le sert en mémoire. Il a aussi l'option (-hot) pour surveiller tous les fichiers de construction et créer un nouvel ensemble 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 de la gestion du navigateur permet à l'utilisateur de mettre l'application à jour 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, alors merci de me prévenir si nécessaire =
Un problème courant lors de l'utilisation de webpack-dev-server avec node/express est-ce webpack-dev-server est un serveur, comme node/express. Cela rend cet environnement difficile pour exécuter à la fois le client et un code de nœud/express (une API, etc.). NOTE: C’est ce à quoi j’ai été confronté, mais il serait bon de comprendre pourquoi cela se produit plus en détail ...
webpack-dev-middleware: Ceci est un middleware avec les mêmes fonctions de webpack-dev-server (groupement en mémoire, rechargement à chaud), mais dans un format pouvant être injecté à la server/express application. De cette façon, vous avez une sorte de serveur (le webpack-dev-server) initié le serveur de noeud. Oops: Est-ce un rêve fou ??? Comment cette pièce peut-elle résoudre l'équation dev et prod et rendre la vie plus simple
webpack-hot-middleware: This ... Coincé ici ... a trouvé cette pièce en cherchant webpack-dev-middleware... Aucune idée de comment l’utiliser.
NOTA: Désolé, il n’ya pas de 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 construiront l'ensemble du scénario.
webpack
Comme vous l'avez décrit, Webpack est un bundle de modules. Il regroupe principalement divers formats de modules afin qu'ils puissent être exécutés dans un navigateur. Il offre à la fois un CLI et API de nœud .
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. Ceci utilise webpack 's Node API dans mode de surveillance et = et au lieu de le transmettre au système de fichiers, il sortie en mémoire .
A titre de comparaison, vous pouvez utiliser quelque chose comme
express.staticau lieu de ce middleware en production.
webpack-dev-server
Webpack Dev Server est lui-même un moyen express serveur qui utilise webpack-dev-middleware pour servir le dernier ensemble et traiter en plus 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-server mais au lieu de démarrer un serveur lui-même, il vous permet de le monter dans un serveur express existant/personnalisé aux côtés de webpack-dev-middleware.
Aussi...
webpack-hot-server-middleware
Juste pour compliquer encore les choses, il y a aussi Webpack Hot Server Middleware, conçu pour être utilisé aux côtés de webpack-dev-middleware et webpack-hot-middleware pour gérer le remplacement à chaud du module des applications rendues par le serveur.
À partir de la mise à jour de 2018 et en tenant compte de la webpack-dev-server note sur sa page officielle GitHub:
Projet en maintenance Veuillez noter que webpack-dev-server est actuellement en mode de maintenance uniquement et n'acceptera aucune fonctionnalité supplémentaire à court terme. La plupart des nouvelles demandes de fonctionnalités peuvent être réalisées avec le middleware Express. Regardez s'il vous plaît en utilisant les crochets avant et après dans la documentation.
Quel serait le choix naturel de construire un pack Web HMR?