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).