Webpack Encore🔗

Installation🔗

Références: https://symfony.com/doc/current/frontend/encore/installation.html

1 2	`composer require symfony/webpack-encore-bundle yarn install`

Optimisation des sourcemaps🔗

Par défaut webpack utilise le format inline-source-map qui est exhaustif au niveau du sourcemap généré (le lien est fait exactement avec le code source) mais est lent que ce soit au build ou au rebuild (watch).

Le eval-cheap-module-source-map est relativement lent au build, mais très efficace au rebuild, donc parfait pour du dev en terme de temps. En terme de sourcemaps, c'est un bon compromis aussi, car s'il n'a pas les source "exactes", il utilise tout de même les sources non transformées et est capable de faire le lien avec le numéro de ligne, ce qui est plus que suffisant pour debug.

On peut trouver une liste des différents format possible sur la documentation de webpack

// Change the kind of source map generated in development mode
if (!Encore.isProduction()) {
    clientConfig.devtool = 'eval-cheap-module-source-map';
}

Build CSS dédié🔗

Pour séparer le build CSS d'un (ou plusieurs) build JS et éviter d'avoir à "inclure" du CSS dans un fichier JS, rajouter l'entrée suivante :

1	`.addStyleEntry('style', './assets/sass/app.scss')`

Puis intégrer dans les templates twig comme habituellement :

1
2
3

{% block stylesheets %}
    {{ encore_entry_link_tags('style') }}
{% endblock %}

Tags style & script personalisés (javascript non bloquant avec async)🔗

La configuration par défaut du Webpack Encore bundle propose d'ores-et-déjà de charger les scripts à la fin de la balise head avec un attribut defer.
Si cela ne vous convient pas, ou que vous avec d'autres attributs à configurer, il existe plusieurs méthodes pour les renseigner.

Il est notamment possible de spécifier directement dans Twig la liste des attributs:

<head>
{% block javascripts %}
    {{ encore_entry_script_tags('app', attributes={ async: true }) }}
{% endblock %}
</head>

ou encore globalement dans la config du bundle:

webpack_encore:
    # Set attributes that will be rendered on all script and link tags
    script_attributes:
        async: true
    # link_attributes:

Dans cet exemple, on permet de charger le javascript de manière non-bloquante en l'incluant dans la balise head et en spécifiant l'attribut HTML5 async.

Alias (a.k.a. le "namespace" du module)🔗

Pour avoir des chemins absolus plûtot que relatifs dans les imports ES6, déclarer des alias comme ceci dans votre configuration Webpack Encore:

Appelez la méthode suivante :

// Alias
.addAliases({
    'app': `${__dirname}/assets/js/`,
})

Vous pouvez maintenant dans assets/js/module/user/User.js utiliser des chemins absolus via l'alias:

1 2	`//import Core from '../../core.js'; import Core from 'app/core.js';`

Résoudre les alias avec PhpStorm🔗

PhpStorm supporte nativement la résolution des alias déclarés via la configuration Webpack, permettant l'autocomplétion et d'importer automatiquement un élément de code JS lors de son utilisation, via l'alias en lieu et place du chemin relatif.
Cependant, étant donné que nous utilisons Webpack Encore qui est une surcouche avec sa propre syntaxe, le fichier webpack.config.js n'est pas toujours correctement interprété.
Une solution de contournement est d'alors redéclarer les alias dans un fichier dédié:

// webpack.aliases.config.js
module.exports = {
    resolve: {
        alias: {
            'app': `${__dirname}/assets/js/`,
        }
    }
};

Note

Vous pouvez choisir d'ignorer ce fichier (via votre fichier .gitinore global par convention, ou via le fichier /path-to-your-project/.git/info/exclude) ou bien l'intégrer pleinement à votre projet en le réutilisant dans le fichier webpack.config.js pour toute configuration spécifique, hors Webpack Encore.

Last update: December 20, 2024