Webpack/Encore : rôle et utilisation

À quoi ça sert ?

Encore est une surcouche développée par Symfony pour simplifier l’utilisation de Webpack dans un projet Symfony. Webpack est un outil puissant pour bundler, minifier et optimiser les fichiers JavaScript, CSS et autres assets front-end. Encore permet de configurer Webpack de manière intuitive, sans avoir à écrire manuellement des fichiers de configuration complexes. Il gère la compilation, la minification, la gestion des dépendances, et même la prise en charge de préprocesseurs comme Sass ou TypeScript.

Avantages :

• Intégration transparente avec Symfony (via le bundle WebpackEncoreBundle)
• Génération automatique des balises
• Support natif pour React, Vue.js, TypeScript,…
• Versioning des assets pour éviter les problèmes de cache.

Comment s’en servir ?

Avec Symfony Flex, il suffit de lancer :

composer require symfony/webpack-encore-pack
yarn install

Cela crée un fichier webpack.config.js et installe les dépendances nécessaires.

Dans webpack.config.js, on définit les points d’entrée (entry points) pour JS/CSS :

Encore.addEntry('app', './assets/app.js');

Du coup, on peut activer des fonctionnalités comme Sass, React, ou TypeScript via des méthodes dédiées :

Encore.enableSassLoader();
Encore.enableReactPreset();

Exemple d’utilisation dans Twig :

Pour inclure tes assets compilés dans une vue Twig :

{{ encore_entry_script_tags('app') }}
{{ encore_entry_link_tags('app') }}

Pour compiler les assets en mode développement :

yarn encore dev --watch

Pour une version optimisée en production :

yarn encore production

Pourquoi utiliser Encore plutôt que Webpack seul ?

• Simplicité : Encore masque la complexité de Webpack avec une API claire et bien documentée.
• Intégration Symfony : Génération automatique des balises Twig, gestion des assets versionnés, etc.
• Flexibilité : On peut toujours accéder à la configuration Webpack sous-jacente si besoin.

Résumé

Encore/Webpack est indispensable pour gérer efficacement les assets front-end dans Symfony, surtout si on utilise des frameworks JS modernes ou des préprocesseurs CSS.

Organisation recommandée

assets/
├── styles/
│   ├── _variables.scss       # Variables (couleurs, tailles, etc.)
│   ├── _mixins.scss          # Mixins réutilisables
│   ├── _base.scss            # Styles de base (reset, typographie, etc.)
│   ├── _components/          # Styles par composant (boutons, cartes, etc.)
│   │   ├── _buttons.scss
│   │   ├── _cards.scss
│   │   └── ...
│   └── app.scss               # Fichier principal qui importe tout

---