Aprende Webpack paso a paso

En este tutorial vamos a aprender qu茅 es webpack, su importancia, y c贸mo podemos empezar a usarlo en nuestros desarrollos.

Antes de empezar: 驴por qu茅 aprender Webpack?

En lo que respecta al desarrollo web en el lado del cliente, el uso de Javascript es indispensable para lograr una interacci贸n con los usuarios que visitan y usan nuestras aplicaciones web.

Decimos "aplicaciones web" y no "p谩ginas web" porque una p谩gina web es en general un sitio web informativo. Mientras que "aplicaciones web" es un t茅rmino que demanda un mayor nivel de interacci贸n con el usuario.

驴C贸mo as铆?

Nuestra aplicaci贸n web va a reaccionar ante los eventos que desata un usuario.

Un usuario que hace clic aqu铆 y all谩, a fin de gestionar su informaci贸n.

Como ejemplo de aplicaciones tenemos a Facebook y Gmail. Podemos editar nuestros datos, y somos usuarios. No simples visitantes como ocurre generalmente en un portal de noticias.

Entonces, en un mundo cada vez m谩s exigente, se requiere que estas aplicaciones permitan una interacci贸n lo m谩s fluida posible.

Eso implica que no hayan actualizaciones en el navegador.

Y la soluci贸n ideal es el desarrollo de Single Page Applications.

Es decir, aplicaciones que carguen una 煤nica vez y que demanden nuestros datos al servidor conforme se requiera, en segundo plano.

El servidor contin煤a encarg谩ndose de todas las validaciones serias, sin embargo, en vez de responder como habitualmente lo hace, ya no devuelve c贸digo HTML con datos, sino simplemente datos.

Es ahora una tarea de la tecnolog铆a de lado del cliente renderizar los contenidos (y exacto, esto se logra con Javascript).

En resumen:

  • En la actualidad las aplicaciones suelen requerir de m谩s c贸digo Javascript para permitir un buen nivel de interacci贸n a nuestros usuarios.
  • Y como es l贸gico, m谩s c贸digo implica un mayor orden, 驴verdad? A fin de "tener todo en su sitio" y tener una aplicaci贸n "no muy costosa" de mantener.

Eso es lo que demandamos nosotros mientras desarrollamos. Pero a final de cuentas, antes de subir a producci贸n requerimos de otros procesos:

  • Minificar nuestros assets (archivos Javascript y CSS).
  • Empaquetar muchos m贸dulos en una cantidad m铆nima de archivos Javascript (solicitados bajo demanda).
  • Hacer que nuestro c贸digo Javascript sea compatible con todos los navegadores (s铆, porque debemos hacer uso del 煤ltimo est谩ndar de Javascript, que no siempre se encuentra implementado por los browsers).
  • Si usamos preprocesadores, entonces tambi茅n necesitamos desde un inicio el proceso de conversi贸n para cada caso.

Entonces, 驴qu茅 es Webpack y c贸mo nos ayuda?

Webpack y la gesti贸n de dependencias

Webpack es un module bundler, es decir, un empaquetador de m贸dulos.

Hace un momento hablamos que muchos archivos vienen a ser unos pocos, al final.

Generalmente estos archivos van a representar m贸dulos, cuando de Javascript se trata.

Cada m贸dulo representa un conjunto de c贸digo que cumple con un objetivo determinado.

M贸dulos dependen de otros, y esta gesti贸n de dependencias es posible gracias a alg煤n module system de Javascript (es decir, una especificaci贸n sobre c贸mo importar y exportar estos m贸dulos).

Si no est谩s familiarizado con el tema de m贸dulos en Javascript, por favor lee este art铆culo antes de continuar.

Webpack permite optimizar todo este proceso:

  • Gesti贸n de dependencias entre m贸dulos
  • Minificar, comprimir y unir nuestro c贸digo
  • Solicitar archivos seg煤n se requiera

Frameworks Javascript modernos

Aprender Webpack, o alguna otra herramienta equivalente (que nos permita empaquetar m贸dulos y optimizar todo este proceso), es indispensable para empezar a usar adecuadamente un framework Javascript moderno.

Tenemos muchas alternativas:

Angular JS, Vue JS y React JS

Nuestra elecci贸n depender谩 del tipo de aplicaci贸n que pensamos desarrollar, y las ventajas que esperamos obtener (cada framework tiene su propio ecosistema).

M谩s contenido

Tenemos una serie sobre Webpack. Si te ha parecido interesante, por favor ay煤dame a compartir el art铆culo, y luego:

Mira la serie completa aqu铆.

# javascript # webpack

Logo de Programaci贸n y m谩s

Ay煤dame a compartir este post si te fue de ayuda.

Y no olvides seguirnos por redes sociales:

Reg铆strate

Inicia sesi贸n para obtener acceso a nuestros cursos y llevar un control de tu progreso.

Cursos recomendados

Curso pr谩ctico de Javascript

Aprende Javascript

Domina JS con este curso pr谩ctico y completo! Fundamentos, ejemplos reales, ES6+, POO, Ajax, Webpack, NPM y m谩s.

Ingresar al curso
Curso de Laravel, Vue.js y Pusher

Aprende Vue.js

Desarrollemos un Messenger! Aprende sobre Channels, Queues, Vuex, JWT, Sesiones, BootstrapVue y mucho m谩s.

Ingresar al curso
Curso de Laravel desde Cero

Aprende Laravel

Aprende Laravel desde cero y desarrolla aplicaciones web reales, en tiempo r茅cord, de la mano de Laravel.

Ingresar al curso

Antes que te vayas

Inscr铆bete en nuestro curso gratuito de Laravel