Handling Images with the CopyPlugin

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!

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!

Hey Awd Studio

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

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 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

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.