webpack5简单配置less或css里图片的显示------背景图片不显示问题

webpack.config.js文件配置

const path = require('path'); //绝对路径
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装


module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'builder.js',
    },
    module: {
        rules: [
            // css
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            // less
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader'] //还需安装less
            },
            //处理css/less背景图片资源
            {
                test: /\.(jpg|png|gif)$/,
                loader: 'url-loader', // url-loader file-loader下载
                options: {
                    limit: 8 * 1024, // 将小于8kb的图片用based64处理
                    esModule: false,//关闭url-loader的es6语法模块法解析，使用commonjs
                },
                type:'javascript/auto' //转换 json 为 js

            },
            // html文件中src图片资源
            {
                test:/\.html$/,
                loader:'html-loader'
            },
        ]
    },
    plugins: [
        // 打包html,会自动引入打包文件（css,js等），不需要打包前在html页面引入css\js文件
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
    //模式：development, production 或 none 之中的一个
    mode: 'development',
}