Los empaquetadores, comúnmente llamados en términos anglosajones, bundlers, son ya una herramienta imprescindible en cualquier entorno web moderno que se precie. Con la reciente ganancia de popularidad de Javascript, gracias a Nodejs, estas herramientas han proliferado en forma de utilidad de consola. Nodejs permite crear con gran agilidad este tipo de herramientas, e incluso escribir los propios módulos.
Grunt y Gulp, fueron los que sentaron las bases de lo que son actualmente herramientas como webpack. Tenían por función la ejecución tareas de cualquier tipo, con plugins para ampliar la funcionalidad. Actualmente, están proliferando diferentes soluciones al problema mas específico de agrupar recursos, como puede ser rollup o jspm entre otros. Todos ellos están escritos en Nodejs.

Nodejs, de ahora en adelante, node, ha supuesto un cambio en la forma de desarrollo de la web por lo que el lado del servidor corresponde. De la propia de definición de su página oficial: usa un node ha supuesto un cambio en la forma de desarrollo de la web por lo que el lado del servidor corresponde. De la propia de definición de su página oficial: usa un  modelo de operaciones Entrada/Salida sin bloqueo y orientado a eventos, que lo hace liviano y eficiente y programación funcional. Cuenta con una comunidad muy activa que desarrolla todo tipo de funcionalidades en forma de paquetes que reside en npm. La equivalencia podría ser packagist, en este caso, respecto de paquetes de php.  La proliferación de páginas SPA, con el uso intensivo de red o RTA combinado ha propiciado la amplia expansión y evolución. Además de poder unificar la lógica en  cliente y servidor, y usar el mismo lenguaje de programación para ambos.

¿Qué es Webpack?

Webpack como se define en web oficial: is a module bundler for modern JavaScript applications. When webpack processes your application, it recursively builds a Webpack como se define en web oficial: is a module bundler for modern JavaScript applications. When webpack processes your application, it recursively builds a  dependency graph that includes every module your application needs, then packages all of those modules into a small number of bundles – often only one – to be loaded  by the browser. O lo que es lo mismo, se encarga de generar gráficos de dependencias y empaquetarlos para que la aplicación sea capaz de funcionar correctamente.

La herramienta, nos permite ampliar su funcionalidad a través de una amplia lista de loaders que nos permiten aplicar transformaciones a los archivos que le pasemos.  Entre sus categorías, cuenta con funcionalidades básicas(xml, script, raw), empaquetadores(minificar, modernizr, web-components), específicos(imágenes, svg, base64, etc),  transpilers(coffescript, es6, typescript), plantillas(handlebars, jade, mustache), estilos(less, sass, stylus), traducciones(po, po2mo) o auxiliares(documentación, tests). También cuenta con una sección de plugins, mas limitada, que nos permite extender la funcionalidad mas allá de una simple transformación, pudiendo ejecutar lógica adicional, como es el caso de HotModuleReplacementPlugin, el cual nos permite regenerar los assets generados en función de cambios en los archivos originales.

Beneficios

• Es una herramienta que nos permite automatizar tareas repetitivas.
• Modularizar las diferentes secciones de nuestro proyecto.
• Posibilidad de elección en función del tipo de asset(minificación de imágenes, etc).
• Tiene una comunidad muy activa, y cuenta con un gran apoyo por parte de empresas como egghead.io, rollbar, etc.
• Aunque en su primera versión era uno de los principales inconvenientes, en su segunda versión cuenta con una documentación de calidad.
• Optimiza la velocidad de carga de la web.

Desventajas

• En proyectos en los que la gestión de los assets no represente un problema, o el proyecto sea pequeño.
• La separación entre las secciones sea difusa o difícilmente modularizable.
• La curva de aprendizaje es elevada, necesita mucha configuración y es compleja al principio.

Objetivos del artículo

• Usar código en ES2015 y transcribirlo a javascript legible para el navegador.
• Loaders de css.
• Extraer el css en archivos css.
• Servidor de webpack Hot-Reloading.

Instalación de la herramienta

Para instalar webpack, debemos tener primero node instalado en el equipo. Puedes encontrar la información sobre cómo instalarlo en el enlace de la página oficial. Ahora que ya tenemos lo tenemos instalado, podemos continuar con la instalación de Webpack desde el terminal. A través del siguiente comando, le indicamos a npm, el gestor de paquetes de node, que queremos instalar en la carpeta actual, y guardarlo como dependencia del entorno de desarrollo:

Con la ejecución de este comando, ya tenemos el entorno preparado para proceder con Webpack.

Utilización

Javascript con ES2015

En primer lugar, vamos a instalar un transpiler para ES2015, aprovechando la implementación de babel, un loader capaz de llevar a cabo tal tarea con la ayuda de webpack.

Esto nos instalará en la carpeta donde lo ejecutemos babel-loader. Ahora creamos un archivo javascript con un ejemplo sencillo de un fragmento de código escrito en ES2015:

Este código javascript, ahora mismo no es funcional en el navegador, porque no entiende las nuevas características que hemos utilizado. Para que webpack empaquete nuestro código y lo reescriba en un estándar compatible con los navegadores, vamos a usar una configuración específica para que antes ejecute el loader de babel con el siguiente archivo de configuración:

En el siguiente enlace, está explicada toda la configuración usada aquí, pero explicaremos brevemente cada apartado. Entry, es el archivo de entrada, output, son todas las opciones referentes a la salida de los recursos, en este caso, usamos el sistema umd, con el nombre bundle.js y lo escribiremos en el directorio /web/js/dist. Por último, le damos la configuración necesaria para que use el loader de babel y nos escriba javascript válido en el  navegador. Si abrimos el archivo(en función de la versión de webpack y de sus loaders puede cambiar el contenido), podemos ver como las primeras lineas,  son las que nos introduce la lógica de webpack. A partir de la línea 86, podemos ver nuestro código, con las porciones de ES2015 reescrito:

Ahora, ya tenemos todos los elementos necesarios para ejecutar webpack, para que genere la salida que estamos buscando, nuestro archivo app.js compilado, con el nombre de bundle.js:

El ejecutable, se encargará de buscar el archivo de configuración(que debe estar donde lo ejecutamos),e interpretarlo para realizar las tareas convenientes.

CSS en javascript

El siguiente paso será usar un loader para parsear el css. Webpack hace uso del concepto de Web Components. Es por ello que su fin es el de empaquetar todos los recursos necesarios para el correcto funcionamiento en un archivo javascript, para su posterior reutilización. Sin entrar en detalles del porque, en el siguiente enlace, se exponen algunos de los motivos por los cuales, existe el concepto de CSS en javascript.

Para poder usar el loader de css, necesitamos instalarlo de la siguiente forma, como hemos hecho anteriormente con el loader de babel:

Acto seguido, cambiamos la configuración de webpack, para que quede así:

Con esta nueva regla, y el nuevo archivo de entrada, le estamos diciendo a webpack que queremos que lea y parsee el css que contiene el archivo style.css. Ahora, si abres el  fuente generado, podrás ver como ha incluido mucha mas lógica encargada de hacer la integración entre el fuente generado y el proyecto, además de los estilos css que contenía el archivo que creamos anteriormente. Podemos seguir ampliando nuestro set de herramientas para ser integradas con webpack, con sass, compresores de imágenes y un largo etcétera. Te aconsejamos que mires la documentación de webpack, para tener una visión mas profunda de el ecosistema.

Extracción del css

Para finalizar, con la sección de loaders y plugins, vamos a explicar como se pueden extraer los archivos css. Puesto que ya hemos visto como incluir el css en el archivo final bundle.js, haremos uso de un plugin que nos permite extraerlo y exportarlo a un archivo css común. Esta vez, lo que haremos no es instalar un loader, como lo hicimos previamente, puesto que necesitamos algo más que transformar las líneas. Ahora vamos a necesitar lógica para evaluar que hacer con los estilos que le indicamos a webpack que cargue, instalando un plugin.  En primer lugar, instalaremos el plugin:

Cambiando la configuración, de la siguiente forma, ya podremos incluir el archivo como app.bundle.css, tras la ejecución de webpack, como habíamos hecho anteriormente. Ahora podrás ver como en la carpeta /dist, se ha generado un nuevo archivo de css.

Servidor Web de recursos

Como no podía ser menos, el uso de estas herramientas, se vuelve lento y pesado. Cuando estamos trabajando contínuamente en los mismo recursos, vas a tener que ejecutar en el terminal la herramienta debido a los cambios efectuados y la necesidad de volver a generar el compilado. Antes este problema, con webpack, podemos usar un pequeño servidor que viene integrado, el cual nos compilará los nuevos cambios a través de watchers.

Con el siguiente comando, arrancaremos el servidor local de assets de webpack, que podremos incluir en nuestro proyecto.

En la configuración, añadiremos las siguientes líneas. Por una parte, el path público al que acceda el navegador para solicitar el bundle.js, nombre descrito en el archivo de configuración. Por otra parte, añadiremos en el array de plugins el encargado de comunicar los cambios al navegador. Con la última opción, –hot, le estamos indicando a webpack que queremos que haga uso del hot reloading, el cual, nos refrescará la web automáticamente, cada vez que se lleve a cabo un cambio.

Por último, este pequeño fragmento de código a nuestro app.js para que acepte las conexiones entrantes de hot reloading:

Conclusiones

Webpack es una herramienta muy potente que nos permite empaquetar todo tipo de recursos ya sean estáticos o dinámicos de una forma eficiente a través de sus gráficos de  dependencias. Tener todos los recursos en un mismo archivo de javascript, permite disminuir los tiempos de carga de la web, evitando peticiones innecesarias. Es cierto que al tratarse de javascript, tendremos un retardo en la carga de toda la lógica, pero si gestionamos de forma óptima los recursos, podemos evitar que los tiempos sea superiores respecto a las múltiples peticiones que puede realizar una página hacia el servidor. Así mismo, nos permite regenerar todos los recursos a través de su funcionalidad nombrada anteriormente, para evitar el paso por la consola en tiempo de desarrollo. En este artículo se ha intentado dar una visión básica y funcional de como usar esta herramienta. Asimismo, si estás interesado en la web oficial de webpack, tienes una sección completa de guías.