01.1-webpack-config.md

BitBag SyliusWishlistPlugin

• ⬅️ Back

Installation - Import Webpack Config

• ✔️ Completely independent configuration
• ✔️ No need to add plugin assets globally (you can add it to specific pages)

1. Import plugin's webpack.config.js file

// webpack.config.js
const [ bitbagWishlistShop, bitbagWishlistAdmin ] = require('./vendor/bitbag/wishlist-plugin/webpack.config.js')
...

module.exports = [..., bitbagWishlistShop, bitbagWishlistAdmin];

2. Add new packages in ./config/packages/assets.yaml

# config/packages/assets.yaml

framework:
    assets:
        packages:
            # ...
            shop:
                json_manifest_path: '%kernel.project_dir%/public/build/shop/manifest.json'
            wishlist_shop:
                json_manifest_path: '%kernel.project_dir%/public/build/bitbag/wishlist/shop/manifest.json'
            wishlist_admin:
                json_manifest_path: '%kernel.project_dir%/public/build/bitbag/wishlist/admin/manifest.json'

3. Add new build paths in ./config/packages/webpack_encore.yml

# config/packages/webpack_encore.yml

webpack_encore:
    builds:
        # ...
        wishlist_shop: '%kernel.project_dir%/public/build/bitbag/wishlist/shop'
        wishlist_admin: '%kernel.project_dir%/public/build/bitbag/wishlist/admin'

4. Add encore functions to your templates

{# @SyliusShopBundle/_scripts.html.twig #}
{{ encore_entry_script_tags('bitbag-wishlist-shop', null, 'wishlist_shop') }}

{# @SyliusShopBundle/_styles.html.twig #}
{{ encore_entry_link_tags('bitbag-wishlist-shop', null, 'wishlist_shop') }}

{# @SyliusAdminBundle/_scripts.html.twig #}
{{ encore_entry_script_tags('bitbag-wishlist-admin', null, 'wishlist_admin') }}

{# @SyliusAdminBundle/_styles.html.twig #}
{{ encore_entry_link_tags('bitbag-wishlist-admin', null, 'wishlist_admin') }}

5. Run yarn encore dev or yarn encore production