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

Estoy empezando a trabajar con webpackun node/expressentorno que desarrolla una ReactJSaplicación renderizada del lado del servidor con react-router. Estoy muy confundido acerca del rol de cada paquete webpack para entornos dev y prod (tiempo de ejecución).

Aquí está el resumen de mi comprensión:

webpack: Es un paquete, una herramienta para unir diferentes piezas de una aplicación web y agruparlas en un solo archivo .js (normalmente bundle.js). A continuación, el archivo de resultados se sirve en un entorno de producción para que lo cargue la aplicación y contiene todos los componentes necesarios para ejecutar el código. Las características incluyen reducción de código, minificación, etc.

webpack-dev-server: Es un paquete que ofrece un servidor para procesar los archivos del sitio web. También construye un único archivo .js ( bundle.js) a partir de los componentes del cliente, pero lo sirve en la memoria. También tiene la opción ( -hot) para monitorear todos los archivos de construcción y construir un nuevo paquete en la memoria en caso de cambios en el código. El servidor se sirve directamente en el navegador (ej http:/localhost:8080/webpack-dev-server/whatever.:). La combinación de carga en memoria, procesamiento en caliente y servicio de navegador permite al usuario actualizar la aplicación en el navegador cuando cambia el código, ideal para el entorno de desarrollo.

Si tengo dudas sobre el texto anterior, realmente no estoy seguro sobre el contenido a continuación, así que avíseme si es necesario

Un problema común cuando se usa webpack-dev-servercon node/expresses que webpack-dev-serveres un servidor, como está node/express. Eso hace que este entorno sea complicado para ejecutar tanto el cliente como algún código de nodo / expreso (una API, etc.). NOTA: Esto es lo que he enfrentado, pero sería genial entender por qué sucede eso con más detalles ...

webpack-dev-middleware: Se trata de un middleware con las mismas funciones de webpack-dev-server(empaquetado en memoria, recarga en caliente), pero en formato que se puede inyectar a la server/expressaplicación. De esa manera, tiene una especie de servidor (el webpack-dev-server) interno del servidor de nodo. Vaya: ¿¿¿¿¿¿¿¿¿¿¿¿¿¿¿¿¿¿¿¿¿¿¿¿¿¿¿¿¿ES ESTE UN SUEÑO LOCO ??? ¿Cómo puede esta pieza resolver la ecuación de desarrollo y producción y simplificar la vida?

webpack-hot-middleware: Esto ... Atascado aquí ... encontré esta pieza cuando buscaba webpack-dev-middleware... No tengo idea de cómo usarla.

NOTA FINAL: Lo siento, hay algún pensamiento incorrecto. Realmente necesito ayuda para comprender estas variantes en un entorno complejo. Si es conveniente, agregue más paquetes / datos que construirán el escenario completo.

webpack

Como ha descrito, Webpack es un paquete de módulos, agrupa varios formatos de módulo principalmente para que puedan ejecutarse en un navegador. Ofrece CLI y API de nodo .

webpack-dev-middleware

Webpack Dev Middleware es un middleware que se puede montar en un servidor express para ofrecer la última compilación de su paquete durante el desarrollo. Esto usa webpackla API de nodo en modo de observación y, en lugar de enviar al sistema de archivos, lo envía a la memoria .

A modo de comparación, puede usar algo como en express.staticlugar de este middleware en producción.

webpack-dev-server

Webpack Dev Server es en sí mismo un servidor rápido que se utiliza webpack-dev-middlewarepara servir el último paquete y, además, maneja solicitudes de reemplazo de módulo en caliente (HMR) para actualizaciones de módulo en vivo en el cliente.

webpack-hot-middleware

Webpack Hot Middleware es una alternativa, webpack-dev-serverpero en lugar de iniciar un servidor en sí, le permite montarlo en un servidor exprés existente / personalizado al lado webpack-dev-middleware.

También...

webpack-hot-server-middleware

Solo para confundir aún más las cosas, también existe Webpack Hot Server Middleware que está diseñado para usarse junto con webpack-dev-middlewarey webpack-hot-middlewarepara manejar el reemplazo de módulos en caliente de las aplicaciones renderizadas por el servidor.

A partir de la actualización de 2018 y teniendo en cuenta la nota de webpack-dev-server en su página oficial de GitHub:

Proyecto en mantenimiento Tenga en cuenta que webpack-dev-server se encuentra actualmente en modo de solo mantenimiento y no aceptará funciones adicionales en el corto plazo. La mayoría de las solicitudes de nuevas funciones se pueden realizar con el middleware Express; Por favor, considere usar los ganchos de antes y después en la documentación.

¿Cuál sería la opción natural para construir un paquete web HMR?