Cómo integrar Webpack dentro de tus desarrollos (en WordPress)

En el artículo de hoy os vamos a enseñar mediante un sencillo ejemplo a cómo integrar este famoso empaquetador de módulos en un tema de WordPress. De esta manera, podréis tener empaquetados y minificados vuestros SASS, JS, imágenes, etc… en cualquiera de vuestros desarrollos web. Pero antes de meternos más a fondo, una pequeña introducción a esta herramienta.

¿Qué es Webpack y para qué sirve?

Webpack, como hemos descrito antes, es un empaquetador de módulos (o bundler) con unos cuantos años a su espalda y que hoy día se utiliza en múltiples frameworks como React o Angular, y que algunas de las más famosas aplicaciones (twitter, instagram, etc) la utilizan.

¿Y qué es eso de un module bundler? Pues lo que hace especial a webpack es que trata cualquier elemento que desarrollos en tu código como un módulo: no sólo tu código javascript. Tu css, html, las imágenes, etc… se modularizan también.

Esto es lo que hace tan poderoso a Webpack, porqué además de ser un task runner como Grunt y Gulp, puede realizar muchas tareas más, no solo recoge archivos de entrada y los convierte en outputs definidos.

Y hoy, vamos a descubrir como integrarlo en un tema de WordPress para minificar contenidos, e integrarlos en tu sitio web mediante un plugin, sin tener que modificar el archivo de functions del tema: recordad que todos los elementos que se incluyan en una web deben ser lo más modular posible, y si pueden ser externos a temas mejor, así las funcionalidades no dependen de nada instalado, están separadas. Esta integración es extrapolable a, por ejemplo, si creáis un plugin de WordPress, tenéis un tema de Prestashop o cualquier otra solución de ecommerce o desarrollo a medida.

Paso 1: Instalar node, npm

Lo primero que nos hace falta para poner en marcha esta herramienta, es tener instalado Node y Npm.

Node.js: Node ahora mismo es uno de los entornos de javascript de lado de servidor más conocidos, una máquina virtual que soporta diferentes protocolos como TCP, HTTP y DNS.

Npm: El node package módulo o NPM es un gestor de paquetes, que mediante unas pocas líneas de código nos ayudará a tener cualquier librería disponible y que nos haga falta para nuestros proyectos. Por ejemplo, bootstrap desde javascript, por poneros un ejemplo sin necesidad de integrar en el header los css ni el footer los clásicos códigos de <script>.

Una vez estén ambos instalados en tu máquina, lo siguiente sería instalar webpack

npm install --save-dev webpack

También puede que os haga falta instalar el la interface de linea de comandos, recomendamos instalarla

npm install --save-dev webpack-cli

Una vez instalado, veréis que se ha creado el directorio “node_modules” y el archivo inicial de dependencias package-lock.json (el manifiesto del proyecto por decirlo de alguna manera).

Una vez todo esto se ha instalado, vamos al siguiente paso.

Paso 2: Configurar el archivo webpack.config.js

Para el ejemplo que estamos preparando, a Webpack le va ser necesario tener un archivo de configuración para que todo funcione correctamente: webpack.config.js. Si este archivo existe, por defecto webpack va a tirar inicialmente de lo que esté escrito en él.

Este archivo debéis crearlo dentro del directorio donde tengáis el tema. En él se deberá indicar todos los inputs que van ha hacer falta, así como los outputs que se van a generar en los directorios que le indiquemos, y que modulos que están en el directorio node_modules van a ser necesarios para realizar toda la operación.

Analicemos un poco todo este código:

• Vamos a utilizar uglifyjs-webpack-plugin, mini-css-extract-plugin y optimize-css-assets-webpack-plugin. Con esto, nos encargaremos de procesar los SASS y JS y minificarlos para su puesta en marcha en el sitio web.

• module.exports = {} es la forma como webpack trabaja las configuraciones de los inputs / outputs que se van a procesar.

• Se observa que el mode a trabajar es “production”, si no incluís nada se considera desarrollo.

• Se pueden observar unas “entries”: que son los archivos de los que webpack va a tener que leer. Fijaros los directorios que se intentan incluir, y daros cuenta que esto también son un “array”. En una entrega posterior os explicaremos un ejemplo de como se puede incluir múltiples entradas para múltiples salidas: por ejemplo si estáis creando un plugin y tenéis apartado frontend y admin, y hay diferentes archivos en ambos lugares. Para el caso actual, con esto es suficiente.

• El output del archivo javascript que se va a generar, fijaros que posteriormente explicaremos el del css generado.

• Seguimos con las reglas de los módulos, en este caso hay dos, una para los javascript y otra para los css: la primera de javascript es el babel loader, un paquete que permite transpilar archivos Javascript, y que debemos indicar que no incluyamos los que existan en el directorio node_modules (que nos sirve como librería). En el segundo, para el tema de las hojas de estilos, lo que estamos indicando a webpack es que el módulo MiniCssExtractPlugin se encargará de coger los SASS que estarán el directorio src, y comandados por el archivo app.scss, y pasarlo a archivos CSS plano.

• En la siguiente línea, indicamos que queremos un archivo dedicado de css para tener el código css.

• Por último, faltará indicarle que hay que realizar un trabajo de minificación de javascript y estilos css.

Y con esto, tendríamos un archivo de configuración de webpack listo.

Recordad que deberéis tener creados los archivos app.js y app.scss y los directorios, sino webpack os arrojará un error de que faltan cosas.

Paso 3: La estructura de directorios

Este paso es bastante subjetivo, cada uno puede pensar que mejor meter un archivo assets y meter javascripts, css, fuentes, imágenes, etc… en él. En este paso os vamos a enseñar lo que consideramos es más útil para nuestra estructura, y para los proyectos gestionados mediante un software de control de versiones como Git.

Dentro del directorio del tema creamos 2 directorios: js y css. Dentro, a su vez, de los directorios js y css, creamos dos directorios: src y build. Recordad en el punto anterior los inputs y los outputs, modificadlos a vuestros gustos y necesidades.

En nuestro caso, los directorios de build y src no son más que los directorios que van a contener los archivos a utilizar durante el desarrollo (src), y los que webpack va a procesar como salida (build). De esta manera, los archivos que aparezcan en build serán los que se suban a producción y los de src, los que se controlen mediante git, ignorando los del primer directorio.

Una vez todo instalado y preparado quedará algo parecido a lo siguiente:

Si ahora ejecutamos webpack –watch … va a fallar!

Webpack nos indica que faltan unos cuantos módulos en las dependencias, por ejemplo uglify y demás: ejecutemos npm install para que se instalen todas las dependencias necesarias.

En la página de npmjs.com están todos los paquetes necesarios, simplemente hay que buscarlos y ejecutar los comandos necesarios, por ejemplo dos de ellos serían:

npm install --save-dev mini-css-extract-plugin

npm install babel-preset-env --save-dev

Faltará instalar por ejemplo el css-loader, babel-loader, etc.. CLI os irá informando de todo lo que hace falta extra instalar, como comentábamos, en la web de npmjs.com están todos los módulos necesarios.

Después de esto, si se vuelve a ejecutar webpack –watch, veréis que los archivos de destino han sido generados.

Webpack tiene un montón de comandos y posibles acciones a realizar (no hace falta más ver su documentación, o en el CLI escribir webpack –help).

Paso 4: Crear un plugin contenedor para no modificar el archivo functions.php del tema

Una vez que están todos los archivos compilados, dentro de sus respectivos directorios, falta decirle a WordPress que también debe integrarlos en la web.

Nos vamos al directorio de plugins, y creamos uno nuevo: “custom-plugin”. Este directorio contenerá la información necesaria para que wordpress integre lo creado con webpack.

Como comentábamos antes, de esta forma separamos el tema instalado (aunque sea un tema hijo) de las acciones que queramos realizar en nuestro proyecto de wordpress: todo lo que hagas no será dependiente de un tema, solo de el plugin y la funcionalidad web si está instalado.

Dentro del directorio custom-plugin, creamos el archivo custom-plugin.php, y dentro de este archivo, incluímos el siguiente código:

La acción que estamos realizando es: wordpress, registra el script y los estilos que se hayan buildeado mediante webpack.

De esta forma, cuando cargues de nuevo wordpress, se habrán añadido ambos archivos al proyecto. Con –watch activado, cada vez que modifiques los archivos, las acciones automáticamente se visualizarán tras refrescar la página.

Cierre: y a partir de aquí ¡A probar!

Y como a nosotros nos gusta, lo mejor es probar, romper, continuar probando y continuar rompiendo las cosas. Os invitamos a que trabajéis con webpack y descubráis las múltiples cualidades de este bundler.

En este artículo hemos hablado de npm, pero también os invitamos a que utilicéis yarn. Para los que no conozcáis esta herramienta, Yarn es el primo supervitaminado de npm: otro administrador de dependencias creado por los desarrolladores de Facebook como alternativa a este último.

Entre sus características, yarn cachea localmente todos los paquetes que se descargan por primera vez, para evitar descargarlo más de una vez, y paraleliza las operaciones de descarga de paquetes.

Esperamos que os haya gustado este artículo de introducción a webpack: seguro que una vez lo utilicéis, lo estaréis preparando en todos los proyectos que tengáis.