Issue with asset/modules, while loading the image through css, with frontend and backend server being different.

[Chinmay2709]

Before I explain the issue that I have in my case, here is my general info:

Now, here is my project description:

• I am developing a Vue application.
• I am using tailwind-css in my application.
• my back-end is on python flask.
• I am using xampp apache to serve my application on : ( URL: http://127.0.0.1:80/)
• And my Front-end web-pack server runs on: (URL: http://127.0.0.1:8080/bundle.js)
• Therefore my Project structure is something like this:

Now coming back to problem.
So far everything was working fine, since I'm using web-pack V-5, I was aware that the url-loader and file-loader are depreciated, and instead asset/modules are introduced. Therefore, that's what I used, here is my webpack.config.js :

Even after that when I run my project I, couldn't load my Image to the project:

Now, here is what I found, the problem was never with web-pack or with my path inside my main.css file which has property(background-image) with url for the image. I found that the problem is with the dynamic URL with hash for image that is loaded by the web-pack, since I am using a different PORT ( 8080 ) for my bundle.js, the web-pack loads the file with URL without the port number, which creates a problem. Here, is how when I change or add port number to URL, image seems to be loading.

Now here is my question:

Is there a way I can give correct port to the web-pack so that it knows the correct URL to reach my asset ? or if not then what should be my approach, given that my back-end would remain on python, since I have specific use for the language.

Thanks~