Jusqu'à maintenant, nous avons écrit notre JavaScript directement dans nos vues. Ce n'est pas forcément la méthode idéale en termes d'organisation et de structure, nous allons plutôt chercher à écrire notre JavaScript dans des fichiers séparés en les morcelant en modules. Aujourd'hui, lorsque l'on travaille sur du JavaScript de manière avancée on a tendance à utiliser l'outil webpack qui permet de “bundler” notre JavaScript.
Malheureusement, Webpack peut parfois s'avérer difficile à configurer (surtout quand on essaie de l'intégrer à un projet existant). Heureusement pour nous, Symfony dispose d'une surcouche qui s'appelle Symfony Encore et qui permet de configurer plus simplement webpack dans le cadre d'une intégration avec le framework. L'installation se fait très simplement à l'aide du bundle webpack encore :
composer require symfony/webpack-encore-pack
yarn install
Il est ensuite possible de modifier la configuration en fonction de ses besoins à l'aide des méthodes offertes par Symfony Encore. L'avantage est que les différentes méthodes n'ont pour rôle que de générer un objet de configuration qu'il est possible d'altérer dans le cadre de configuration plus poussées.