Webpack: introducción

La introducción de NodeJs y las nuevas especificaciones definidas en el estándar ES6 han relanzado JavaScript, haciéndolo competir gradualmente con los viejos y amados lenguajes fuertemente tipados. El crecimiento de su popularidad también ha llevado al aumento de su uso, lo que hace que sea cada vez más difícil administrar las lógicas de la aplicación que poco a poco se estaban moviendo del Backend al Frontend.

Estos nuevos requisitos dieron lugar al concepto de Módulo de Código, concepto que reemplazó la clásica importación en cascada de archivos JavaScript o la escritura de un solo archivo .js que contuviese toda la lógica de la aplicación.

El módulo se encarga de dividir el código en muchas partes pequeñas que se pueden llamar en cualquier lugar como dependencias. 

Sin embargo, en ese momento, como todavía JavaScript no tenía un mecanismo nativo de administración de dependencias (a través de keyword como Import y Export) los módulos se implementaron a través de diferentes sistemas, incluidos los llamados closures e anonymous function (IIFE, Immediately-invoked Function Expression). 

Fué NodeJs que revolucionó todo

NodeJs, no ejecutándose en el navegador si no en el servidor, creó el problema de como administrar estas dependencias ya que no tenía etiquetas html y así sucesivamente.

Por esta razón impulsó la creación de CommonJs. Es decir, un patrón de módulo que le permitió recuperar y exportar fragmentos de código con el uso de require y exports.

Ejemplo de export: 

• Crea un archivo llamado prueba.js y escribe una función de prueba

• Ahora crea otro archivo donde llamas a esta función

• Ahora, después de verificar que ha instalado NodeJs, ejecuta el archivo foo.js desde la terminal escribiendo node foo.js 

Puede parecer fácil, pero la funcionalidad de require y exports ¡dio vida a JavaScript!

Commonjs habiendo sido concebido para NodeJs, y entonces para trabajar del lado del Server, administraba las dependencias de forma sincrónica, por lo que no estaba optimizado para trabajar con las modernas web application donde todo sucede de forma asincrónica. Por esto, se desarrolló un Fork de commonJS que cogió el nombre de AMD (Asynchronous Modules Definition). 

Estos predecesores de Webpack podían administrar las dependencias, pero tenían un inconveniente: trabajan solo y exclusivamente con archivos Javascript.

Webpack además de administrar archivos JavaScript, es capaz de trabajar también con imágenes, json, Xml, typescript, Sass… en definitiva, una multitud de otros archivos con diferentes tipos de extensiones. Construyendo automáticamente un gráfico (Dependency Graph), en el cual añadir cada archivo individual, buscando sus dependencias y vinculándolos. 

Dada su poder y versatilidad, Webpack se utiliza en muchos CLI, es decir, los comandos del terminal usados para generar proyectos en los más populares framework Javascript que todos conocemos, como Angular, React y Vue.js. 

Los conceptos llave de Webpack son los siguientes: 

• Entry Point: Representa el punto de partida de cualquier aplicación Webpack 
• Output: Será la carpeta que contendrá la construcción del proyecto
• Loaders: Permiten procesar archivos de diferentes extensiones
• Plugins: son la columna vertebral de Webpack, permiten hacer todo lo que los cargadores no pueden hacer al extender la funcionalidad de Webpack.

Un ejemplo pragmático y claro del uso de Webpack se refiere al proceso de construcción de una aplicación Angular 2+ escrita completamente en Typescript. Todo el proceso es transparente para nosotros, los usuarios del framework, bajo la dirección es Webpack el que hace el gran trabajo.

De hecho, dado que Typescript no es compatible con ningún navegador, se necesitará administrar estos archivos con extensiones .ts y compilarlos en una versión Javascript compatible con navegadores modernos, como ES5 o ES6 dependiendo de nuestro público objetivo. Para hacer esto, Webpack utiliza adhesivos especiales Loader. 

Webpack se usa también en la construcción de las compilaciones finales del proyecto ya que es posible unir cientos de archivos en uno solo que toma el nombre de Bundle, aplicando optimizaciones en términos de rendimiento y tiempos de carga.

Además, también puede crear los llamados Chunk, es decir, pequeñas piezas de la aplicación para aprovechar lazy loading (carga asincrónica), llamando a los componentes en tiempo de ejecución solo en la página donde se utilizan.

En esta serie de artículos os enseñaré como usar Webpack, utilizaré los cargadores para cargar archivos con diferentes extensiones como CSS y archivos Typescript y os enseñaré el uso de alguno de los plugin más importantes, como por ejemplo el que nos permitirá iniciar un web server local y activar el refresh automático del proyecto que, para cualquier modificación guardada, rellena y enseña el proyecto actualizado.

El objetivo final es el desarrollo de una pequeña aplicación Javascript, con la ayuda de Typescript y compilación de archivos css que podrían extenderse fácilmente para admitir archivos Sass o Scss. Finalmente pondré a disposición un repositorio en Github en el que de vez en cuando encontraremos las fuentes que lo utilizan.

Stay Tuned!

LISTA DE ARTÍCULOS DE LA SERIE:

1. Instalación Webpack y dependencias
2. Creación archivos de configuración de Webpack
3. Webpack Loader
4. Webpack Plugin
5. Debug e Source Map con Webpack
6. Compilación con Watch y Web server local
7. Ayuda Typescript 
8. Bonus: Ayuda SCSS

Link repository Github: Corso Webpack