Can i combine webpack 'copyFiles' with twig.paths configuration

Question

I'm using webpack encore and so this is my webpack.config for copying files :

# webpack.config.js
Encore
    // -- 37 lines --
    .copyFiles({
        from: './assets/images',
        pattern: /\.(png|jpg|jpeg|ico)$/,
        // to path is relative to the build directory
        to: 'images/[path][name].[hash:8].[ext]'
    })

;

All of my images files are in ./assets/images.

Now i run yarn watch

So my images are beeing copyed into public/build/images as manifest.json shows :

# public/build/manifest.json

{
  "build/app.css": "/build/app.css",
  "build/app.js": "/build/app.js",
  "build/mail.css": "/build/mail.css",
  "build/mail.js": "/build/mail.js",
  "build/runtime.js": "/build/runtime.js",
  "build/vendors~app.js": "/build/vendors~app.js",
  "build/fonts/fontawesome-webfont.ttf": "/build/fonts/fontawesome-webfont.1e59d233.ttf",
  "build/fonts/fontawesome-webfont.woff2": "/build/fonts/fontawesome-webfont.20fd1704.woff2",
  "build/fonts/fontawesome-webfont.eot": "/build/fonts/fontawesome-webfont.8b43027f.eot",
  "build/fonts/fontawesome-webfont.woff": "/build/fonts/fontawesome-webfont.f691f37e.woff",
  "build/images/favicon.ico": "/build/images/favicon.c48cee16.ico",                       <-- This one
  "build/images/fontawesome-webfont.svg": "/build/images/fontawesome-webfont.c1e38fd9.svg",
  "build/images/logo.png": "/build/images/logo.63e19ce5.png"                              <-- This one
}

Then i try to set aliases in my twig.yaml file

# config/packages/twig.yaml
twig:
   default_path: '%kernel.project_dir%/templates'
   paths:
       '%kernel.project_dir%/public/build/images/': images
       '%kernel.project_dir%/public/build/': build

And i use aliases to get my image in base.html.twig

# template/base.html.twig

I have also tried to use this syntax :

# template/base.html.twig

But it is not working.

The only syntax which work is :

# template/twig.yaml

So what am I doing wrong ? Is this even possible to use aliases while copying file containing a hash ? I could use aliasses just before i try using copyFiles.

user_6503197 · Answer

I have found the answer here :

Embedding a Webpack asset inside Twig's templated e-mail using Symfony Mailer

This is working for me.

Just don't forgot to clean cache (php bin/console c:c)

Now my code look like this :

# config/packages/twig.yaml
twig:
    paths:
      '%kernel.project_dir%/public/build/images/': images
      '%kernel.project_dir%/public/': build

# templates\Mailer\password_reset.html.twig
...

...

If you still have an error even after doing that, try to copy/path config/packages/twig.yaml into config/packages/env/twig.yaml (replace env by your env name)

Even though it is a little bit hacky, it work.

user_731138 · Answer

Short answer to your question: no, you cannot combine webpack copyFiles and twig.paths.

Namespaced Twig paths are only used by the Twig file loader, so it will only works when you will include, import, extend or embed a Twig file.

Can i combine webpack 'copyFiles' with twig.paths configuration

2 Answers