Exemple de dépôt : Télécharger ici

Webpack est un formidable bundler de modules statiques, basé sur node.js. Il est largement utilisé pour développer des applications JavaScript. C’est un outil qui n’est pas facile à configurer mais qui est livré préconfiguré avec de nombreux packages d’applications frontales tels que create react app ou @vue/cli. Si vous avez développé des applications à page unique basées sur des frameworks JavaScript modernes tels que React, Angular ou Vue, vous connaissez probablement Webpack comme la baguette magique qui minifie vos fichiers js et css en coulisses. Webpack donne au développeur le superpouvoir d’utiliser les modules ES6 pour séparer le code js en composants, prétraiter scss en css, concaténer et minifier les scripts, et même rafraîchir automatiquement le navigateur à chaque fois que le code css ou js est mis à jour. Cependant, peu de développeurs savent qu’il est possible de tirer profit des fonctionnalités de Webpack dans une atmosphère de serveur monolithique, comme WordPress. Ce n’est pas parce que vous travaillez sur un site WordPress rendu côté serveur que vous ne devez pas utiliser des outils frontaux modernes, n’est-ce pas ? En fait, vous êtes encouragé à les utiliser, car cela vous donnera une longueur d’avance dans une niche très compétitive. Dans ce tutoriel, je vais vous montrer comment intégrer Webpack à WordPress pour le développement de thèmes ou de plugins en utilisant l’outil @wordpress/scripts.

Tout le code de ce tutoriel est disponible publiquement et peut être téléchargé à partir du Thème WordPress-Webpack pour débutants que j’ai créé. Le thème est livré avec une configuration Webpack de base, que vous pouvez facilement étendre. Maintenant, assez parlé, prenons une tasse de café et commençons à coder.

Configurer Webpack

Si vous le souhaitez, vous pouvez télécharger Webpack et le configurer à partir de zéro, mais nous allons utiliser quelque chose d’autre ici, qui est spécifiquement conçu pour le développement de WordPress, appelé @wordpress/scripts. Il s’agit d’une collection de scripts réutilisables que l’équipe principale de WordPress utilise pour développer et maintenir l’éditeur de blocs de WordPress. Comme vous le savez probablement, l’éditeur de blocs de WordPress (éditeur Gutenberg) est construit principalement sur React.js, de sorte que ces scripts sont un must absolu. Ainsi, au lieu de configurer Webpack manuellement pour le développement du thème, ce qui prendrait trop de temps, même si vous êtes un développeur expérimenté, je vous recommande vivement d’exécuter la commande suivante dans cmd ou terminal :

npm install @wordpress/scripts --save-dev

P.S : Si cela ne fonctionne pas, assurez-vous que vous avez installé node et npm sur votre machine. Vous allez utiliser des modules node, donc vous avez besoin de node.js, allez !

À ce stade, votre fichier package.json devrait ressembler à quelque chose comme ceci :

package.json

{
    "name": "highstarter_child",
    "version": "1.0.0",
    "description": "A child theme of the Highstarter theme",
    "scripts": {
        "build": "wp-scripts build",
        "start": "wp-scripts start",
        "lint:css": "wp-scripts lint-style",
        "lint:js": "wp-scripts lint-js",
        "format:css": "npm run lint:css -- --fix",
        "format:js": "npm run lint:js -- --fix"
    },
    "devDependencies": {
        "@wordpress/scripts": "^24.6.0",
    },
    "author": "Atanas Yonkov",
    "license": "GNU GPL"
}

Ensuite, vous pouvez éventuellement créer un fichier webpack.config.js, dans lequel vous pouvez étendre la configuration Webpack par défaut de @wordpress/scripts et configurer l’emplacement des fichiers sources.

webpack.config.js

/**
 * External Dependencies
 */
const path = require( 'path' );

/**
 * WordPress Dependencies
 */
const defaultConfig = require( '@wordpress/scripts/config/webpack.config.js' );

module.exports = {
	...defaultConfig,
	...{
		entry: {
			main: path.resolve( process.cwd(), 'src/scss', 'main.scss' ),
			app: path.resolve( process.cwd(), 'src/js', 'app.js' ),
		},
	},
	plugins: [ ...defaultConfig.plugins ],
};

Avec cette configuration, j’ai créé un dossier src et j’y ai ajouté les dossiers scss et js. Enfin, j’ai ajouté le fichier main.scss dans le dossier scss et le fichier app.js dans le dossier js. Vous pouvez modifier cela en conséquence, mais gardez à l’esprit qu’avec la configuration actuelle, Webpack produira les fichiers dist dans le dossier build.

Mise en place de l’ES Lint

@Wordpress/scripts inclut également un linter qui gardera vos fichiers js et scss propres et bien rangés. Il est fortement recommandé d’ajouter un fichier .eslintrc à la racine de votre thème. Voici la configuration que j’utilise :

.eslintrc

{
	"extends": [
		"plugin:@wordpress/eslint-plugin/recommended-with-formatting"
	],
	"env": {
		"browser": true,
		"es6": true
	},
	"rules": {
		"@wordpress/no-global-event-listener": "off",
		"eqeqeq": "off"
	}
}

Vous pouvez ajouter vos propres règles, l’important étant d’être cohérent. Pour vérifier que le code à l’intérieur du dossier src ne contient pas d’erreurs, exécutez :

npm run format:js

Générer le dossier build

Par défaut, Webpack doit générer la sortie du dossier src dans le dossier build. Ajoutez du code js de test dans src/js/app.js et exécutez :

npm run start

Cela devrait permettre à Webpack de générer le dossier de construction avec app.js main.css et app.asset.php. Pour minifier les fichiers pour la production, exécutez

npm run build

Parmi les fichiers que Webpack génère dans le dossier de construction, le plus intéressant est app.asset.php. Il produit une liste de tous les modules importés de l’extérieur que vous avez utilisés dans votre fichier src/js/app.js. Vous pouvez ensuite utiliser ce fichier pour les ajouter automatiquement comme dépendances à votre script. Par exemple, si vous installez jquery en tant que package npm et que vous l’importez dans votre fichier app.js, le fichier app.asset.php sera automatiquement mis à jour par Webpack et WordPress saura qu’il doit l’ajouter en tant que dépendance js. Pour cela, vous aurez besoin de mettre en queue votre fichier build/app.js également. Plus d’informations à ce sujet dans le prochain chapitre.

Vous pouvez remarquer qu’avec la configuration actuelle, Webpack génère un fichier .js supplémentaire, appelé main.js. C’est parce que, par défaut, Webpack génère un fichier .js pour chaque entrée, même s’il s’agit en fait d’un fichier css. Pour éviter cela, j’ai ajouté deux plugins Webpack supplémentaires en tant que dépendances npm dev :

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

npm install --save-dev webpack-fix-style-only-entries

Mise en file d’attente de vos assets

Enfin, vous devez inclure les assets générés par Webpack dans le dossier de construction. Si vous avez gardé la même structure que moi, ajoutez le code suivant à functions.php :

if ( ! defined( 'HIGHSTARTER_CHILD_VERSION' ) ) {
	// Replace the version number of the theme on each release.
	define( 'HIGHSTARTER_CHILD_VERSION', '1.0.0' );
}

function highstarter_child_webpack_scripts_and_styles() {
	$script_asset = include_once( get_stylesheet_directory() . '/build/app.asset.php' );
	wp_enqueue_script( 'custom-js', get_stylesheet_directory_uri()  . '/build/app.js', $script_asset['dependencies'], $script_asset['version'], true );
	wp_enqueue_style( 'custom-css', get_stylesheet_directory_uri()  . '/build/main.css', array(), HIGHSTARTER_CHILD_VERSION );
}
add_action( 'wp_enqueue_scripts', 'highstarter_child_webpack_scripts_and_styles', 100 );

L’avantage du fichier .js est qu’il va automatiquement mettre à jour ses dépendances js en fonction des modules que vous avez importés dans le fichier app.js à l’intérieur du dossier src/js. Il mettra également à jour sa version automatiquement, en fonction du moment où Webpack a mis à jour le dossier de construction.

Importer des modules dans votre fichier Js

Dans src/js, créez un dossier composants et ajoutez un fichier appelé theme-options.js :

theme-options.js

export default function themeOptions() {
	// eslint-disable-next-line no-console
	console.log( 'A foo walks into a bar, takes a look around and says "Hello World!"' );
}

Nous venons de créer un module. Maintenant, importons-le dans notre fichier app.js :

app.js

/**
 * Internal Dependencies
 */
import themeOptions from './components/theme-options';

( function() {
	themeOptions();
}() );

Maintenant, si nous lançons npm run start et vérifions le dossier de construction, nous verrons que le js a été compilé avec succès. De la même manière, nous pouvons utiliser l’instruction import dans src/js/app.js pour utiliser des dépendances externes, par exemple jQuery. Webpack s’occupera de concaténer et de minifier le tout-en-un seul petit fichier, ce qui nous permettra de vivre une expérience de développement frontale moderne et sophistiquée.