webpack打包html中img,打包资源成功，图片引用错误，不能显示问题

//webpack 配置文件

 {
                test: /\.html$/,
             //处理html文件中img图片，负责引入img，被url-loaer处理,下载npm i html-withimg-loader -D
                loader: "html-withimg-loader"
            }

const { resolve } = require('path')
const HtmlWebpcakPliugin = require('html-webpack-plugin')
module.exports = {
    entry: "./src/index.js",
    output: {
        filename: 'built.js',
        path: resolve(__dirname, 'build')
    },
    // loader配置
    module: {
        rules: [
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/i,
                // 下载url-loader file-loader
                //只使用1个loader直接写
                loader: 'url-loader',
                options: {
                    // 图片小于8kb会被base64处理
                    limit: 8 * 1024,
                    // 问题因为yrl-loader默认使用es6模块化解析，而html-loader引入图片是commonjs
                    //解析出错[object module]
                    //解决，关闭url-loader的es6模块化，使用commonjs解析
                    esModule: false,
                    //文件重命名，hash:10取图片前10位，ext源文件扩展名
                    name: '[hash:10].[ext]',
                }
            },
            {
                test: /\.html$/,
             //处理html文件中img图片，负责引入img，被url-loaer处理,下载npm i html-withimg-loader -D
                loader: "html-withimg-loader"
            }
        ]
    },
    plugins: [
        // npm i html-webpack-plugin -D
        // 默认创建空html,自动引入打包输出所有资源（js/css)
        //创建有结构的html文件
        new HtmlWebpcakPliugin({
            //复制'./src/index.html'文件，自动引入打包输出所有资源（js/css)
            template: './src/index.html'
        })
    ],
    mode: 'development',