Recently, I delved into the world of webpack. However, I encountered a problem when trying to load an SVG file referenced in one of my CSS files. Despite trying various loaders such as this, that, and the other, I keep receiving a 404 error. Can anyone provide some guidance or insight on why this might be happening?
EDIT
entry: [
'./src\\main\\resources\\static\\webpack-js\\header.js'
],
output: {
path: path.join(__dirname, 'src/main/resources/static/dist'),
publicPath: '/src/main/resources/static/dist/',
filename: 'bundle.js',
libraryTarget: 'var',
library: 'EntryPoint',
},
module: {
loaders: [
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.(jpe?g|png|gif|svg)$/,
loader: 'url-loader'
},
{
test: /\.js$/,
loader: ['buble-loader'],
exclude: '/node_modules/'
}
],
}
In my webpack.config.js module, I am using a CSS file that is required in the header.js (entry file). Within this CSS file, there are lines like the following:
.vismaicon-menu.vismaicon-info:before {
background-image: url(/static/css/img/vismaicons/top_menu/menu_info.svg);
}
Despite confirming the correct URLs and file existence, I continue to face a 404 error when attempting to load SVG files. Interestingly, everything else in the CSS file functions smoothly without webpack interfering. Thoughts or solutions would be greatly appreciated.