No description, website, or topics provided.
Switch branches/tags
Nothing to show
Clone or download
weaverryan minor #15 Don't self-close link tag (Seb33300)
This PR was squashed before being merged into the master branch (closes #15).

Discussion
----------

Don't self-close link tag

Self-closing is only required by XHTML, invalid in HTML4 and optional in HTML5.
Nowadays, most of application are HTML5 so we should avoid it since it will save 2 chars from the output.

Commits
-------

ad24e1c Don't self-close link tag
Latest commit a3382c8 Nov 16, 2018

README.md

WebpackEncoreBundle: Symfony integration with Webpack Encore!

This bundle allows you to use the splitEntryChunks() feature from Webpack Encore by reading an entrypoints.json file and helping you render all of the dynamic script and link tags needed.

Install the bundle with:

composer require symfony/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:

# 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'

Usage

First, enable the "Split Chunks" functionality in Webpack Encore:

// 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.

To help with this, Encore writes a entrypoints.json file that contains all of the files needed for each "entry".

For example, to render all of the script and link tags for a specific "entry" (e.g. entry1), you can:

{# 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 - build/vendor~entry1~entry2.js and build/entry1.js, then encore_entry_script_tags() is equivalent to:

<script src="{{ asset('build/vendor~entry1~entry2.js') }}"></script>
<script src="{{ asset('build/entry1.js') }}"></script>

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.