À la découverte de webpack

Symfony intègre Webpack Encore. N’ayant jamais utilisé webpack auparavant, il fallait que je comprenne son fonctionnement. webpack se définit comme un « module bundler for modern Javascript applications ». Pourtant, il ne se limite pas à Javascript et il est utilisé par des projets qui ne sont pas forcément basés sur ce langage. Alors à quoi sert webpack ? Voyons comment il fonctionne et comment et pourquoi l’utiliser dans un projet.

Qu’est-ce que webpack ?

Présentation

webpack est un projet lancé sous licence MIT en mars 2012 par Tobias Koppers. Depuis, l’équipe s’est agrandie et le projet en est actuellement à la version 5.4.0.

webpack

Il s’agit d’un groupeur de modules écrit en Javascript et initialement créé pour Javascript. Il vous permet de gérer facilement les ressources utilisées par votre projet. Vous souhaitez concaténer vos fichiers, les minifier, compiler Sass, optimiser vos images, découper vos scripts et feuilles de styles pour les attribuer à une page spécifique ? Tout cela est possible avec webpack, et d’autres choses le sont également.

Comment fonctionne webpack ?

Pour comprendre webpack, il faut retenir au moins quatre mots-clés :

  • graphe de dépendances
  • point d’entrée
  • point de sortie
  • loaders

Commençons par définir ce qu’est un graphe de dépendances. Je ne vais pas vous expliquer ce qu’est un graphe en détail. Je vous invite plutôt à lire l’article de Wikipédia sur la théorie des graphes pour cela. Pour faire simple, un graphe est un modèle abstrait représentant des objets reliés entre eux. Ainsi, un graphe de dépendances est un graphe orienté qui permet de représenter les dépendances de différents objets les uns par rapport aux autres. Une dépendance peut-être n’importe quel fichier qui dépend d’un autre. Ainsi, les images ou polices utilisées par un projet sont des dépendances de ce projet.

Graphe de dépendances

Pour construire le graphe de dépendances, webpack a besoin de connaître le ou les point(s) d’entrée. Ils vont servir à construire le ou les graphes de dépendances en parcourant récursivement tous les modules nécessaires au projet. Il faut ensuite configurer un point de sortie. Ce dernier indique à webpack l’emplacement où les paquets générés doivent être stockés.

Je vous disais qu’une dépendance pouvait être une image ou une police. Seulement, par défaut, webpack ne comprend que les fichiers Javascript ou JSON. Si vous souhaitez ajouter d’autres types de fichiers au graphe de dépendances, il faut faire intervenir les loaders. Chaque type de fichier peut avoir son loader ; une feuille de style et un fichier texte n’utiliseront pas le même loader. Ainsi, webpack ne gère plus seulement Javascript mais tout type de fichiers qui est nécessaire à votre projet.

Pourquoi utiliser webpack ?

Un projet web se divise en de nombreux fichiers. Vous avez rarement un seul fichier Javascript ou encore un seul fichier CSS. Pour les utiliser, il faut les intégrer un par un. L’autre solution est d’utiliser un outil pour les concaténer et générer un seul fichier à intégrer.

Vous allez me dire qu’il existe déjà des outils qui font ça comme Gulp ou Grunt. En effet. Pour un petit projet, cela peut être suffisant. Par contre, lorsqu’un projet grossit, il faut alors se rappeler des relations entre chaque fichiers pour que Gulp les concatène dans le bon ordre. Le procédé devient donc un peu plus complexe et peut mener à des erreurs. Grâce à son graphe de dépendances, webpack peut pallier à ce problème. Il sait quel fichier dépend d’un autre et peut donc les charger dans le bon ordre dans le fichier de sortie. Il fait donc à peu près la même chose que Gulp, mais vous facilite la vie en automatisant une partie du procédé.

Fonctionnement de webpack
Source : https://webpack.js.org/

Et Symfony dans tout ça ?

Depuis la version 4, Symfony intègre Webpack Encore. Il s’agit d’une enveloppe pour webpack. L’objectif, si j’ai bien compris, est de simplifier la configuration. À noter que Webpack Encore, bien que créé par Symfony, peut être utilisé avec n’importe quelle application PHP. Il ne se cantonne pas à Symfony.

La théorie c’est sympa, mais en pratique comment ça marche ?

Je n’ai pas encore utilisé webpack dans un projet en dehors de Symfony, donc ici je vais plutôt vous parler du fonctionnement de Webpack Encore avec Symfony Flex. Si vous souhaitez l’utiliser ailleurs, vous pouvez consulter la documentation de Webpack Encore sur le site de Symfony.

Installation

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 3e 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

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. En s’arrêtant là, son intérêt reste assez restreint vis à vis d’outils comme Gulp ou Grunt.

Ceci dit, si vous avez lu les premières parties, vous avez noté que webpack offre d’autres possibilités non traitées ici. Ainsi, il est possible de lui ajouter d’autres plugins ou d’autres loaders. Il notamment 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.

Il s’agit du réel avantage vis à vis d’outils comme Gulp ou Grunt. En dehors de cet aspect, je ne sais pas lequel il vaut mieux privilégier. Cela dépend sans doute du projet. Gulp me semble plus simple à configurer que webpack, même si avec la version Webpack Encore la configuration semble simplifiée.

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.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.