Depuis l'arrivée d'AssetMapper dans Symfony 6.3, beaucoup de développeurs se demandent si Webpack Encore est encore pertinent. La réponse est oui dès qu'un projet dépend de paquets npm complexes, de TypeScript, de React/Vue avec JSX/SFC, ou a besoin de code splitting fin. Voici les points à ne pas négliger en le reprenant en main.
Entry points et découpage du bundle
La base reste addEntry(), mais sur une application qui grossit, mieux vaut activer splitEntryChunks() pour extraire le code partagé (vendor, utils communs) dans des chunks séparés plutôt que de le dupliquer dans chaque entrée.
Encore
.setOutputPath('public/build/')
.setPublicPath('/build')
.addEntry('app', './assets/app.js')
.addEntry('admin', './assets/admin.js')
.splitEntryChunks()
.enableSingleRuntimeChunk();
enableSingleRuntimeChunk() est recommandé par Encore lui-même : il isole le runtime webpack dans un fichier dédié, ce qui évite d'invalider le cache navigateur de tous les chunks à chaque déploiement.
Manifest et cache-busting
En production, activez .enableVersioning(Encore.isProduction()) pour que chaque fichier porte un hash de contenu, et servez les assets via {{ asset('build/app.js') }} côté Twig : Symfony lit alors manifest.json pour résoudre le vrai nom de fichier. Sans cette étape, les navigateurs des utilisateurs continuent de servir une ancienne version en cache après un déploiement.
Presets utiles à connaître
- enableSassLoader() / enablePostCssLoader() pour Sass et Tailwind.
- enableReactPreset() ou enableVueLoader() selon le framework front.
- enableTypeScriptLoader(), souvent combiné avec
configureBabel()pour ajuster les cibles de compatibilité navigateur. - copyFiles() pour copier des assets statiques (images, fonts) sans passer par un import JS.
Encore ou AssetMapper : comment trancher
AssetMapper convient bien aux projets à faible complexité front (peu ou pas de build, importmaps natifs), avec un temps de démarrage quasi nul. Webpack Encore garde l'avantage dès qu'il faut du tree-shaking poussé, des composants React/Vue compilés, ou l'intégration de bibliothèques npm qui ne publient pas de version ES module compatible importmap. Le choix se fait projet par projet, pas une fois pour toutes : rien n'empêche de migrer un module isolé vers AssetMapper tout en gardant Encore pour le reste.
Dernier réflexe utile : lancez encore dev-server --hot en développement pour le HMR, mais vérifiez toujours le build avec encore production avant de déployer, car certains loaders (notamment TypeScript strict ou PostCSS) ne remontent certaines erreurs qu'en mode production.