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-dev-middleware(y potencialmentewebpack-hot-middleware) si quisiera escribir su propio servidor de desarrollo personalizado. A menos que haya una función específica que desee quewebpack-dev-serverno tenga, debe usarla.Respuestas:
webpackComo 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-middlewareWebpack 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 .webpack-dev-serverWebpack 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-middlewareWebpack 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 ladowebpack-dev-middleware.También...
webpack-hot-server-middlewareSolo 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-middlewareywebpack-hot-middlewarepara manejar el reemplazo de módulos en caliente de las aplicaciones renderizadas por el servidor.fuente
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:
¿Cuál sería la opción natural para construir un paquete web HMR?
fuente
Use webpack-serve for a fast alternative. Use webpack-dev-server if you need to test on old browsers.Entonces, es posible que desee probar webpack-serve .