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',
}