Utiliser plusieurs configurations avec Webpack Encore sur Symfony | Ikuzo, digital agency, spécialisée dans la création de site internet et la communication
            globale à Besançon

Utiliser plusieurs configurations avec Webpack Encore sur Symfony

La configuration par défaut de Webpack Encore compile les assets dans un dossier public/build, que vous pouvez ensuite inclure dans votre page avec la fonction twig encore_entry_script_tags. Mais il est aussi possible de séparer les assets dans des dossiers distincts, pour séparer le front et l’admin par exemple (ou pour une partie blog, un espace client, un tunnel de commande, etc).

C’est le cas d’utilisation que j’ai rencontré, et ce n’était pas clair dans la doc, j’ai fait plusieurs tests et navigué sur des forum, ce qui me pousse à en parler dans cet article.

C’est évoqué dans la partie « Defining multiple Webpack Configurations » sur cette page de la documentation. Mais cette configuration reste dans un seul dossier. Modifions un peu cette configuration pour séparer front et admin, et utiliser 2 dossiers séparés (build et admin/build) :

// define the first configuration
Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')
    .addEntry('app', './assets/js/app.js')
    .enableSassLoader()
    .enableSourceMaps(!Encore.isProduction())
;

// build the first configuration
const front = Encore.getWebpackConfig();

// Set a unique name for the config (needed later!)
firstConfig.name = 'front';

// reset Encore to build the second config
Encore.reset();

// define the second configuration
Encore
    .setOutputPath('public/admin/build/')
    .setPublicPath('/admin/build')
    .addEntry('mobile', './assets/admin/js/app.js')
    .enableSassLoader()
    .enableSourceMaps(!Encore.isProduction())
;

// build the second configuration
const admin = Encore.getWebpackConfig();

// Set a unique name for the config (needed later!)
secondConfig.name = 'admin';

// export the final configuration as an array of multiple configurations
module.exports = [front, admin];

Il faut ensuite modifier l’inclusion des scripts et styles dans vos fichiers twig pour appeler les bons assets. Pour ceci ajouter un 3ème paramètre aux fonctions encore, correspondant au nom de la configuration qu’on ajoutera ensuite.

en front :

{{ encore_entry_link_tags('app', null, 'front') }}
{{ encore_entry_script_tags('app', null, 'front') }}

en back :

{{ encore_entry_link_tags('admin', null, 'admin') }}
{{ encore_entry_script_tags('admin', null, 'admin') }}

Pour que Symfony retrouve les dossiers correspondant, ajoutez cette configuration dans config/packages/webpack_encore.yaml :

webpack_encore:
    output_path: '%kernel.project_dir%/public/build'

    builds:
        frontend: '%kernel.project_dir%/public/build'
        admin: '%kernel.project_dir%/public/admin/build'

Enfin un dernier point, les images en admin ne pointaient plus vers le bon chemin. Ajoutez un package dans la configuration config/packages/assets.yaml :

framework:
    assets:
        json_manifest_path: '%kernel.project_dir%/public/build/manifest.json'

        packages:
            admin:
                json_manifest_path: '%kernel.project_dir%/public/admin/build/manifest.json'

Et utilisez le bon chemin pour vos assets en admin, en indiquant bien le package admin en 2ème paramètre :

{{ asset('admin/build/images/logo.svg', 'admin') }}

Maintenant, tout devrait être OK !

Sources :

Retour Vous êtes intéressé-e pour travailler avec nous ? Cliquez ici !