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~

[alexander-akait]

What is publicPath? Can you provide webpack.config.js file?

[Chinmay2709]

This is my webpack.config.js and my " publicPath=' /public/ ' "

`
const path = require('path');
const { VueLoaderPlugin, default: loader } = require('vue-loader');
const webpack = require('webpack');

module.exports = {

entry: '/src/main.js',
devServer: {
    port :8080
},
output: {

    path: path.join(__dirname,'/dist'),
    filename: 'bundle.js',
    publicPath: "/public/",
    assetModuleFilename: 'images/[hash][ext][query]'

},
module: {
    
    rules: [
        {
            test: /\.vue$/,
            exclude: /node_modules/,
            loader: 'vue-loader'
        },

        {
            test: /\.css$/,
            use: [
                
                'style-loader',
                'css-loader',
                'postcss-loader',

            ],
        },

        {
            test: /\.(png)$/,
            type: 'asset/resource'
        }
    ]

},

plugins: [

    new VueLoaderPlugin(),
    new webpack.ProvidePlugin({
        
        $: 'jquery',
        jQuery: 'jquery'

    })

],

};
`

[alexander-akait]

You can just remove publicPath and so it will be auto and always relative

[Chinmay2709]

Thanks Alexander. Sorry to revert back to you so late. It worked fine for me. 🫰🏻