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 acerca de la función de cada paquete webpack para entornos de desarrollo y producción (tiempo de ejecución).
Aquí está el resumen de mi entendimiento:
webpack : es un paquete, una herramienta para unir diferentes piezas de una aplicación web y empaquetarlas en un solo archivo .js (normalmente bundle.js ). Luego, el archivo de resultados se sirve en un entorno de producción para que la aplicación lo cargue 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 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 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 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-server con node/express es que webpack-dev-server es un servidor, al igual que node/express . Eso hace que este entorno sea complicado para ejecutar tanto el cliente como algún código de nodo/exprés (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 : este es un middleware con las mismas funciones que webpack-dev-server (empaquetado en memoria, recarga en caliente), pero en un formato que se puede inyectar en el server/express aplicación rápida. De esa manera, tiene una especie de servidor (el webpack-dev-server ) dentro del servidor del nodo. Oops: ¿Es esto 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 usarlo.
NOTA FINAL: Lo siento, hay algún pensamiento erróneo. 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.
webpackComo ha descrito, Webpack es un paquete de módulos, agrupa varios formatos de módulos principalmente para que puedan ejecutarse en un navegador. Ofrece una CLI y una API de nodo .
webpack-dev-middleware Webpack Dev Middleware es un middleware que se puede montar en un servidor express para ofrecer la compilación más reciente de su paquete durante el desarrollo. Esto utiliza la API de nodo de webpack en modo de observación y, en lugar de enviar al sistema de archivos, envía a la memoria .
A modo de comparación, puede usar algo como
express.staticen lugar de este middleware en producción.
webpack-dev-server Webpack Dev Server es en sí mismo un servidor rápido que utiliza webpack-dev-middleware para servir el paquete más reciente y, además, maneja las solicitudes de reemplazo de módulos en caliente (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 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-middleware y webpack-hot-middleware para manejar el reemplazo de módulos calientes de aplicaciones renderizadas por servidor.
A partir de la actualización en 2018 y considerando la nota 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 funciones nuevas se pueden realizar con el middleware Express; intente utilizar los ganchos antes y después en la documentación.
¿Cuál sería la elección natural para construir un webpack HMR?