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

Question

Je commence à travailler avec webpack avec un node/express environnement développement d'un ReactJS côté serveur application rendue avec react-router. Je suis très confus au sujet du rôle de chaque webpack paquet de dev et de prod (runtime) les environnements.

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

webpack: C'est un package, un outil pour joindre ensemble les différents morceaux de l'un et de l'application web bundle puis dans un seul .fichier js (normalement, bundle.js). Le fichier résultat est ensuite servi dans un environnement de prod être chargées par l'application et contient tous les composants nécessaires pour exécuter le code. Les caractéristiques comprennent la réduction de code, minifying, etc.

webpack-dev-server: C'est un paquet qui offre un serveur pour traiter les fichiers du site. Il a également construit une seule .fichier js (bundle.js) à partir de composants de client, mais qui sert en mémoire. Il a également la possibilité (-hot) pour la surveillance de tous les fichiers et de construire un nouveau bundle en mémoire en cas de modifications de code. Le serveur est servi directement dans le navigateur (ex: http:/localhost:8080/webpack-dev-server/whatever). La combinaison de la mémoire de chargement, traitement à chaud et le navigateur de servir, laisser à l'utilisateur d'obtenir l'application de mise à jour sur navigateur lorsque les modifications du code, 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 de savoir le contenu ci-dessous, donc merci de me conseiller si nécessaire

Un problème commun lors de l'utilisation d' webpack-dev-server avec node/express que webpack-dev-server est un serveur, qu'est - node/express. Que fait cet environnement difficile à exécuter à la fois le client et certains node/express code (une API, etc.). NOTE: C'est ce que j'ai rencontrées, mais serait bien de comprendre pourquoi cela se produit dans plus de détails...

webpack-dev-middleware: C'est un middleware avec les mêmes fonctions d' webpack-dev-server (inmemory regroupement, chaud, rechargement), mais dans un format qui peut être injecté à l' server/express application. De cette façon, vous avez une sorte de serveur ( webpack-dev-server) initié le nœud du serveur. Oops: Est-ce un rêve fou ??? Comment cette pièce résoudre le dev et prod équation et rend la vie plus simple

webpack-hot-middleware: Ce... Coincé ici... trouvé cette pièce lors de la recherche d' webpack-dev-middleware... Aucune idée de comment l'utiliser.

NOTE: est Désolé il n'y a aucune mauvaise pensée. J'ai vraiment besoin d'aide afin de comprendre ces variantes dans un environnement complexe. Si conveninent, s'il vous plaît ajouter plus de paquets de données/qui va construire l'ensemble du scénario.

Answer 1

webpack

Comme vous l'avez décrit, Webpack est un module de bundler, il regroupe différents modules de formats principalement de sorte qu'ils peuvent être exécutées dans un navigateur. Il offre à la fois un CLI et le Nœud de l'API.

webpack-dev-middleware

Webpack Dev Intergiciel (middleware qui peut être monté dans une express server pour mettre la dernière compilation de votre bundle en cours de développement. Il utilise webpacks'Nœud de l'API de regarder la mode et à la place de la sortie pour le système de fichiers il les sorties de la mémoire.

Pour la comparaison, vous pouvez utiliser quelque chose comme express.static au lieu de ce middleware dans la production.

webpack-dev-server

Webpack Serveur de Dev est lui-même un express server qui utilise webpack-dev-middleware pour desservir le dernier bundle, et de plus, les poignées de remplacement de module à chaud (HMR) les demandes pour vivre module de mises à jour dans le client.

webpack-hot-middleware

Webpack Chaud Middleware est une alternative à l' webpack-dev-server mais au lieu de commencer un serveur lui-même, il vous permet de le monter dans un existant / custom express server côtés webpack-dev-middleware.

Aussi...

webpack-hot-server-middleware

Juste pour embrouiller encore plus les choses, il y a aussi Webpack à Chaud de Serveur Middleware qui est conçu pour être utilisé conjointement webpack-dev-middleware et webpack-hot-middleware de la poignée de remplacement de module à chaud de serveur de rendu des apps.

Answer 2

Que de la mise à jour en 2018 et compte tenu de la webpack-dev-serveur remarque sur son officiel de la page GitHub:

Projet en Maintenance Veuillez noter que webpack-dev-serveur actuellement en maintenance-mode uniquement et ne seront pas accepter tout des fonctionnalités supplémentaires à court terme. La plupart des nouvelles demandes de fonctionnalités peuvent être accompli avec Express middleware; s'il vous plaît examiner à l'aide de la avant et après les crochets dans la documentation.

Quel serait le choix naturel pour construire un webpack HMR ?