symfony 4 webpack + encore handle image in template more info

Question

Like this question :

Using Symfony 4 with Webpack + Encore + Yarn, I want to handle images in my templates, and I am not really how to achieve this.

I put my image in my /assets/img/logo.png folder, and use this in my webpack.config.js:

.addEntry('logo', './assets/img/logo.png')

And after I run :

yarn run encore dev

Which generates /public/build/logo.js and /public/build/images/logo.aez323a.png files.

I would like to know:

What is the "logo.js" for?

And how can I keep my directory structure. For example if I have:

img/folder1/folder2/img.png

I want to keep this structure and not get everything in build/image

Thanks guys

Answer 1

I've found a good solution to handle the images or other files into the template.

Here -> https://knpuniversity.com/screencast/webpack-encore/copy-plugin

Step 1: Install the plugin

yarn add copy-webpack-plugin --dev

Step 2: Config the webpack.config.js

var Encore = require('@symfony/webpack-encore');
const CopyWebpackPlugin = require('copy-webpack-plugin');

Step 3: Tell webpack where is your folder (example here static, can be img or anything)

.addPlugin(new CopyWebpackPlugin([
        // copies to {output}/static
        { from: './assets/static', to: 'static' }
]))

Step 4: run encore

yarn run encore dev

All your folders and files into "static" (for the example) will be copy into the "Public/build" folder!!!

Voilà voilà