Webpack Encore : ce que cache addEntry()

Webpack Encore : ce que cache addEntry()

Webpack Encore n'est pas un remplaçant de webpack, c'est une API fluide qui génère un webpack.config.js complet à partir d'un fichier webpack.config.js écrit avec Encore. Comprendre ce qu'elle génère en coulisses évite bien des surprises en production.

Le socle : entrées et environnements

Chaque appel à addEntry() crée un point d'entrée distinct, avec son propre chunk JS et, si le fichier importe du CSS, un fichier CSS extrait automatiquement grâce à MiniCssExtractPlugin :

Encore
  .setOutputPath('public/build/')
  .setPublicPath('/build')
  .addEntry('app', './assets/app.js')
  .addStyleEntry('admin_css', './assets/styles/admin.scss')
  .enableSassLoader()
  .splitEntryChunks()
  .enableSingleRuntimeChunk()
  .enableVersioning(Encore.isProduction())
;

module.exports = Encore.getWebpackConfig();

Encore.isProduction() lit la variable d'environnement NODE_ENV : c'est le levier standard pour activer la minification, le tree-shaking et le hashing des noms de fichiers uniquement en prod, sans dupliquer la config.

Éviter les pièges classiques

• splitEntryChunks() sépare le code partagé (vendor) entre entrées : indispensable dès que plusieurs pages importent les mêmes librairies, sinon chaque bundle réembarque tout.
• enableSingleRuntimeChunk() évite les incohérences de cache entre chunks en isolant le runtime webpack dans un fichier dédié — recommandé par Symfony depuis Encore 1.0.
• copyFiles() copie des assets statiques (images, fonts) sans les faire transiter par le graphe de dépendances JS, utile pour des fichiers référencés uniquement en Twig.

Personnaliser sans tout casser

Encore expose des hooks pour ajuster les loaders sous-jacents sans réécrire toute la config webpack :

Encore.configureBabel(config => {
  config.plugins.push('@babel/plugin-proposal-optional-chaining');
});

Encore.configureFilenames({
  js: 'js/[name].[contenthash:8].js',
});

Ce pattern « configure* » est préférable à un Encore.getWebpackConfig() modifié à la main : il reste compatible avec les futures mises à jour d'Encore.

Côté Twig

Les tags {{ encore_entry_script_tags('app') }} et {{ encore_entry_link_tags('app') }} lisent le fichier entrypoints.json généré par Encore pour injecter automatiquement les bons chemins versionnés, y compris les chunks issus du code splitting via import() dynamique. C'est ce mécanisme, plus que la config webpack elle-même, qui rend Encore particulièrement adapté à une architecture multi-pages Symfony plutôt qu'à une SPA unique.