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-dev-middleware(et potentiellementwebpack-hot-middleware) si vous vouliez écrire votre propre serveur de développement personnalisé. À moins que vous ne souhaitiez une fonctionnalité spécifique quiwebpack-dev-serverne possède pas, vous devez simplement l'utiliser.Réponses:
webpackComme 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-middlewareWebpack 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 .webpack-dev-serverWebpack 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-middlewareWebpack 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-middlewarePour compliquer encore plus les choses, il existe également Webpack Hot Server Middleware qui est conçu pour être utilisé parallèlement
webpack-dev-middlewareetwebpack-hot-middlewarepour gérer le remplacement de module à chaud des applications rendues par le serveur.la source
À partir de la mise à jour en 2018 et en tenant compte de la note webpack-dev-server sur sa page officielle GitHub:
Quel serait le choix naturel pour construire un webpack HMR?
la source
Use webpack-serve for a fast alternative. Use webpack-dev-server if you need to test on old browsers.vous voudrez peut-être essayer le service Webpack .