webpack5打包图片之后,css中背景图引用错误,导致图片无法显示

Question

这里是打包的配置文件

//loader的配置
    module: {
        rules: [
            {
                test: /\.css$/,
                //loader执行顺序 => 从右到左执行
                use: [
                    //创建style标签,将js中的样式资源插入,添加到head标签中
                    'style-loader',
                    //将css文件变成commonjs模块加载js中,里面内容是样式字符串
                    'css-loader',
                ],
            },
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader'],
            },
            {
                test: /\.(jpg|png|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8 * 1024,
                            esModule: false,
                            name: '[hash:6].[ext]',
                        },
                    },
                ],
            },
            {
                test: /\.html$/,
                use: {
                    loader: 'html-loader',
                    options: {
                        esModule: false,
                    },
                },
            },
        ],
    },

dist文件上面两张图是打包生成的无法显示的图片,下面两张是能正常显示的图片,与css文件里的两张图对应

打完包之后运行起来它background url指向了无法显示的文件

有什么办法能解决这个问题嘛?

Answer 1

你好，我是有问必答小助手，非常抱歉，本次您提出的有问必答问题，技术专家团超时未为您做出解答

本次提问扣除的有问必答次数，将会以问答VIP体验卡（1次有问必答机会、商城购买实体图书享受95折优惠）的形式为您补发到账户。

​​​​因为有问必答VIP体验卡有效期仅有1天，您在需要使用的时候【私信】联系我，我会为您补发。