Gestion de contenu : intégrer Webpack avec Craft CMS

craft cms plugin webpack

En l’espace d’un an, Craft CMS s’est imposé à nous comme une des plateformes de choix pour la gestion de contenu. Les raisons sont nombreuses et dépassent l’objet de cet article mais vous pouvez déjà vous faire une idée des bénéfices sur le site officiel. Nous vous laissons également apprécier notre première réalisation propulsée par Craft sur le site Humans of ESRF.
L’arrivée de Craft 3, disponible très prochainement, fait également l’objet de beaucoup d’enthousiasme parmi l’équipe et pousse l’excellence de cet outil à un niveau supérieur.
Une fois n’est pas coutume, cet article s’adressera plus particulièrement aux techniciens et nous vous prions de nous excuser pour l’usage de termes a priori barbares à tous les autres.

 

Comment intégrer Webpack avec Craft CMS ?

L’intégration de Craft avec notre workflow et nos outils front-end ont été une de nos premières préoccupations. Notamment, il nous fallait un moyen simple et souple de pouvoir gérer les ressources CSS et JavaScript depuis les templates Twig.
Dans cette optique, nous avons créé notre premier plug-in (gratuit) que nous avons le plaisir de vous présenter ici.

 

Viiiite, comment puis-je installer cette merveille ?

Tout d’abord, pour installer le plug-in, vous pouvez soit :

  • utiliser le gestionnaire de dépendance Composer saisissant cette commande à la racine de votre projet Craft 3 :composer require la-hautes-societe/craft-webpack-assets
  • vous rendre directement dans le nouvel outil d’administration de Craft 3 pour accéder à la marketplace de plug-in Craft. Il suffit de cliquer sur le bouton “Installer”
craft cms boutique

Le plugin est conçu pour fonctionner avec Webpack 2 et 3.

 

La configuration Webpack

Afin de pouvoir générer les fichiers JSON nécessaires pour lier les ressources générées par Webpack à Craft, vous devrez installer les extensions Webpack html-webpack-plugin, write-file-webpack-plugin et underscore-template-loader.
En fonction de vos goûts :

  • Soit via Yarn : yarn add html-webpack-plugin write-file-webpack-plugin underscore-template-loader -D
  • Soit via NPM : npm install html-webpack-plugin write-file-webpack-plugin underscore-template-loader --save-dev

On détourne (légèrement) le processus de génération HTML de Webpack afin de lui faire générer les données JSON utilisables par le plugin Craft.
Pour ce faire, on va créer un fichier “template” à destination de html-webpack-plugin. A l’emplacement de votre choix dans votre projet, créez un fichier “assets-files.json.tpl” contenant cette ligne :

<%= JSON.stringify( htmlWebpackPlugin ) %>

Puis, dans votre configuration Webpack, ajouter les propriétés suivantes :


{
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'generated-assets-files.json',
            template: 'underscore-template-loader!path/to/templates/assets-files.json.tpl',
            inject: false,
            chunksSortMode: 'dependency'
        }),
        new WriteFilePlugin({
            test:  /generated-assets-files\.json$/,
            force: true,
            log: false
        })
    ]
}

 

Ajustez la valeur de “template” pour pointer vers le fichier “assets-files.json.tpl” précédemment créé.
Lancez votre processus Webpack, comme d’habitude.

the final countdown

Conseil de pro : pour vous lancer dans le plug-in, faites comme moi : mettez vous dans l’ambiance avec un bon vieux “Final Countdown”

 

La configuration du plug-in Craft

Dans le dossier “config” à la racine de votre projet Craft, ajouter un fichier “webpackassets.php” contenant les instructions suivantes :


<?php

return [
 'jsonPath' => realpath(__DIR__ . '/path/to/generated-assets-files.json'),
];

Ajustez la valeur de “jsonPath” pour pointer vers le fichier généré par Webpack.

 

La touche finale (on y est presque)

C’est le moment d’utiliser les données générées par Webpack dans vos templates. Généralement, ça se passera au niveau de votre fichier de layout général :


    ...
   
    {{ craft.webpackAssets.cssTags() | raw }}
    
    ... Or with chunk name ...
    {{ craft.webpackAssets.cssTags('app') | raw }}
   
    ...


...

{{ craft.webpackAssets.jsTags() | raw }}

... Or with chunk name ...

{{ craft.webpackAssets.jsTags('app') | raw }}
{{ craft.webpackAssets.jsTags('libs') | raw }}

...


Et voilà !
Vos ressources CSS et JavaScript sont désormais accessibles depuis vos templates Twig.

 

Stay tuned

Nous espérons que ce plug-in vous sera aussi utile que ce qu’il peut nous l’être. Pour accéder à la documentation et au code source à jour, nous vous invitons à vous rendre sur sa page GitHub.
Vos remarques et contributions sont les bienvenues.
A bientôt pour de nouveaux plug-ins !


Pour ne rien rater de nos visions d’experts et de nos actualités, n’hésitez pas à vous inscrire à notre newsletter !