Webpack 打包怎么修改 css img 路徑？

現(xiàn)在的目錄結構如下

|--src---img-a.png
       |-scss-b.scss
       |-index.html

在 b.scss 中

#b {
    backgroun-image: url( ../img/a.png )
}

在 index.html 中

<img src="./img/a.png">

配置 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"
          }),
    ],
};

發(fā)現(xiàn) html 打包出來的 img 路徑是 ./img/a.png 能被成功訪問，但是 提取出來的 css 訪問的路徑也是 ./img/a.png 也就不能訪問圖片了

請問應該如何修改同時讓 index.html 以及 css 能被正常訪問同一個圖片