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

  System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 AMD Ryzen 9 5900HX with Radeon Graphics
    Memory: 4.24 GB / 15.41 GB
  Binaries:
    Node: 16.17.0 - C:Program Filesnodejsnode.EXE
    npm: 8.15.0 - C:Program Filesnodejsnpm.CMD
  Browsers:
    Edge: Chromium (123.0.2420.97)
    Internet Explorer: 11.0.22621.3527
  Packages:
    css-loader: ^7.1.1 => 7.1.1
    file-loader: ^6.2.0 => 6.2.0
    postcss-loader: ^8.1.1 => 8.1.1
    style-loader: ^4.0.0 => 4.0.0
    url-loader: ^4.1.1 => 4.1.1
    vue-loader: ^17.4.2 => 17.4.2
    vue-style-loader: ^4.1.3 => 4.1.3
    webpack: ^5.91.0 => 5.91.0
    webpack-cli: ^5.1.4 => 5.1.4
    webpack-dev-server: ^5.0.4 => 5.0.4

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:
            
            - Backend (Flask env):
                 - app.py
                 - main.wsgi                
            
            - Frontend (My vue APP):
                - src
                - webpack.config.js
                 

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 :

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

module.exports = {
    entry: '/src/main.js',
    devServer: {
        host: '127.0.0.1',
        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'
        })
    ],
};

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. When I change or add port number to URL, image seems to be loading.

Now I would’ve have added images to the question, but since stack-overflow does not allows me to do such, because apparently I must have some 10 valid reputation before I can add images to the question, I cannot do that.

I tried to change host name to get rid of the problem, but the webpack asset/module still looks for the assets on the same folder. I just want to know if I can tell my webapack to somehow look for the asset on the port (8080).