Menu
(problem solved!)
I am trying to use html-loader and file-loader to pack my image source which is mentioned in index.html img tag src attribute.
But it's not working because the img tag src is not refering to the correct path.
Just want to know is there anything wrong within my config?
my webpack config:
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
entry: {
main: ['./src/index.js', './src/scss/main.scss'],
},
output: {
filename: '[name].js',
chunkFilename: '[name].min.js',
path: resolve(__dirname, 'build'),
},
mode: 'development',
module: {
rules: [
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
}
],
},
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
},
{
test: /\.(jpg|png|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: '/img/',
pubicPath: '/img/'
}
}
],
}
]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: './index.html'
})
]
}./build folder after run webpack
my index.html
(I also tried to change the img src attribute to "./img/women.jpg" or "/img/women.jpg" or "img/women.jpg", but nothing work but just make webpack compiling error..)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="./src/img/women.jpg" alt="">
</body>
</html>built index.html in ./build folder
(so what is this 620b11833eb3b1be1f33.jpg?)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script defer src="main.js"></script></head>
<body>
<img src="620b11833eb3b1be1f33.jpg" alt="">
</body>
</html>
466
asked Nov 15 '25 07:11
Finally I found the solution.
I guess the error is caused by the problem which is mentioned by @Daweed in the top comment.
I am using webpack 5 but didn't notice that file-loader/url-loader/raw-loader is deprecated now.
The solution is to uninstall file-loader/url-loader/raw-loader from dev-dependency(and remember also remove all related config setting.),and follow the guides here.
my config setting now(which solved all problems) is below:
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
entry: {
main: ['./src/index.js', './src/scss/main.scss'],
},
output: {
filename: '[name].js',
chunkFilename: '[name].min.js',
path: resolve(__dirname, 'build'),
},
mode: 'development',
module: {
rules: [
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
}
],
},
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
},
{
test: /\.(jpe?g|png|gif)$/,
type: 'asset/resource',
generator: {
filename: 'img/[hash][ext]'
}
}
]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: './index.html'
})
]
}Looks there is a conflict between file-loader and html-loader plugins, thus it's generating corrupted assets.
However, html-loader will take care of loading all the images (supported sources), we don't need additional plugin file-loader to have that support.
So you can try just by removing file-loader configuration
{
test: /\.(jpg|png|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: '/img/',
pubicPath: '/img/'
}
}
],
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
