01.1-webpack-config.md

BitBag SyliusCmsPlugin

• ⬅️ 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 [ bitbagCmsShop, bitbagCmsAdmin ] = require('./vendor/bitbag/cms-plugin/webpack.config.js')
...

module.exports = [..., bitbagCmsShop, bitbagCmsAdmin];

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

# config/packages/assets.yaml

framework:
    assets:
        packages:
            # ...
            cms_shop:
                json_manifest_path: '%kernel.project_dir%/public/build/bitbag/cms/shop/manifest.json'
            cms_admin:
                json_manifest_path: '%kernel.project_dir%/public/build/bitbag/cms/admin/manifest.json'

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

# config/packages/webpack_encore.yml

webpack_encore:
    builds:
        # ...
        cms_shop: '%kernel.project_dir%/public/build/bitbag/cms/shop'
        cms_admin: '%kernel.project_dir%/public/build/bitbag/cms/admin'

4. Add encore functions to your templates

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

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

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

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

5. Run yarn encore dev or yarn encore production