Add Webpack config

[kulczy]

To start using webpack:

1. Install webpack-encore-bundle

composer require symfony/webpack-encore-bundle

2. Edit config/packages/assets.yaml file

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

3. Edit config/packages/webpack_encore.yaml file

webpack_encore:
    output_path: '%kernel.project_dir%/public/build/default'
    builds:
        shop: '%kernel.project_dir%/public/build/shop'
        admin: '%kernel.project_dir%/public/build/admin'

4. Overwrite template files with new assets paths

// templates/bundles/SyliusAdminBundle/_scripts.html.twig

{{ encore_entry_script_tags('admin-entry', null, 'admin') }}

// templates/bundles/SyliusAdminBundle/_styles.html.twig

{{ encore_entry_link_tags('admin-entry', null, 'admin') }}

// templates/bundles/SyliusAdminBundle/_logo.html.twig

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

// templates/bundles/SyliusShopBundle/_scripts.html.twig

{{ encore_entry_script_tags('shop-entry', null, 'shop') }}

// templates/bundles/SyliusShopBundle/_styles.html.twig

{{ encore_entry_link_tags('shop-entry', null, 'shop') }}

// templates/bundles/SyliusShopBundle/_header.html.twig

{{ asset('build/shop/images/logo.png', 'shop') }}

The paths should be changed for each asset you use.

5. To build the assets, run:

yarn encore dev
# or
yarn encore production
# or
yarn encore dev-server

When compiling assets, errors may appear (they don't break the build), due to different babel configuration for gulp and webpack. Once you decide to use the webpack you can delete the gulpfile.babel.js and .babelrc from the root directory - then the errors will stop appearing.

---

Customization

To add new assets, copy them to the assets folder, and then import them in one of the entry.js file

---

➡️➡️➡️ Webpack Encore docs

[pamil]

Thanks, Szymon! 🎉