Using Symfony Webpack-Encore-Bundle with Pimcore

Based on the "Webpack Encore: Frontend like a Pro!" - SymfonyCast I will implement the Webpack-Encore-Bundle in a Pimcore project.

Using Symfony Webpack-Encore-Bundle with Pimcore

I am using Pimcore v6.6.4, PHP 7.4 on a Mac.

Open a terminal and go to the project root directory and perform the following steps:

  1. Install yarn brew install yarn
  2. Install Symfony Flex composer require symfony/flex
  3. Install Symfony Encore composer require encore
  4. run yarn or yarn install

Now we have a new directory 'assets' in the project root directory. Within these directories, there are two subdirectories one for JS-files and another one where CSS-files placed to be. To execute the very first build we need to go over in our terminal and run ./node_modules/.bin/encore dev . This will create a build directory in our web-root.

If we want to use the Twig template functions to render the JS and CSS files, we need to set up some more things. Add the new \Symfony\WebpackEncoreBundle\WebpackEncoreBundle() to AppKernel.php:


use Pimcore\HttpKernel\BundleCollection\BundleCollection;
use Pimcore\Kernel;

class AppKernel extends Kernel
     * Adds bundles to register to the bundle collection. The collection is able
     * to handle priorities and environment specific bundles.
     * @param BundleCollection $collection
    public function registerBundlesToCollection(BundleCollection $collection)
        if (class_exists('\\AppBundle\\AppBundle')) {
            $collection->addBundle(new \AppBundle\AppBundle);
        if (class_exists('\Symfony\WebpackEncoreBundle\WebpackEncoreBundle')) {
            $collection->addBundle(new \Symfony\WebpackEncoreBundle\WebpackEncoreBundle());

        if (class_exists('\Pimcore\Bundle\LegacyBundle\PimcoreLegacyBundle')) {
            $collection->addBundle(new \Pimcore\Bundle\LegacyBundle\PimcoreLegacyBundle);

In config.yml we need to add the following lines:

        json_manifest_path: '%kernel.project_dir%/web/build/manifest.json'
    output_path: '%kernel.project_dir%/web/build'

From now we can use the Twig Helper functions to add JS- and CSS-files to our templates like so:

<!doctype html>
<html lang="en">

    <title>{% block title %}Awesome Default Title{% endblock %}</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

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


{% block body %}{% endblock %}

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

There are several scripts the we can use to build our files. Have a look into package.json file.

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

If we want to rebuild our files every time we have changed some code, so simply use yarn watch . This will run the script in the background.

For more information about this bundle I highly recommend the "Webpack Encore: Frontend like a Pro!" - SymfonyCast.