Contao Encore Bundle
, (*1)
Use the power and simplicity of symfony webpack encore in contao. This bundle let you decide on layout and page level, which encore entries should be loaded. If you want more, you can prepare your bundles define their own encore entries, so never need to manually add or remove encore entries again., (*2)
Features
- use symfony encore (symfony/webpack-encore and symfony/webpack-encore-bundle) to enhance your contao assets workflow
- conditionally load your assets only if necessary (entrypoints can be activated in the backend in layout and page setting or added from your bundle code (e.g. in a frontend module))
- prepare your bundles to add encore entries when install them and strip assets from the contao global asset arrays
Setup
Prerequisites
- Read the Encore Documentation in order to install Encore and understand the core concepts of Webpack and Symfony Encore.
Prepare your project and bundle
Setup your project for encore bundle:, (*3)
Project setup, (*4)
Bundle setup, (*5)
Run Encore
-
Run encore prepare command, (*6)
php vendor/bin/contao-console huh:encore:prepare [--skip-entries="entry1,entry2"], (*7)
-
If (yarn) dependencies have changed, run yan install, (*8)
yarn install, (*9)
-
Run encore to generate the assets, (*10)
yarn encore dev, (*11)
-
Activate encore entries in the contao backend (if not added from code), (*12)
Usage
Activate encore entries
- In the contao backend, go to page layout configuration
- Check "Activate Webpack Encore" and fill the mandatory fields
- If you have a main project bundle entry containing the main stylesheets, add it as active entry, add also all other entries you want to have activated on every page.
- For page specific features, you can activate additional entries in page setting (site structure).
- Be aware, that child pages will inherit settings from their parants
- Pay attention that you check entries as active (if you want them to be loaded)!
- If you want an already added entry to be not loaded on an specific page, select it as entry and don't check "active".
Prepare command
php vendor/bin/contao-console huh:encore:prepare
The prepare command must be executed after every change to the encore entries configuration, e.g. after a composer update or changes to that configurations in your own code., (*13)
The command collect encore entries from all bundle and creates a file called encore.bundles.js in your project root.
This file contains entries for all contao encore compatible bundles that are added by calling encoreBundles.addEntries(); in your webpack.config.js., (*14)
It also collects the dependencies from the package.json files of bundles have EncoreExtensions registered and adds them to the project dependencies., (*15)
Run encore
Run encore to generate/compile your assets., (*16)
yarn encore dev
yarn encore dev --watch
yarn encore prod
Documentation
Project setup - Prepare your contao project for use with encore and encore bundle, (*17)
Bundle setup - Add encore bundle support to your bundle, (*18)
Setup Javascript - Help about setting up your encore entries, (*19)
Developer Documentation, (*20)
Configuration Reference, (*21)
Wallogit.com
