I've been trying to configure Encore for a new project. The CSS and JS work perectly but I want to go a bit further with the images. So far I'm only creating a copy of my images in my build respecting the same architecture :
//file: webpack.config.jslet Encore = require('@symfony/webpack-encore');Encore// the project directory where compiled assets will be stored .setOutputPath('public/build/') // the public path used by the web server to access the previous directory .setPublicPath('/build') .enableSourceMaps(!Encore.isProduction()) // uncomment to create hashed filenames (e.g. app.abc123.css) .enableVersioning(Encore.isProduction()) // uncomment to define the assets of the project .addEntry('js/app', './assets/js/app.js') .addEntry('js/admin', './assets/js/admin.js') .addStyleEntry('css/app', './assets/css/app.scss') .addStyleEntry('css/bootstrap-datepicker', './node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker.css') //assures compatibility in case of same file name .configureFilenames({ images: '[path][name].[hash:8].[ext]', }) // uncomment if you use Sass/SCSS files .enableSassLoader(function (options) { // https://github.com/sass/node-sass#options options.includePaths = ['assets/compass_src']; }) // uncomment for legacy applications that require $/jQuery as a global variable .autoProvidejQuery() // show OS notifications when builds finish/fail .enableBuildNotifications() .cleanupOutputBeforeBuild();module.exports = Encore.getWebpackConfig();And I'm managing my images like that :
//file: app.jsconst imagesContext = require.context('../images', true, /\.(png|jpg|jpeg|gif|ico|svg|webp)$/);imagesContext.keys().forEach(imagesContext);I tried using glob to minify (lossless compression) my images but haven't been successful.
How can I minify my images ?