Utiliser Webpack Encore avec WordPress

Je travaille principalement sur des projets Symfony et lorsque je dois passer sur des projets ayant pour base WordPress j’aime bien essayer de transposer des outils bien pratiques provenant de l’écosystème de Symfony. Pour la gestion des assets, cet outil s’appelle Symfony Encore.

Webpack Encore

Webpack Encore permet d’utiliser Webpack tout en ayant une couche d’abstraction sur la configuration de celui-ci, le rendant plus « simple » à utiliser pour un développeur PHP. Par exemple, il est très simple de faire une configuration pour utiliser Sass, Babel et même PurgeCss.

Installation et configuration

Utiliser Webpack Encore dans votre thème est plutôt simple, il faut l’installer à l’aide de npm ou yarn avec la commande suivante :

yarn add @symfony/webpack-encore
// ou
npm install @symfony/webpack-encore

Une fois installé, il faut configurer votre webpack voici un exemple de fichier webpack.config.js pour un thème WordPress :

let Encore = require('@symfony/webpack-encore');

Encore
  .setOutputPath('build/')
  .setPublicPath('/content/themes/awesome_theme/build') // A changer en fonction de votre path
  .setManifestKeyPrefix('')
  .addEntry('main', './assets/js/main.js')
  .enableSingleRuntimeChunk()
  .cleanupOutputBeforeBuild()
  .enableSourceMaps(true)
  .enableVersioning(Encore.isProduction())
  .autoProvidejQuery()
;

module.exports = Encore.getWebpackConfig();

Il vous reste plus qu’à builder vos assets !

// Builder en watch pendant le développement
yarn encore dev --watch

// Builder pour la production
yarn encore production

WordPress et Webpack Encore

Une fois Webpack Encore configuré, il faut pouvoir l’utiliser dans notre thème. Si vous connaissez un peu WordPress, vous connaissez forcément les hooks permettant d’ajouter des styles et des scripts dans votre thème.

Ce qu’on souhaite ici, c’est que tous les fichiers buildés s’ajoutent automatiquement dans notre thème.

Endpoints.json à la rescousse.

Webpack Encore se charge de créer un fichier appelé entrypoints.json dans lequel tous les assets sont définis.

{
  "entrypoints": {
    "app": {
      "js": [
        "/content/themes/awesome_theme/build/runtime.0f76d358.js",
        "/content/themes/awesome_theme/build/app.4823fb59.js"
      ],
      "css": [
        "/content/themes/awesome_theme/build/app.45179f82.css"
      ]
    }
  }
}

Pour ça je me suis amusé à créer une librairie appelée WordPress Encore qui s’occupe de tout ça.

Si vous avez suivi mon article sur comment utiliser WordPress avec Composer il suffit de lancer la commande suivante :

composer require antiseptikk/wordpress-encore

Et d’ajouter vos scripts :

<?php

add_action('wp_enqueue_scripts', function() {
    $encore = new \Antiseptikk\Encore('build', '1.0.0', WP_HOME);
    $encore->enqueue('app', 'main', []);
});

Il ne reste plus qu’à sortir vos plus belles lignes de CSS et JS et Webpack s’occupe du reste ! N’hésitez pas à tester ce plugin et à proposer des améliorations !

Dans la vie réelle

J’utilise cette librairie sur un grand nombre de sites en production depuis plusieurs années. Pour une équipe de développeurs backend habitués à travailler avec les outils Symfony, WordPress Encore permet de standardiser les processus de développement avec un outil efficace pour la gestion des assets.

Ressources :

• Dépôt WordPress Encore
• Documentation Webpack Encore