Comme vous le savez tous, beaucoup de thèmes existent pour WordPress, qu’ils soient premium ou gratuits. Conçus initialement pour être très facilement paramétrables (rédaction, disposition,…), ils peuvent cependant présenter des inconvénients au niveau de l’optimisation que ce soit au niveau du temps de chargement des fichiers, de l’optimisation mobile ou ils peuvent être tout simplement mal codés. Je vais donc vous parler dans cet article comment optimiser son thème WordPress à l’aide de Webpack.

Webpack, c’est quoi ?

Webpack est un bundler de modules conçu nativement pour des ressources JavaScript, mais pas que puisqu’il propose grâce à son système de loader de transformer n’importe quelle ressource en JavaScript et c’est grâce à cela que tout pourra être consommé en tant que module.

wepbpack

Pourquoi Webpack ?

Webpack présente beaucoup d’avantages :

  • Compilation Préprocesseurs CSS (Sass, Less, Stylus…)
  • Minification des fichiers JS / CSS ( compression)
  • Autoprefixer CSS ( pour la rétrocompatibilité )
  • Optimisation des images
  • Réduction du temps de chargement
  • etc…

Installation et mise en place

Installation de Node.js

Avant de pouvoir utiliser la commande npm ou même webapack, nous devons au préalable installer Node.js. C’est tout simplement un serveur qui utilise le langage JavaScript. En installant ce dernier, vous découvrirez qu’il contient un système de paquet intégré nommé npm.

install-node-js

Installation de Webpack

Cette fois-ci afin de pouvoir utiliser webpack à partir de notre terminal, nous devons l’installer et de manière globale.

npm i -g webpack

Et pour vérifier que ce dernier est bien installé, il suffit juste de faire :

webpack -v

webpack-installation

Mise en place de Webpack dans un thème wordpress

Un thème WordPress dispose de certains fichiers qui lui sont indispensables à savoir: style.css, functions.php, header.php, footer.php,…

Nous allons nous rendre dans le dossier wp-content/themes/ de notre wordpress et créer un nouveau dossier qui aura le nom de notre thème, par exemple pour ma part je l’ai nommé wp-webpack-starter, logique non ?

Ensuite nous créons un fichier style.css qui contient des commentaires permettant à WordPress de reconnaître qu’il s’agit bien d’un thème, ou d’un thème enfant dans d’autres cas.

/*
Theme Name: wp-webpack-theme-starter
Theme URI: http://abdessalam-benharira.me/
Author: Abdessalam Benharira
Author URI: http://abdessalam-benharira.me/
Description: content
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentyseventeen
Tags: custom
*/

Et voilà votre thème est créé. Si vous n’avez pas envie de le faire vous même vous n’avez qu’à le générer à partir du starter theme Underscores.

Par la suite notre thème va être composé des fichiers suivants en plus des fichiers cités précédemment:

  • package.json: la liste des paquets nécessaires (si le fichier n’existe pas, il suffit de lancer la commande npm init).
  • webpack.config.js: le fichier de configuration webpack.
  • node_modules: les paquets installés à partir du fichier package.json et nécessaires au bon fonctionnement de notre thème
  • package-lock.json: un fichier créé après l’exécution de la commande npm install

On va partir du principe qu’aucun de ces fichiers n’existe.

On lance la commande npm init afin d’initialiser notre projet avec les informations nécessaires.

npm init

Voyons maintenant ce que contient le fichier package.json

Il contient notamment les informations que je lui ai passées.

{
  "name": "wp-webpack-theme-starter",
  "version": "1.0.0",
  "description": "WordPress webpack starter",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": ""
}

On crée ensuite deux dossiers l’un src/ qui contiendra le point d’entrée (Entry) nécessaire à la configuration ainsi que tous les fichiers à compiler, et l’autre dist/ qui contiendra notre point de sortie (Output) et les fichiers  à utiliser dans notre thème.

Configuration Webpack

Afin que Webpack fonctionne il suffit de renseigner tous les paramètres nécessaires dans un fichier nommé webpack.config.js, par la suite ce fichier sera appelé webpack.common.js si l’on travaille avec les modes : webpack.dev.js et webpack.prod.js.

Pour une configuration simple ce fichier contient: le point d’entrée, le point de sortie, le mode,…

J’ai utilisé babel-loader pour la transpilation des fichiers JavaScript, mini-css-extract-plugin pour l’extraction et la séparation des fichiers css auquel s’ajoute optimize-css-assets-webpack-plugin pour la minification du code css et uglifyjs-webpack-plugin pour le code JavaScript et file-loader pour les fichiers.

Voici à quoi ressemble mon fichier de configuration de base, rien de plus avancé que ça :

const path = require("path"),
    UglifyJSPlugin = require("uglifyjs-webpack-plugin"),
    MiniCssExtractPlugin = require("mini-css-extract-plugin"),
    OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
module.exports = {
    mode: "development",
    entry: "./src/index.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js"
    },
    optimization: {
        minimizer: [new UglifyJSPlugin({
            sourceMap: false
        }), new OptimizeCSSAssetsPlugin({})]
    },
    plugins: [new MiniCssExtractPlugin({
        filename: "style.css"
    })],
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /(node_modules)/,
            use: {
                loader: "babel-loader",
                options: {
                    presets: ["env"]
                }
            }
        }, {
            test: /\.css$/,
            use: [{
                loader: MiniCssExtractPlugin.loader,
                options: {}
            }, "css-loader"]
        }, {
            test: /\.(png|svg|jpe?g|gif)$/i,
            use: [{
                loader: "file-loader"
            }]
        }]
    },
    watch: true
};

En mettant watch à true on indique à webpack de tout le temps surveiller les changements et mettre à jour les fichiers concernés. On lance webpack.

webpack

Nous constatons ainsi que webpack  a bien généré les fichiers de sortie dist/bundle.js et dist/style.css que nous mettrons par la suite dans le fichier functions.php du thème.

function wp_webpack_starter_scripts()
{
  wp_enqueue_style('wp-webpack-starter-style', get_template_directory_uri() . '/dist/style.css',
  array(), date("H:i:s"));
  wp_enqueue_script('wp-webpack-starter-script', get_template_directory_uri() . '/dist/bundle.js',
  array(), date("H:i:s"));
}
add_action('wp_enqueue_scripts', 'wp_webpack_starter_scripts');

Nous pouvons avoir une configuration un peu plus complexe en séparant tous les composants sass possibles par exemple, les fonts… et cela n’est qu’un aperçu de ce que j’ai pu faire avec WordPress.

Avant de partir…
Merci pour votre lecture ! 😊