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

Question

现在的目录结构如下

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

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

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

Answer 1

提取 js 中的 css 部分到单独的文件

这种情况下所以单独需要配置 publicPath，复写其中资源的路径

Answer 2

使用 url-loader
name是定义打包后的图片文件夹以及图片的名称

...
    {
        test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz|tmpl)(\?.+)?$/,
        exclude: /favicon\.png$/,
        use: [{
            loader: 'url-loader',
            options: {
                limit: 400,
                name: 'assets/' + (isDev ? '[name].[ext]' : '[name].[ext]?[hash:7]')
            }
        }]
    }
...