WebpackEncoreBundle: Symfony integration with Webpack Encore!
WARNING This bundle IS NOT MAINTAINED anymore, use
symfony/webpack-encore-bundle
instead!!!, (*1)
This bundle allows you to use the splitEntryChunks() feature
from Webpack Encore
by reading an entrypoins.json file and helping you render all of
the dynamic script and link tags needed., (*2)
Install the bundle with:, (*3)
composer require knpuniversity/webpack-encore-bundle
Configuration
If you're using Symfony Flex, you're done! The recipe will
pre-configure everything you need in the config/packages/webpack_encore.yaml
file:, (*4)
# config/packages/webpack_encore.yaml
webpack_encore:
# The path where Encore is building the assets - i.e. Encore.setOutputPath()
output_path: '%kernel.public_dir%/build'
# The public prefix to your assets that you normally use with the asset() function (e.g. build/) -
# should match the "setManifestKeyPrefix()" value in webpack.config.js, if set.
asset_path_prefix: 'build/'
Usage
First, enable the "Split Chunks" functionality in Webpack Encore:, (*5)
// webpack.config.js
// ...
.setOutputPath('public/build/')
.setPublicPath('/build')
.setManifestKeyPrefix('build/')
.addEntry('entry1', './assets/some_file.js')
+ .splitEntryChunks()
// ...
When you enable splitEntryChunks(), instead of just needing 1 script tag
for entry1.js and 1 link tag for entry1.css, you may now need multiple
script and link tags. This is because Webpack "splits" your files
into smaller pieces for greater optimization., (*6)
To help with this, Encore writes a entrypoints.json file that contains
all of the files needed for each "entry"., (*7)
For example, to render all of the script and link tags for a specific
"entry" (e.g. entry1), you can:, (*8)
{# any template or base layout where you need to include a JavaScript entry #}
{% block javascripts %}
{{ parent() }}
{{ encore_entry_script_tags('entry1') }}
{% endblock %}
{% block stylesheets %}
{{ parent() }}
{{ encore_entry_link_tags('entry1') }}
{% endblock %}
Assuming that entry1 required two files to be included - vendor~entry1~entry2.js
and entry1.js, then encore_entry_script_tags() is equivalent to:, (*9)
<script src="{{ asset('build/vendor~entry1~entry2.js') }}"></script>
<script src="{{ asset('build/entry1.js') }}"></script>
The build/ public prefix to your assets is set in the config file., (*10)
If you want more control, you can use the encore_entry_js_files() and
encore_entry_css_files() methods to get the list of files needed, then
loop and create the script and link tags manually., (*11)
Wallogit.com
