Preserve subdirectories for assets in webpack output

[flow38]

Hello,

Currently encore do not seem to handle subdirectories path for generated assets:

My project structure is:
/assets
/assets/images/
/assets/images/logo

My template use this kind of code
img src="{{ asset('build/images/image1.jpg') }}"
img src="{{ asset('build/images/logos/image2.jpg') }}"

image2.jpg loading will fail cause manifest will look like
"build/images/image1.jpg": "/build/images/image1.6f30c87b.jpg",
"build/images/image2.jpg": "/build/images/image2.6f30c87b.jpg",

I could use in my template 'build/images/image2.jpg' path bu it's totally conter intuitive and error prone.

I did not test on other kind of assets, but subdirectories path should alway take into account by encore.

I found similar issue here but don't know how to apply it to encore and as explain, solution should be apply to all kind of assets.

Thanks for you help

Florent

[Lyrkan]

Hi @flow38,

Indeed, subdirectories are not kept by the default naming strategy. We discussed about it in #103 to solve another issue but decided not to keep them since it could generate some ugly paths sometimes.

Usually that's not an issue because if you require your images from a file that's processed by Webpack, it'll directly give you the right path (e.g require('images/logo/image1.jpg') from a JS file)... but that's not the case for your Twig files.

The good news is: you can change that quite easily using Encore.configureFilenames(), for instance:

Encore.configureFilenames({
    images: 'images/[path][name].[hash:8].[ext]',
});

[Lyrkan]

Closing this issue, feel free to reopen it if you need more explanations @flow38.

[anstapol]

Hi @Lyrkan, love your answer, is there a way to manipulate that path?

Because it's generating the whole path for the image and putting it in the images folder: images/resources/assets/modules/{moduleName}/images/[name].[ext]

It would be great if somehow I could achieve the next path:
images/{pathFromModule}/[name].[ext]

[Lyrkan]

@antonstsk You'd have to set the context option of the file-loader.

There is no helper method in Encore to configure that loader but you can use configureUrlLoader() to get the same result.

Note that this will be applied to all image files, so if you import some from somewhere else it could lead to strange/long paths too.

[anstapol]

@Lyrkan understand that. The thing is that I have solid structure where the images are always in same places.
Will try the configureUrlLoader().

Thank you for your time!