Handling Images with the CopyPlugin

I didn't understand the difference between using this plugin and copyFiles () Encore native function?

Hey ahmedbhs!

Sorry for my SUPER slow reply to this great question! This tutorial was created before that copyFiles() feature was added. And, though they both "copy things", the implementation is completely different. The issue with this plugin - which we could never get them to improve, and hence, we we added an entirely different implementation in copyFiles(), is that the copied files wouldn't show up in your manifest.json file. This mean that you couldn't take advantage of versioned filenames (like you do with CSS and JS).

So, that's the difference: they do the same thing, work completely different under the hood, and copyFiles() supports versioning :).

Cheers!

I'm stuck with css file background image urls..

a) If I set: background-image: url('/asssets/images/bg/03.jpg'); the yarn encore dev command run successful, then I see the copied image in the public/build directory. Thats ok.
But when the browser try to access '/asssets/images/bg/03.jpg' file drop 404 (of course) because css file url need to change and point to the public dir.

b) If is set background-image: url('images/bg/03.jpg'); (in the public dir) the yarn encore dev command failed:
"ERROR Failed to compile with 1 errors. This relative module was not found"

How can I define background image url in assets/css/app.css ?

Okay, I solved it:
If I set background-image url to: url('/build/images/bg/03.jpg'); in the app.css the css file buliding will be success.

Awesome! I'm glad that you could fix your problem and share the solution :)

Cheers!

Hi! Tnx for this tuto, it is really helpful.
Maybe you know some way to use it with HMR?
(I mean `encore dev-server --hot`)

Hey Awd Studio

I'm not sure I'm following you. Do you want to know how to activate Encore's dev server?

So, copying images or files will never work for what I'm seeing? Almost a year this feature is awaiting in the copy plugin... I was thinking webpack encore (or Laravel mix) can replace Gulp, but I think I will need to use webpack AND Gulp or just continue to use Gulp just to have a correct manifest? :/

I'm a little bit disappointed. I read all this tutorial since this step for nothing :( I know it's not your fault.

Hey Xavier de Moor!

Yea, this whole copying thing WITH versioning (copying works fine without versioning) has been a pain for a long time :/. It's something I hope to fix - we were waiting on a change in the copy plugin... then it still wasn't enough - we may just add our own copy functionality.

But, I did recently learn about a trick - I haven't tried it yet, but check this out: https://twitter.com/SBISDan...

This will copy all of the assets and put them into the manifest. It's an awesome little workaround - we'll document it soon.

Cheers!

I think adding your own copy with versioning is a very good idea. I will stay in touch. Thank you for your answer!

Hey, thank you for this cool tutorial! We implemented it but we have one problem, in production our manifest.json is not taking into account images copied with CopyPlugin, do you know a way to fix this or to work around of this problem?

Hey Quentin!

Yes, unfortunately, you're 100% correct. In fact, this is the reason that we haven't added the copy() method to Encore yet. We needed to wait for the webpack-manifest-plugin to tag their version 2.0, which contains a "hook" for allowing custom data to be added. We're *still* waiting for that release :/. Here is a related issue: https://github.com/webpack-...

So for now, it's either not possible, or you will need to follow issues like the one linked to get it working. For this reason, I do *not* use a `hash` when I use the copy plugin. Yes, this means that any copied assets aren't versioned - that's the big bummer currently.

Hopefully the webpack-manifest-plugin will get its 2.0 tag soon, and we can try to fit all the pieces together!

Cheers!

Thanks for wasting ~2 hours of my life for wasted efforts to get the stuff working for my project's images.

Could you please put a big banner at the top of this tuto with the text "NOT FOR IMAGES YET" for the time
being (read: forever, since the pull request is still open for months without any change) so others will look for a different solution than copy-webpack-plugin?

Why are you publishing this tutorial anyway, when copy-webpack-plugin doesn't fullfill its intended goal?

Hey RoestVrijStaal!

Oh man, I'm sorry that you wasted your time - that's definitely not our intention :/. This one is tough, we (from Webpack Encore) have been waiting for months for the upstream library to add some features we need - and we thought it would happen quickly. Now it appears that it won't, and we need to find a workaround.

Why did we post this tutorial then? Because, people *do* need to be able to move their images into their build directory. And if you use the plugin like we do in this tutorial - *without* a [hash] in the filename - then it works perfectly fine :). You only have problems if you try to use [hash], because then your backend code doesn't know what dynamic filename to use. That's the problem we hope to solve some time.

Anyways, I'm sorry you were frustrated - that is the opposite of our intention! I hope you'll enjoy other parts of Webpack Encore!

Cheers!

Hey weaverryan, thank you for you response. I subscribed to this issue and I switched to a previous version of my code waiting webpack-manifest-plugin 2.0.

Regards

Thanks for this free tutorial guys. One little question, can we use webpack encore to optimise images? I was wondering this because with Assetic it's possible right?

Hey Cesar!

Glad you're liking the tutorial :). The answer your question is no... at least currently: there's no feature in Encore today to optimize images. However, you can add any Webpack plugins or loaders to Encore that you want. For example, check out https://github.com/tcoopman/image-webpack-loader - I've never used it before, just googled for it quickly. You could add this to Encore with those code:

Encore
    // ...
    .addLoader({
        test: /\.(gif|png|jpe?g|svg)$/i,
        use: [
            'file-loader',
            {
                loader: 'image-webpack-loader',
                options: {
                    bypassOnDebug: true,
                },
            }
        ]
}

So, if that's something you're interested in, try it out!

Cheers!

Hello. Could you help me to find the error and tell me why I can't optimise the images
Code:

// webpack.config.js

var Encore = require('@symfony/webpack-encore');

const CopyWebpackPlugin = require('copy-webpack-plugin');

const ImageOptimizePlugin = require('image-webpack-loader');

Encore

// directory where compiled assets will be stored

    .setOutputPath('public/build/')

    .setPublicPath('/build')

    .createSharedEntry('style', './assets/js/style.js')

    .addPlugin(new CopyWebpackPlugin([

        // copies to {output}/static

        {from: './assets/static', to: 'static'}

    ]))

    .addLoader({

        test: /\.(gif|png|jpe?g|svg)$/i,

        use: [

            'file-loader',

            {

                loader: 'image-webpack-loader',

                options: {

                   bypassOnDebug: true,

                    mozjpeg: {

                        progressive: true,

                        quality: 65

                    },

                    optipng: {

                        enabled: true,

                    },

                    pngquant: {

                        quality: '65-90',

                        speed: 4

                    },

                    gifsicle: {

                        interlaced: true,

                    },

                    webp: {

                        quality: 75

                    }

                },

            }

        ]

    })

    .enableBuildNotifications()

    .autoProvidejQuery()

    .enableSassLoader()

    .cleanupOutputBeforeBuild()

    .enableVersioning()

    .disableSingleRuntimeChunk()

;

module.exports = Encore.getWebpackConfig();

After web pack run:

Running webpack ...

 DONE  Compiled successfully in 694ms                                                                                                                                        14:17:53

 I  3 files written to public/build

Entrypoint _tmp_shared = style.dd43f399.css style.922f1cea.js _tmp_shared.3b14f662.js

After I check the file size by ls -la public/build/static it have no changes.

Hi @Станислав Гидлевский!

I think I have an idea :). The image-webpack-loader will optimize any images that you "require" from your code - like this https://symfony.com/doc/current/frontend/encore/copy-files.html#referencing-images-from-inside-a-webpacked-javascript-file

But, the CopyWebpackPlugin simply copies the files - without having Webpack really process them. But, good news! The latest version of Encore (which it appears you're using), has a new copyFiles() function! If you use this, I'm pretty sure the image optimizer will work. 🎆

Cheers!

Thanks for the fast reply Ryan. I try to add these code ` .copyFiles({

        from: './assets/static',
        to: 'images/[path][name].[ext]',
    }
)` to my config file, but it seems ImageWebpackLoader doesn't trigger it. Just copy the files to the build folder as CopyWebpackPlugin. I added this code `const imagesCopy = require.context('../static', true, /\.(png|jpg|jpeg|gif|ico|svg|webp)$/);

imagesCopy.keys().forEach(imagesCopy);` to my js file and it workes, but I suppose this is not the best way.

Hey @Станислав Гидлевский!

Hmm, interesting! But, nice work around. Actually, this is basically what the copyFiles() method does internally... but it's possible that it's written in a way that makes this not possible. We'll need to check into this! But, your workaround is just fine - I don't see any issues with it.

Cheers!

Thanks. I've made some more progress. This code works fine without any additional scripts:

// webpack.config.js

var Encore = require('@symfony/webpack-encore');

const CopyWebpackPlugin = require('copy-webpack-plugin');
const ImageOptimizePlugin = require('image-webpack-loader').default;
const ImageminPlugin = require('imagemin-webpack-plugin').default;
const imageminMozjpeg = require('imagemin-mozjpeg');
const imageminOptipng = require('imagemin-optipng');
const imageminPngquant = require('imagemin-pngquant');

Encore

// directory where compiled assets will be stored

    .setOutputPath('public/build/')

    .setPublicPath('/build')

    .createSharedEntry('style', './assets/js/style.js')

    .addPlugin(new CopyWebpackPlugin([{

            from: './assets/static',

            to: 'static'

        }])

    )

    .addPlugin(new ImageminPlugin({

        test: /\.(jpe?g|png|gif|svg)$/i,

        minFileSize: 10000,

        maxConcurrency: Infinity,

        //disable: process.env.NODE_ENV !== 'production',

        pngquant: {

            quality: 55,

            speed: 3,

            verbose: true,

            strip: true,

        },

        plugins: [

            imageminMozjpeg({

                quality: 65,

                progressive: true

            }),

        ]

    }))

    .enableSourceMaps(!Encore.isProduction())

    .enableBuildNotifications()

    .autoProvidejQuery()

    .enableSassLoader()

    .cleanupOutputBeforeBuild()

    .enableVersioning()

    .disableSingleRuntimeChunk()

;

module.exports = Encore.getWebpackConfig();

So I use imagemin-webpack-plugin as Plugin instead of image-webpack-loader as Loader.

Thanks for your answer Ryan.