Explain how to handle static images with Webpack Encore

[javiereguiluz]

As published in this tutorial: http://aerendir.me/2018/04/06/managin-static-images-webpack-encore/

Symfony Best Practices say:

Web assets are things like CSS, JavaScript and image files that make the frontend of your site look and work great. Read the Webpack Encore documentation.

But the docs for Webpack Encore:

It doesn't mention at all the handling of images: only the handling of CSS and JavaScript.

@weaverryan do you think we should mention this in the docs? Thanks!

[Aerendir]

@javiereguiluz , thank you for linking my article!

I'll link the two main issues for reference and cross linking:

• Missing assets in Twig autocompletation when using manifest.json and Webpack-Encore versioning Haehnchen/idea-php-symfony2-plugin#1020
• How are static assets handled? webpack-encore#24

[weaverryan]

We for sure need this! It must be the most common question. We may have a copy() method soon in Encore, but we shouldn’t wait for it.

@Aerendir would you by chance be willing to submit a PR based on your tutorial?

[Aerendir]

@weaverryan , what do you think about making it in line with the already existent methods addEntry and addStyleEntry?

I'm thinking at something like addImageEntry and an addImagesEntry method that accepts both a single image or a path to a folder with more than one images...

I'm not so versed in JavaScript, so I don't know if I can write the code... But I can try... give me some time... For sure I'm not able to remove the "evil" folder "assets" from the path! 😂

[Aerendir]

Ok, I've tried, but unfortunately I'm not able to implement it: I'm not so experienced with Javascript and Webpack to implement it :(

I've tried this:

addImagesEntry(directory, useSubdirectories = true, regExp = /\.(png|jpg|jpeg|gif|ico|svg|webp)$/) {
    const imagesContext = webpackConfig.getContext(directory, useSubdirectories, regExp);
    imagesContext.keys().forEach(imagesContext);

    return this;
}

but it doesn't work:

node_modules/@symfony/webpack-encore/index.js:312
addPlugin(plugin, priority = 0) {
^^^^^^^^^

SyntaxError: Unexpected identifier
at new Script (vm.js:51:7)
at createScript (vm.js:136:10)
at Object.runInThisContext (vm.js:197:10)
at Module._compile (internal/modules/cjs/loader.js:618:28)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:665:10)
at Module.load (internal/modules/cjs/loader.js:566:32)
at tryModuleLoad (internal/modules/cjs/loader.js:506:12)
at Function.Module._load (internal/modules/cjs/loader.js:498:3)
at Module.require (internal/modules/cjs/loader.js:598:17)
at require (internal/modules/cjs/helpers.js:11:18)
error An unexpected error occurred: "Command failed.
Exit code: 1
Command: sh
Arguments: -c encore dev

[lebadapetru]

hi every1, any news on this issue? i could really use a way to compress images using this and not installing one more package (like https://www.npmjs.com/package/image-webpack-loader) for this purpose.Thanks

[weaverryan]

No news. But, there are few things going on that I want to clarify

1. If you reference images from a CSS file, that are totally handled: they are copied into the build directory, and the contents of your CSS file are updated to point at them.

2. But, if you just want a random <img tag somewhere, well, that image is not copied into your public build directory. There is a plugin for that, and we're trying to add a copy() method to make it easier, but have been blocked for a long time by an external library. See Add a copyFiles() method to the public API (using CopyWebpackPlugin) webpack-encore#221

3. In addition to just copying images, some people also want to have some option to compress/optimize images. I think that's a great idea... someone just needs to create a PR for that if they want it :).

Cheers!

[javiereguiluz]

I'm closing this as fixed because we now have:

• Built-in Encore behavior for images referenced in CSS, as Ryan said.
• The frontend/encore/copy-files.rst article to copy static files such as images.
• The frontend/encore/url-loader.rst article to embed small images in CSS files.