Categories
Webpack

Symfony Encore

Install encore via composer, which will create a package.json file with the node dependencies for webpack. Then run npm install which will acquire those packages;

composer require encore
npm i

Refreshing the site now will give an error about missing manifest files. We need to run the encore dev command to generate these and compile our assets. Commands have been added to package.json. Run npm run dev to build our assets.

    "scripts": {
        "dev-server": "encore dev-server",
        "dev": "encore dev",
        "watch": "encore dev --watch",
        "build": "encore production --progress"
    }

Including generated assets

In the html base twig template, use these in the stylesheets and javascripts block

{% block stylesheets %}
    {{ encore_entry_link_tags('app') }}
{% endblock %}


{% block javascripts %}
    {{ encore_entry_script_tags('app') }}
{% endblock %}

This will take the generated entry points in public/build/entrypoints.json and include the files in the template.

Importing third party libraries

Install a third party library

npm i jquery --dev

Because this is a third party library, we don’t need path directories. The main export of a library exists in the library’s “package.json“` in its node_modules directory in the ‘main’ key.

Variables do not permeate across files and are not global. Using the following in our javascript file only makes dollar available within that file.

import $ from 'jquery';

Mainifest.json & Twig Images

Mainifest.json is created when webpack runs. It contains a map of key values of all source and build files. When referencing images in twig templates, use the key in manifest.json to correctly use the image. This will include the build path.

Use

    .copyFiles({
        from: './assets/images',
        to: 'images/[path][name].[hash:8].[ext]'
    });

in webpack.config.js to populate manifest.json with the copied image files.

Fixing jQuery Plugins

use .autoProvidejQuery() which can fix jQuery plugnis which don’t play nice with imports.

Configuring for Production

Encore is set up to do this automatically with hashing of filenames when in production;

 .enableVersioning(Encore.isProduction())

Make sure the webserver is set up to serve no-expire headers for a long time in the future for js, and css, and image files.

Demo Files