À la découverte de webpack Encore

Introduction

webpack Encore, bien que créé par Symfony, peut être utilisé avec n’importe quelle application PHP. Il ne se cantonne pas à Symfony. Ceci dit, je ne l’ai pas encore utilisé dans un projet en dehors de Symfony. Donc, ici, je vais vous parler de son fonctionnement avec Symfony Flex. Si vous souhaitez l’utiliser ailleurs, vous pouvez consulter la documentation de webpack Encore sur le site de Symfony.

Installation de webpack Encore

composer require symfony/webpack-encore-bundle
yarn install

À l’issue de ces commandes, plusieurs fichiers sont générés :

• webpack.config.js
• assets/app.js
• assets/styles/app.css

Le premier contient la configuration de webpack. Le second sert de point d’entrée. Le 3^e est une dépendance de votre projet (votre feuille de style) qui est important dans le fichier assets/app.js.

Il est possible d’utiliser Sass à la place. C’est d’ailleurs ce que nous allons faire pour voir comment webpack Encore peut se configurer.

yarn add sass-loader node-sass --dev

Vous aurez peut-être besoin de préciser des versions pour une question de compatibilité avec vos autres dépendances.

Configuration de webpack Encore

Maintenant que vous avons installé Sass et son loader, nous allons renommer notre fichier assets/styles/app.css en assets/styles/app.scss. Il faut alors modifier le fichier assets/app.js pour remplacer le fichier importé :

import "./styles/app.scss";

Ensuite, il faut modifier le fichier webpack.config.js pour utiliser le loader de Sass. Le fichier généré devrait déjà le contenir :

// enables Sass/SCSS support
//.enableSassLoader()

Pour l’utiliser, il faut donc dé-commenter la ligne .enableSassLoader().

Et si nous utilisions aussi autoprefixer pour éviter de gérer manuellement les préfixes vendeurs ?

yarn add postcss-loader autoprefixer --dev

Il faut ensuite créer le fichier de configuration de PostCSS :

module.exports = {
    plugins: {
        autoprefixer: {}
    }
}

Pour qu’autoprefixer fonctionne, il faut également lui indiquer la liste des navigateurs à supporter. Nous allons utiliser le fichier package.json pour cela :

"browserslist": [
  "defaults"
]

N’hésitez pas à remplacer defaults par la liste des navigateurs que vous devez supporter.

Puis, nous ajoutons le loader dans le fichier webpack.config.js :

.enablePostCssLoader()

Finalement, pour que notre feuille de style soit intégrée dans l’application, il faut ajouter un tag dans notre fichier base.html.twig :

{% block stylesheets %}
    {{ encore_entry_link_tags('app') }}
{% endblock %}

Générer les ressources

Il est possible de compiler les ressources manuellement avec :

yarn encore dev

Ceci dit, il est peut-être plus intéressant de laisser webpack surveiller nos changements pour qu’il les compile automatiquement, non ? Il suffit d’utiliser la commande suivante :

yarn encore dev --watch

Il ne reste plus qu’à rafraîchir la page !

Pour l’environnement production, il faudra utiliser la commande suivante pour générer les ressources :

yarn encore production

Épilogue

Ici, nous avons vu une configuration assez basique de webpack Encore. En s’arrêtant là, son intérêt peut sembler restreint vis à vis d’outils comme Gulp ou Grunt. Cependant, il est possible de lui ajouter d’autres plugins ou d’autres loaders. Il est également possible de définir différents points d’entrées, ce qui peut-être utile si vous souhaitez intégrer un style ou un script qui ne s’applique qu’à une page.

Par ailleurs, un projet Symfony peut rapidement devenir complexe. Avec des « tasks runners » comme Gulp, pour concaténer les fichiers dans le bon ordre, il faut alors se rappeler des relations entre chaque fichiers. Avec webpack, vous n’avez plus à vous en soucier ; il s’en charge pour vous.

Si vous souhaitez en savoir plus sur les possibilités, la documentation de Webpack Encore vous aidera certainement. Si vous débutez avec webpack, vous pouvez également suivre Symfony The Fast Track qui intègre Webpack Encore dans l’une de ces parties.