Webpack es un constructor de proyectos que contiene una serie de funciones útiles para desarrollar aplicaciones.
¿Qué características proporciona Webpack?
A continuación, describiré brevemente las capacidades de Webpack. Creo que esto será suficiente para comprender finalmente por qué se necesita esta herramienta.
Modularidad
Con la ayuda de Webpack, puede dividir el código de su proyecto (durante el desarrollo) en un grupo de módulos y luego juntarlo en un archivo en la versión de lanzamiento.
La modularidad le permite dividir el producto en dos versiones: lanzamiento (versión final) y producción (en producción). En el futuro, este proyecto será más fácil de mantener.
Transpilacion
La transpilación es el proceso automatizado de reescribir código de un idioma a código similar en otro idioma.
El propio Webpack, utilizando Babel , reescribirá su código de los nuevos estándares de JavaScript a uno posterior. Con esto, no tiene que preocuparse por el rendimiento de su aplicación en navegadores más antiguos.
Servidor integrado
Webpack tiene su propio servidor con modo de control de cambios. Es decir, al cambiar un archivo, el paquete web actualiza los archivos y muestra los cambios en el proyecto.
Por lo general, el servidor con el proyecto se inicia mediante el comando npm run dev console y se encuentra en http: // localhost: 8080.
Separación y optimización
Webpack puede dividir el archivo de salida de la versión (común con todos los módulos) en varios archivos más pequeños. Esto se hace para evitar sobrecargar el navegador del usuario la primera vez que se carga la aplicación. Esto se hace en el marco de grandes proyectos: sistemas CRM y grandes aplicaciones web .
Y esas no son todas las características de Webpack … aunque esto es suficiente para una comprensión general de la herramienta. Si tienes ganas de aprender esta tecnología, a continuación te dejo un enlace a la documentación oficial .
Webpack y Gulp: cuáles son las diferencias
Webpack es un administrador de tareas evolucionado (o administrador de tareas). Anteriormente, antes de la llegada de Webpack, la gente usaba Gulp y Grunt, que también sabían cómo construir un proyecto (principalmente diseño) y controlar los cambios en el proyecto en tiempo real.
Webpack ha recopilado un poco de todo de sus predecesores y ha agregado las suyas propias, por lo que tiene características que no están, por ejemplo, en Gulp. Por ejemplo, Gulp no tiene su propio dev-server, no hay recarga en caliente (es decir, cuando el archivo JavaScript cambia, Webpack podrá representar el componente en tiempo real), no hay modo de prueba unitaria, no no es babel (fuera de la caja), y la velocidad de compilación de JavaScript es notablemente menor.