Webpack-encore: Webpack doesn't build image from twig

[johanne-valery]

Hello,

I'm using this configuration below :

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

Encore
// the project directory where all compiled assets will be stored
    .setOutputPath('public/build/')

    // the public path used by the web server to access the previous directory
    .setPublicPath('/build')

    // will create web/build/app.js and web/build/app.css
    .addEntry('app', './assets/js/app.js')

    // allow sass/scss files to be processed
    .enableSassLoader()

    // allow legacy applications to use $/jQuery as a global variable
    .autoProvidejQuery()

    .enableSourceMaps(!Encore.isProduction())

    // empty the outputPath dir before each build
    .cleanupOutputBeforeBuild()

    // show OS notifications when builds finish/fail
    .enableBuildNotifications()

    // create hashed filenames (e.g. app.abc123.css)
    .enableVersioning()
;

// export the final configuration
module.exports = Encore.getWebpackConfig();

I installed Symfony 4 and webpack encore.
The problem is that, when I push an image in a template, and "make encore" or yarn run encore dev, webpack doesn't build this image in public > build > images :

Webpack works fine only for the scss files. If someone could help me.
Thanks a lot.

[Lyrkan]

Hi @lilapine,

Could you be a bit more specific about how you "push an image in a template"? Is that a Twig template you are talking about?

If that's the case that's normal Webpack doesn't pick it up. The way it works it that it takes your entry files and build a dependency graph (for instance main.js requires A.js which requires B.js and C.scss and so on). Only the files that are part of that graph are going to be processed... which isn't the case of your Twig files.

You have multiple ways to solve that:

• put your images directly into your public directory
• require these images from a file that is processed by Webpack (for instance a JS file)
• use something like Copy Webpack Plugin which will copy your images into your build folder (be aware that there currently is an issue that'll prevent them from appearing in the manifest.json file though... which is a bit annoying if you enable versioning)

[johanne-valery]

Hello Lyrkan,

thank's for your answers. I finally found the a solution. My problem was with this:

Encore
// the project directory where all compiled assets will be stored
.setOutputPath('public/build/')

// the public path used by the web server to access the previous directory
.setPublicPath('/build')

// will create web/build/app.js and web/build/app.css
.addEntry('app', './assets/js/app.js')

.addEntry('img', glob.sync('./assets/images/*'))

// allow sass/scss files to be processed
.enableSassLoader()

// allow legacy applications to use $/jQuery as a global variable
.autoProvidejQuery()

.enableSourceMaps(!Encore.isProduction())

// empty the outputPath dir before each build
.cleanupOutputBeforeBuild()

// show OS notifications when builds finish/fail
.enableBuildNotifications()

// create hashed filenames (e.g. app.abc123.css)
.enableVersioning()

;

// export the final configuration
module.exports = Encore.getWebpackConfig();`