Symfony 4 - Webpack Encore 的一些困难

Question

I am having a problem using Encore webpack in my Symfony 4 project.

I currently have all my files css / js / scss / images in the public folder. And in this one I have a sideBar folder that contains folders that contain files themselves:

And it can happen that in some of my files like the "main.css", at a time, I use other files thanks to the function url ():

example:

.sidebar-bg.bg1 .sidebar-wrapper {
  background-image: url(../img/bg1.jpg); }

And since this is the first time I really use WebpackEncore, I have difficulties to know what strategy to adopt to be able to gather all this.

Do I have to create an app.js file in which I will import all the files from my sideBar folder one by one?

Answer 1

You have two possibilities, first one you can import as your said all files in one file "app.js" for example. This file is your "entry" in your Webpack Encore config file ( https://symfony.com/doc/current/frontend/encore/installation.html )

The second option is that you can add multiple entries in your Webpack Encore config file (best practice is one by page) and in each one import some of your files when needed:

.addEntry('app', './assets/js/app.js')
//.addEntry('page1', './assets/js/page1.js')
//.addEntry('page2', './assets/js/page2.js')