Compilación con Watch y Web server local

Recuerdo que el repository de todo lo desarrollado lo podéis encontrar en el siguiente LINK. 

Además, las ramas estarán numeradas según la lección. Las ramas relativas a este artículo son webpack course 006.  

Puedes cambiar a la rama relacionada con el este artículo con el comando: git checkout webpack_course_006

Qué es la modalidad Whatch

Hasta ahora, para probar cada cambio realizado en los archivos fuentes, era necesario generar una nueva compilación con el comando npm run build, que todos conocemos ahora. Este proceso es muy incómodo en la fase de desarrollo.

Generar una compilación para probar cada modificación es impensable.

Para superar este inconveniente Webpack nos ofrece la modalidad Watch. Esta modalidad “observa” todos los archivos que constituyen el gráfico de las dependencias, nominado en los anteriores artículos, y tan pronto como uno de ellos sufre cambios, Webpack vuelve a compilar todo el proyecto.

Para poder aprovechar esta modalidad, se necesita solo definir un nuevo script en el package.json que llamaremos watch, 

Ahora si escribes npm run watch en la terminal, podrás notar que Webpack no sale del proceso, si no que está siempre “escuchando”, reaccionando a cada modificación de un archivo.

Para probar esta función:

• Modifica cualquier archivo;
• Guardalo;
• Ve al buscador y vuelve a cargar la página.

Podrás ver la modificación aportada sin haber tenido que generar ninguna nueva compilación.

Dev-server local

El tener que volver a cargar la página sigue sin ser una solución óptima.

Por este motivo Webpack nos da la posibilidad de de usar un dev-server local, que abrirá automáticamente nuestra aplicación en el buscador y nos dará la posibilidad de live-reload, es decir, con cada cambio del código, no solo se volverá a compilar el proyecto, sino que nuestro navegador se actualizará automáticamente sin necesidad de actualizar manualmente la página.

En este LINK encontraréis la documentación oficial.

Como usar el dev-server

Para usarlo es necesario, antes de todo, instalarlo como dependencia de desarrollo con el siguiente comando: 

después se tiene que añadir en el webpack.config una nueva propiedad que dirá al dev-server desde donde empezar.

Como último paso añadimos en la sección scripts del package.json el comando para activarlo.

Ahora escribiendo npm run serve en el terminal, webpack abrirá automáticamente una nueva pestaña en el buscador que dirige a nuestro localhost en la puerta 8080, la cual se podrá configurar a nuestro gusto.

Una nota interesante es que el dev-server no escribe nada en output. Es decir, no crea ningún file que esté constantemente actualizado, pero tiene todo en la memoria y cada vez que llega una modificación utiliza directamente los archivos actualizados de este espacio.

Como configurar el webpack-dev-server

El webpack-dev-server puede ser configurado incluso manualmente, usando webpack-dev-middleware. Así se tiene también la posibilidad de usar los middleware. Los middleware, en pocas palabras, son funciones que hacen clic en puntos específicos definidos por nosotros, pueden ser realmente útiles en la fase de desarrollo. Para mayor información os dejo el link a la documentación oficial.

¡Stay Tuned!

¡Hasta la próxima lección