Implementación de Webpack en WordPress

WordPress además de ser uno de los CMS más utilizados en todo el mundo, con un 66% de volumen de descargas en crecimiento frente a otras aplicaciones le pone a la cabeza de lista.

Aun así con todas las bondades que puede presentar WordPress para todo tipo de usuarios, al menos en proyectos o desarrollos más complejos en especial a nivel multimedia conlleva una pérdida en tiempos de carga que a día de hoy se puede resolver mediante el uso de Plugins de caché que seguro que ya conoces.

No obstante los plugins de caché suman líneas a nuestro código y solo resuelven el problema de forma somera, porque seguimos sirviendo el contenido en sus archivos fuente originales en la caché del navegador del cliente lo cual no resuelve el problema de raíz.

¿Qué es Webpack?

Es en este punto donde Webpack pone a nuestra disposición, no un sistema de cacheado, sino, más bien, una forma mediante la cual el browserify automatiza todos los procesos de distintas fuentes y dependencias de nuestros WordPress, compilando todo el código en un único JS que será servido en el navegador del lado del cliente.

De esta forma se mejora considerablemente nuestro page-speed y con una perfecta optimización de código estandarizando para que la interpretación en cualquier navegador sea correcta, si, ¡incluso en IE 6!

Ventajas de Webpack en WordPress

Usar Webpack con WordPress tiene muchas ventajas.

  1. La primera y más obvia es la capacidad de crear un solo archivo JS que servirá todo el JavaScript y CSS de su sitio web.
  2. En el proceso, Webpack también preprocesa su SASS o LESS si está usando (y debería).
  3. Compila su JavaScript ES6.

El resultado final es un sitio web más rápido que carga al instante.

Pero existe un inconveniente, y es que Webpack no es fácil de configurar y no fue creado intencionalmente para funcionar con WordPress. Así que aquí hay una guía rápida para configurar Webpack con WordPress.

Guía para configurar WebPack en WordPress

Lo primero que recomendamos es que si no eres un experto en este tipo de programación, o estás empezando a trabajar con servidores, consultes con un profesional de la programación web.

En el caso que desees configurarlo por ti mismo, aquí te damos una serie de pasos a seguir para configurar WebPack.

1. Primero, necesitaras usar NPM para instalar Webpack y algunos cargadores básicos. Webpack los utiliza para analizar archivos que inicialmente no están escritos en JS, como CSS, por ejemplo.

Ve a la consola de tu servidor, navega hacia el directorio de tu tema o tema hijo y escribe

npm init

2.Presiona Intro varias veces para que las configuraciones predeterminadas se apliquen rápidamente a tu proyecto (puede cambiarlas luego) y escriba

:sudo npm install -g --save webpack

3. Ingresa tu contraseña y presiona enter. Acabas de instalar Webpack globalmente en tu máquina.

4. Ahora tenemos que instalar el paquete web localmente en el proyecto. Volvemos de nuevo a nuestra consola:

npm install --save webpack

Eso debería darte la capacidad de cargar numerosos archivos JavaScript en su sitio web en un solo archivo, así que hagámoslo ahora.

5. En tu carpeta de temas, crea un archivo y asígnale el nombre webpack.config.js. En él, configurarás el objeto de configuración de Webpack.

Lo primero que debes hacer es importar Webpack y crear una función que reciba un entorno como argumento y devuelva un objeto.

//webpack.config.js

var webpack = require('webpack')

module.exports = function(env) {
    return {

    }
}

6. Esta es la estructura básica de tu archivo de configuración y ahora necesitas decirle a Webpack varias cosas.

En primer lugar, debes especificar un punto de entrada a tu aplicación para que Webpack sepa dónde tomar los archivos que necesita agrupar y una ubicación de salida en la que colocar los archivos incluidos.

Agrega una entrada y un punto de salida a tu objeto config:

//webpack.config.js

var webpack = require('webpack')

module.exports = function(env) {
    return {
        entry: "./js/app.js",
        output: {
            path: __dirname + "/dist",
            filename: "bundle.js"
        },
    }
}

7. Ahora sigue y crea un directorio y llámalo js y dentro de él crea tu archivo app.js. Webpack irá primero a este archivo, por lo que lo usará para requerir todos los JS y CSS de tu aplicación. Por ejemplo, puede importar un archivo JavaScript llamado script.js que se encuentra en el mismo directorio que app.js, así:

//js/app.js

//Require scripts
require('./script')

8. Escribe el código en: js/script.js y en la consola ve al directorio de tu tema y escribe el comando webpack.

9. Verás que se creó un directorio llamado dist y en él un archivo llamado bundle.js. Este archivo contiene todos los resultados de Webpack.

Por cierto, si quieres que Webpack mire tus archivos para ver los cambios y recompile cada vez que un archivo cambie, agrega el indicador --watch después del comando webpack.

Ahora todo lo que necesitas hacer es dirigirte a tu archivo functions.php y poner en cola bundle.js como lo haría con cualquier otra secuencia de comandos en WordPress:

//functions.php

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );
function my_theme_enqueue_scripts() {
                wp_enqueue_script( 'bundle', get_stylesheet_directory_uri() . '/dist/bundle.js', array('jquery'), 1, false );

}

La acción de agrupar estilos es conocida en Webpack como bundling.

¡Y con esto ya está todo listo para los archivos JS!

Cómo utilizar los archivos de estilos con Webpack en WordPress

Una vez está configurado Webpack e instalado correctamente es hora de ponerse manos a la obra con los archivos de estilo.

1. Primero, debemos instalar algunos cargadores para ayudar a Webpack a lidiar con todos estos tipos diferentes de archivos. En tu terminal, mientras estás en el directorio de tu tema, escribe:

npm install style-loader css-loader sass-loader node-sass file-loader url-loader raw-loader –save

2. En tu archivo webpack.config.js, agrega la sección de módulos para que todo tu archivo se vea así:

//webpack.config.js

var webpack = require('webpack')

module.exports = function(env) {
    return {
        entry: "./js/app.js",
        output: {
            path: __dirname + "/dist",
            filename: "bundle.js"
        },
        module: {
            loaders: [
                {test: /\.html$/, loader: 'raw-loader', exclude: /node_modules/},
                {test: /\.css$/, loader: "style-loader!css-loader", exclude: /node_modules/},
                {test: /\.scss$/, loader: "style-loader!css-loader!sass-loader", exclude: /node_modules/},
                {test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)|\.svg($|\?)/, loader: 'url-loader'}
            ]
        },
    }
}

Puedes ver que cada cargador está "probando" los archivos con una extensión específica y los trata con los cargadores especificados.

En los cargadores que manejan CSS y SASS estamos encadenando cargadores de derecha a izquierda. También excluimos la carpeta node_modules porque no queremos todo eso en nuestro paquete.

3. Ahora que Webpack puede manejar archivos de estilo, deberíamos "requerirlos" en nuestro archivo de punto de entrada: app.js.

//js/app.js

//Require SASS
require('../scss/main.scss')

//Require CSS
require('../style.css')

//Require scripts
require('./script')

4. Estupendo. Casi terminamos. Lo último que necesitaremos hacer con los complementos de jQuery. Algunos de los más populares, como Slick, por ejemplo, usan variables globales y deberían importarse de una manera especial.

Si deseas instalar algunos de estos complementos, debes usar el gestor de scripts.

Dirígete a tu consola e instala el cargador ingresando este comando:

npm install --save script-loader
Hacemos un pull de la libreria de slick, solo por seguridad:

npm install --save slick-carousel

En nuestro archive app.js importamos slick.js yu quedaria asi:

//js/app.js

//Require SASS
require('../scss/main.scss')

//Require CSS
require('../style.css')

//Require scripts
require('./script')

//Require Slick
require('script-loader!../node_modules/slick-carousel/slick/slick')

Eso es todo. Deberíamos estar listos para irnos. No te olvides de ejecutar el paquete web: mira en tu consola mientras estás en el directorio de temas cuando trabajes en el proyecto o tus cambios no tendrán efecto

Tags: 
webpack, wordpress

Deja un comentario


Sobre Nosotros

En Roiting contamos con un equipo de profesionales de diferente índole (analistas web, programadores, diseñadores, community managers, expertos en ppc y posicionamiento en buscadores) especializados en el entorno online y con un punto en común.