img图片如何用css更换路径,Webpack 打包怎么修改 css img 路径？

现在的目录结构如下

|--src---img-a.png

|-scss-b.scss

|-index.html

在 b.scss 中

#b {

backgroun-image: url( ../img/a.png )

}

在 index.html 中

配置 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"

}),

],

};

发现 html 打包出来的 img 路径是 ./img/a.png 能被成功访问，但是 提取出来的 css 访问的路径也是 ./img/a.png 也就不能访问图片了

请问应该如何修改同时让 index.html 以及 css 能被正常访问同一个图片