¡TRANSOLUTIONS AHORA ES PARTE DE BAUFEST!
Ingresa a baufest.com para conocer más sobre nuestros servicios.

BLOG

Jueves, 12 Abril 2018 09:25

Primeros Pasos con Webpack JS

viesheslav junto al logo TSSEn esta oportunidad Viacheslav Guevara, Developer en Trans Solutions Systems, nos hablará sobre una poderosa herramienta llamada Webpack JS. Webpack nos ayudará a automatizar y optimizar tareas de pre procesar y transpilar (no confundir con el termino “compilar” que son 2 conceptos similares pero distintos), código de nuestra aplicación Front End.

Nos será de utilidad, principalmente, para cuando se desea preparar para desplegarla en un entorno productivo, a fin de optimizar el proceso de empaquetamiento y organización de archivos, imágenes, JSON, JavaScript y de estilos generalmente de nuestra aplicación (denominados assets y que por lo general son extensos), que son descargados en el cliente. Se busca reducir el número de peticiones y tamaño de archivos necesarios al cargar las páginas de la aplicación. Esto origina que el tiempo de respuesta de carga de nuestra aplicación web se reduzca considerablemente. 

Primero definamos que es Webpack JS. Según la página oficial es:

“En esencia, webpack es un empaquetador de módulos estáticos (static module bundler) para aplicaciones JavaScript. Cuando webpack procesa su aplicación, crea recursivamente un grafo de dependencias que incluye todos los módulos que necesita su aplicación, luego empaqueta todos esos módulos en uno o más paquetes.”

Módulo con dependencias Webpack

Fuente: https://webpack.js.org

Hablando un poco de historia, antes estas tareas se realizaban (y aún se realizan) con herramientas como Gulp y Grunt. Son “task runner” y “compiler”, y su configuración era un poco tediosa. Es aquí donde aparece en el juego Webpack. Considerándose como una evolución de estos 2 mejorando los procesos que realizan estas 2 herramientas en conjunto.

Logos Grunt y Gulp

Ahora, tal vez esto ya lo hemos comentado anteriormente entre líneas, pero vale la pena tenerlo claro:

¿Por qué es importante aprender Webpack?

Bueno, lo primero sería indicar que mantener una aplicación organizada te ayudará a ti y al equipo de desarrollo. Ayudará a llevar un adecuado manejo de versiones del código, así como también, a poder separar los archivos que se usan en entornos de desarrollo de los que se usarán en producción. Webpack realiza esto de una manera sencilla, indicando solamente dónde están ubicados los archivos fuentes y dónde se desean enviar los archivos resultantes.

Conceptos Core de Webpack

 

Entry

Un Entry Point indica él o los archivos fuentes que Webpack debe empezar a usar para generar su grafo interno de dependencias. Analizará y resolverá a partir de los archivos fuentes todas las librerías dependientes, directas e indirectas, generando los archivos denominados bundles.

Archivo webpack.config.js:

Archivo webpack.config.js

 

 

Output

Un Output le indica a Webpack dónde generar los archivos bundles y cómo nombrarlos.                                                                                                                                       

Archivo webpack.config.js:

Output Webpack

Loaders

Los Loaders son los encargados de cargar archivos de cualquier extensión. Les dará el debido tratamiento y los convertirá en formatos que el navegador entienda.

  • La propiedad “test” identifica los archivos que deberían ser transformados.
  • La propiedad “use” identifica qué loader debería ser usado para realizar la transformación.

Archivo webpack.config.js:

Webpack Loader

Plugins

Los Plugins sirven para extender las habilidades de Webpack. Un ejemplo sería, para comprimir las imágenes que se vayan agregando a la aplicación.

Para usar un plugin se necesita usar la función “require()” para agregar el pluggin que se desea. Luego, crear una instancia del plugin usando el operador “new”.

Archivo webpack.config.js

Plugins Webpacks

  
Modos

El modo le indica a Webpack qué optimizaciones incorporadas usará en él. Puede tener los valores de “develop” o “production”.

Archivo webpack.config.js

Modos Webpack

Mi primer paso Webpack

Para proceder a usar Webpack lo primero que debemos hacer es tener instalado “Node JS”. Después, instalaremos Webpack de manera global en el equipo con la siguiente línea de comandos:

npm install -g webpack

Instalar Node JS

 

El comando más sencillo para realizar un bundle de un archivo JavaScript con Webpack seria

webpack ./index.js ./dis/app.js

Es deducible qué acción realiza la línea de comando anterior. Esta lee el archivo “index.js” (entry) e importa todas las referencias que estén definidas en él. Luego, creará el archivo “app.js” (output) con todo el grafo de dependencias del archivo “index.js” incluyendo éste en el folder “dist”.

Para esta tarea puntual, una línea de comandos puede ser suficiente, pero en escenarios más comunes la cosa tiende a complicarse. Para estos casos en vez de escribir todo por líneas de comandos, podemos escribir un archivo “webpack.config.js” que posea toda la configuración necesaria para nuestra aplicación.

Bien, para nuestro ejemplo mostraremos el uso simple de Webpack. Nuestro objetivo será crear una frase: “Hola mundo con Webpack”. Para lo cual usaremos Visual Studio Code como editor de código y crearemos una carpeta denominada “MisPrimerosPasosWebpack” donde estará nuestro ejemplo:

Webpack

 

Comenzaremos creando un archivo que se llame “index.js” donde irá nuestro código JavaScript. Lo que hará básicamente es cambiar el mensaje inicial de la página después de 4 segundos:

Crear archivo index

 

Posteriormente, procederemos a crear nuestro archivo html que llamaremos “index.html”. Este archivo mostrará el mensaje que generará la función javascript “actualizaMensaje()” en el elemento con el id “mensaje” que se ejecutará después de 5 segundos. Se ha utilizado las hojas de estilo css de Bootstrap solo para dar una mejor apariencia visual.

creando html llamado index

 

Si abrimos el archivo “index.html” en un navegador web visualizaremos lo siguiente:

Si esperamos 4 segundos:

Mensaje en web

Con ello verificamos que nuestro código JavaScript se está ejecutando correctamente. Ahora procederemos a crear nuestro archivo “webpack.config.js”. En él indicamos que nuestro archivo principal es el archivo “index.js” y que lo empaquete y coloque en la ruta “dist/js/index.js”. ([name] se utiliza para indicar a Webpack que utilice los mismos nombres de archivos de los entry point).

Webpack código

 

También actualizaremos nuestro archivo html para que utilice la ruta del archivo que se especifica en el output de la configuración de Webpack:

Webpack código html

 

Ahora que hemos hecho los cambios necesarios para usar Webpack en nuestra pequeña aplicación, procederemos a ejecutar la línea de comando “Webpack” en la carpeta de nuestra aplicación donde está el archivo de configuración:

código final

 

Como vemos en nuestro file browser, Webpack ha procedido a crear el archivo “app.js” en la ruta especificada en el output de nuestro archivo de configuración. Si refrescamos la página esta debería seguir funcionando sin problemas utilizando el archivo generado.

presentación final en la página web Webpack

 

Bueno, esto ha sido una pequeña introducción al uso de Webpack. Esta herramienta cuenta con una gran cantidad de características, y quedaría demasiado corto poder revisarlo en un breve post como este. El objetivo era mostrar y subir el primer escalón para iniciar y motivar su uso. Este poderoso complemento representa una útil optimización en el manejo de los archivos en nuestra aplicación web, lo que, en la mayoría de los casos, se vuelve complejo.