the current directory structure is as follows
|--src---img-a.png
|-scss-b.scss
|-index.htmlin b.scss
-sharpb {
backgroun-image: url( ../img/a.png )
}in index.html
<img src="./img/a.png">configure webpack
module.exports = {
mode: "production",
entry: "./src/index.js",
output: {
path: path.resolve( __dirname, "dist" ),
filename: "[name].bundle.js",
publicPath: "./",
},
module: {
rules: [
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader"],
},
{
test: /\.png$/,
use: [
{ loader: "file-loader", options: {
name: "img/[name].[ext]",
} }
]
},
{
test: /\.html$/,
use: {
loader: "html-loader",
options: {
attrs: ["img:src"]
}
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/html/index.html",
} ),
new MiniCssExtractPlugin({
filename: "css/[name].css",
chunkFilename: "css/[id].css"
}),
],
};
it is found that the img path packaged by html is. / img/a.png can be successfully accessed, but the extracted css access path is also. / img/a.png can not access the picture
how should I modify it so that index.html and css can be accessed to the same picture normally