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

webpack dev server-- mode development

Question

Estoy empezando a trabajar con webpack con un entorno de node/express desarrollando una aplicación renderizada del lado del servidor ReactJS con react-router . Me estoy confundiendo mucho sobre el papel de cada paquete webpack para entornos de desarrollo y producción (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 bundle.js en un solo archivo .js (normalmente bundle.js ). El archivo de resultados se sirve en un entorno prod para ser cargado por 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 crea un único archivo .js ( bundle.js ) a partir de 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 memoria en caso de cambios de código. El servidor se sirve directamente en el navegador (por ejemplo: http:/localhost:8080/webpack-dev-server/whatever ). La combinación de carga en memoria, procesamiento en caliente y servicio del 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-server con node/express es que webpack-dev-server es un servidor, al igual que node/express . Eso hace que este entorno sea difícil de ejecutar tanto el cliente como algún código de nodo / expreso (una API, etc.). NOTA: Esto es a lo que me he enfrentado, pero sería genial entender por qué sucede eso con más detalles ...

webpack-dev-middleware : es un middleware con las mismas funciones que el webpack-dev-server (agrupación inmemory, recarga en caliente), pero en formato que puede inyectarse en el server/express aplicación server/express . De esa manera, tiene una especie de servidor (el webpack-dev-server ) dentro del servidor de nodo. Oops: ¿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 al buscar webpack-dev-middleware ... No tengo idea de cómo usarlo.

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

Answer 1

webpack

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

webpack-dev-middleware

Webpack Dev Middleware es middleware que se puede montar en un servidor express para servir la última compilación de su paquete durante el desarrollo. Esto utiliza la API Node de webpack en modo de observación y, en lugar de enviarla al sistema de archivos, la envía a la memoria .

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

webpack-dev-server

Webpack Dev Server es en sí mismo un servidor express que utiliza webpack-dev-middleware para servir el paquete más reciente y además maneja las solicitudes de reemplazo de módulos activos (HMR) para actualizaciones de módulos en vivo en el cliente.

webpack-hot-middleware

Webpack Hot Middleware es una alternativa a webpack-dev-server pero en lugar de iniciar un servidor en sí mismo, le permite montarlo en un servidor express existente / personalizado junto con webpack-dev-middleware .

También...

webpack-hot-server-middleware

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

Answer 2

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

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

¿Cuál sería la elección natural para construir un HMR webpack?