Skip to content
Symfony integration with Webpack Encore!
PHP
Branch: master
Clone or download

Latest commit

weaverryan bug #74 Reset default EntrypointLookup on exception to fix #21 and #73
…(tbmatuka)

This PR was squashed before being merged into the master branch (closes #74).

Discussion
----------

Reset default EntrypointLookup on exception to fix #21 and #73

Since @ckrack seems to be unavailable to continue working on #21, I figured this would be faster :)

I don't like having `_default` hardcoded in the listener, but I see no other options right now.
I thought about adding a `resetAll()` method to EntrypointLookupCollection, but there were a couple of issues with that:
1. It would either be a BC break if I added it to the interface, or an important method that isn't interfaced and I don't really like either of those.
2. I couldn't even implement it because the container that we get in the collection only has `has()` and `get()` methods, so I couldn't go through it. This would also have to be replaced (and break BC) to implement `resetAll()`.

Fixes symfony/demo#910

Commits
-------

da36629 Reset default EntrypointLookup on exception to fix #21 and #73
Latest commit 5c0f659 Jan 31, 2020

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src bug #74 Reset default EntrypointLookup on exception to fix #21 and #73 Jan 31, 2020
tests bug #74 Reset default EntrypointLookup on exception to fix #21 and #73 Jan 31, 2020
.gitignore Allow Symfony 5 Oct 22, 2019
.php_cs.dist Allow Symfony 5 Oct 22, 2019
.travis.yml Allow Symfony 5 Oct 22, 2019
LICENSE Adding the license Sep 9, 2018
README.md Minor: Use "an" article instead of "a" Oct 26, 2019
composer.json bug #84 Web link 4.4 compat (weaverryan) Nov 26, 2019
phpunit.xml.dist Allow Symfony 5 Oct 22, 2019

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.project_dir%/public/build'
    # If multiple builds are defined (as shown below), you can disable the default build:
    # output_path: false
    
    # if using Encore.enableIntegrityHashes() and need the crossorigin attribute (default: false, or use 'anonymous' or 'use-credentials')
    # crossorigin: 'anonymous'

    # preload all rendered script and link tags automatically via the http2 Link header
    # preload: true

    # Throw an exception if the entrypoints.json file is missing or an entry is missing from the data
    # strict_mode: false
    
    # if you have multiple builds:
    # builds:
        # pass "frontend" as the 3rg arg to the Twig functions
        # {{ encore_entry_script_tags('entry1', null, 'frontend') }}

        # frontend: '%kernel.project_dir%/public/frontend/build'

    # Cache the entrypoints.json (rebuild Symfony's cache when entrypoints.json changes)
    # Available in version 1.2
    # Put in config/packages/prod/webpack_encore.yaml
    # cache: true

Usage

The "Split Chunks" functionality in Webpack Encore is enabled by default with the recipe if you install this bundle using Symfony Flex. Otherwise, enable it manually:

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

Rendering Multiple Times in a Request (e.g. to Generate a PDF)

When you render your script or link tags, the bundle is smart enough not to repeat the same JavaScript or CSS file within the same request. This prevents you from having duplicate <link> or <script> tags if you render multiple entries that both rely on the same file.

In some cases, however, you may want to render the script & link tags for the same entry multiple times in a request. For example, if you render multiple Twig templates to create multiple PDF files during a single request.

In that case, before each render, you'll need to "reset" the internal cache so that the bundle re-renders CSS or JS files that it previously rendered. For example, in a controller:

// src/Controller/SomeController.php

use Symfony\WebpackEncoreBundle\Asset\EntrypointLookupInterface;

class SomeController
{
    public function index(EntrypointLookupInterface $entrypointLookup)
    {
        $entrypointLookup->reset();
        // render a template

        $entrypointLookup->reset();
        // render another template

        // ...
    }
}

If you have multiple builds, you can also autowire Symfony\WebpackEncoreBundle\Asset\EntrypointLookupCollectionInterface and use it to get the EntrypointLookupInterface object for any build.

You can’t perform that action at this time.