Desarrolladores: Trucos semanales

Mejora tu flujo de trabajo con Webpack

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Aprende los mejores trucos y tips, y descubre los conceptos básicos indispensable para todo desarrollador web, independientemente de tu experiencia. Si ya llevas desarrollando por años o si vienes del mundo del diseño y jamás has tocado una sola línea de código, todo lo que aprenderás con esta serie semanal de trucos serán una gran adición a tu actividad profesional y apuntalará tus habilidades como programador o desarrollador. Descubre desde increíbles consejos para que puedas tratar con tu cliente y saber cómo cobrar adecuadamente, hasta cuestiones técnicas claves para organizar y gestionar mejor tu tiempo y proyectos desarrollando.
07:43
  Añadir a marcadores

Transcripción

Webpack es un empaquetador de módulos muy similar a Browserify, que al igual que este permite la fragmentación y optimización de código. Pero con la gran diferencia que evoluciona al incluir muchos procesos de automatización sin necesidad de requerir herramientas extras como Gulp, por ejemplo. Webpack implementa RequireJS, el cual es una librería que permite hacer inyección de dependencias a nuestra aplicación o sitio web y lo vuelve un diferenciador muy interesante, pues al combinar ambas lógicas de funcionamiento se pueden lograr propósitos bastante puntuales, como, por ejemplo, el hacer uso de un determinado módulo o librería y querer que este solo sea usado en determinadas páginas. Entre otras tantas cosas, Webpack hace una división de código al dividir dependencias en síncronas y asíncronas y, según su comportamiento, establecer en qué parte comienza y termina determinado bloque. También posee un sistema de parseo inteligente que te permitirá parsear e integrar casi cualquier tipo de librería. Además, tiene un rico ecosistema de plugins que te ayudarán a tener un paquete web al final bastante robusto. Así que si estás en la etapa de decidir entre Browserify y Webpack mi recomendación es definitivamente Webpack. Veamos cómo trabajar rápidamente con este empaquetador. Comencemos instalando primero el paquete de Webpack. Lo que tenemos que hacer es ejecutar el comando npm install webpack y podemos ejecutar aquí el comando -g para que esté disponible en todo el sistema. Mientras se hace la instalación, vamos a revisar de qué se compone nuestro proyecto. En este caso, tenemos una carpeta SRC, en esta carpeta SRC tenemos un archivo de productos donde tenemos un arreglo de productos y servicios, que a su vez es un arreglo de servicios. Ambos utilizan un módulo y de aquí usan una exportación. Es decir, están exportando todo lo que vamos a tener en este archivo para que quede disponible para alguien. En este caso, servicios exporta sus servicios que es este arreglo y productos hace lo mismo con lo suyo. Todo esto se va a concentrar en el archivo app.js, como podemos ver, aquí estamos haciendo la operación require para indicar que vamos a ocupar lo que tenemos en servicios y productos, pero no jala todo completamente. Es decir, necesitamos utilizar el module.export para poder acceder a los datos que existen en cada uno de estos archivos. Ahora, simplemente mandamos a imprimir el contenido pero nos hace falta algo que empiece a unir todo. Para esto, y como ya tenemos Webpack instalado, vamos a hacer la primer configuración. Si yo abro el archivo index.html, vemos que tenemos configurado un script que nos envía al archivo bin app.bundle.js. Webpack lo que va a hacer es que va a juntar todo lo que encuentre en app, sus invocaciones de services y de products y los va a juntar todos en el archivo app.bundle.js. Al juntarlos aquí, me va a dejar disponible toda la funcionalidad para que yo la pueda ocupar. Por ahora, el archivo no existe, pero en el momento en el que yo ejecute el comando de Webpack va a comenzar a existir. Así que, voy a trabajar primero e indicaré Webpack en el archivo app.js, toma todo lo que encuentres aquí e inyectalo a bundle.js. ¿Y qué es lo que hace?, en source app.js encuentra que hay dos referencias e inmediatamente se trae también dichas referencias. Esa es una de las cosas muy potentes que maneja Webpack. Ahora, vemos cómo el archivo ya se creó llamado app.bundle.js, aquí adentro está toda la lógica de la aplicación. Por ahora, no vamos a utilizar este archivo. Así que, simplemente, vamos a probar nuestro proyecto. Actualizamos y vemos cómo en consola ya me salen los dos elementos que yo tenía, productos y servicios. Ahora, viene un detalle. ¿Qué sucede si yo necesito estar cambiando o arreglando las cosas que voy a estar trabajando? En este caso, por ejemplo, si yo voy a estar trabajando en servicios y agregó un nuevo servicio tengo que volver a estar compilando. Para evitar hacer este proceso de compilado de manera continua, lo que tengo que hacer es ejecutar un archivo de configuración para que esté leyendo todo lo que sucede. Entonces, lo primero que vamos a hacer será generar en raíz de nuestro proyecto un archivo llamado webpack.config.js. Aquí adentro vamos a trabajar con lo siguiente: vamos a indicar primero que tendremos algo que exportar, es decir, vamos a escribir: module.export = a y vamos a abrir un arreglo, este arreglo se va a dividir de dos cosas, un entry point, es decir, de dónde va a tomar toda la información y hacia dónde va a ir, en resumen, lo que es la salida... output. Vamos a trabajar primero en el entry point. El entry point, nosotros vamos a indicar que va a trabajar con el app, que es la aplicación que nosotros estamos teniendo aquí y que, obviamente, ese archivo tiene una ubicación y está ubicado en SRC/app.js. Aquí vamos a corregir solamente esta parte para que quede dentro de las comillas. De hecho, si tú cuentas con más entry points aquí los puedes detallar. La manera de detallarlos sería, por ejemplo: app2: y mandas la ubicación que llegará a tener tu otro entry point. Ahora, vamos a definir el output, en el output vamos a indicar el path, es decir, la ruta donde se va a encontrar la salida hacia donde nosotros queremos mandar todo lo que se esté procesando. Y en este caso le vamos a indicar que todo va a ir a la carpeta bin que es esta carpeta que tenemos aquí, y, después, vamos a indicarle cuál es el archivo que vamos a estar utilizando, a dónde se va a depositar todo lo que ya se compiló. En este caso, vamos a utilizar filename: y vamos a colocar aquí el nombre de nuestro archivo. Listo, ahora ya tenemos un archivo de configuración de Webpack. Entonces, ya podremos procesar un webpack que esté escuchando siempre qué sucede. Es decir, podemos ejecutar, en este caso, el comando webpack progress colors watch, es decir, que nos está mostrando siempre qué sucede pero que nos ayude con colores y, a la vez, que esté siempre escuchando cada vez que hay un cambio. Lo ejecutamos nuevamente y esto se queda aquí como si fuera en stand by. ¿Por qué?, porque está escuchando si llegara a existir algún cambio. Vamos, por ejemplo, a agregar aquí en limpieza algún otro servicio, en este caso un servicio de transporte... guardamos, vemos cómo el servidor se movió y me indica que aquí hubo un cambio en el archivo services y vamos a actualizar nuestro navegador porque tenemos que ver que aquí en services salga el siguiente servicio. Actualizamos, y efectivamente, aquí se encuentra el servicio que acabo de agregar. De esta manera es como yo puedo estar generando flujos de trabajo de manera continua utilizando Webpack y como puedes ver, simplemente aquí nosotros en el index no estamos inyectando absolutamente nada, no estamos instalando nada sin ningún problema. Este tipo de cuestiones me van a facilitar mucho el trabajo que yo esté realizando con proyectos web.