07/08/2015
Webpack (tutorial): ¿Qué es y para qué sirve?
Por Marq Martí @marqmarti
Webpack es un module bundler (empaquetador de módulos) muy eficiente para aplicaciones grandes que contienen mucho código JavaScript.
Funciones
Su utilidad reside en la fragmentación de código: no todas las partes de una webapp requieren todo el código JavaScript, por eso se encarga de cargar sólo las partes necesarias en cada petición. Además, funciona con un gran número de lenguajes de plantilla y preprocesadores de JavaScript (TypeScript o CoffeeScript, ReactJS…) y CSS (LESS, SASS…). Para que importar diferentes componentes sea sencillo e intuitivo, Webpack implementa el ya estandarizado RequireJS para la inyección de dependencias de nuestra aplicación.
Pongamos como ejemplo que hemos desarrollado (o clonado de Github) un componente que visualiza un mapa de Google Maps y ofrece una serie de funcionalidades que hacen que este componente sea un poco pesado para cargar en cada página. Solo hace falta indicarle a Webpack que queremos que cargue este módulo solo en las páginas que lo necesiten.
JavaScript de la siguiente generación (Babel)
Otro de los puntos fuertes de Webpack es que dispone de loaders que facilitan el compilado de código de otros lenguajes a JavaScript nativo, la minificación del mismo o incluso la transpilación de estándares de EcmaScript todavía no disponibles ampliamente (como ES6) a código que todos los navegadores puedan leer. Esto es posible gracias a que existe un loader para Webpack de Babel, el transpilador de código JavaScript por excelencia.
Lo mejor de todo es que la gran mayoría de proyectos open source basados en JavaScript ofrecen una fácil integración con proyectos ya existentes a través de herramienta. En Sitelabs hemos podido integrar componentes de terceros en nuestras web de una forma transparente y automágica.
Introducción
Hagamos una pequeña introducción de su funcionamiento; para empezar solo hace falta un archivo HTML y dos JavaScript, y acceso a la línea de comandos, para realizar la compilación de código:
<html>
<head>
<meta charset="utf-8">
<title>Introducción a Webpack</title>
</head>
<body>
<script type="text/javascript" src="script.js" charset="utf-8"></script>
</body>
</html>
Ahora crearemos un archivo llamado mensajes.js, donde guardaremos un mensaje para despues importarlo mediante RequireJS:
var mensaje = "Hola, qué tal?"
exports.saludo = mensaje
Y ahora lo importaremos desde el archivo principal al que llamamos entry.js:
var mensajes = require('./mensajes.js')
document.write(mensajes.saludo)
Y ahora, desde la línea de comandos, ejecutamos el compilado. Para ello, debemos tener node y Webpack instalados (npm install -g webpack)
$ webpack ./entry.js script.js
Este comando nos empaquetará todo el JavaScript de manera automática. Si queremos que vigile los cambios en los archivos para no tener que ejecutar este comando repetidamente, añadimos la opción -w (watch).
Obviamente, este ejemplo es muy simple y Webpack no nos serviría mucho en casos como este, pero a la hora de estructurar una webapp con mucho JavaScript es una herramienta totalmente indispensable.
Podéis encontrar mucha más información sobre esta herramienta, su funcionamiento y sus loaders en la documentación oficial de proyecto.
