webpack打包图片多生成空白图片且图片不能正常加载

我用的是webpack的V5.66.0版本,下面是正确的配置方法

//配置图片的loader
            {
                test: /\.(gif|png|jpe?g)$/,
                use: {
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        esModule: false
                    }
                },
                type: 'javascript/auto',
            }

下面是我的debug过程
原始的配置webpack.config.js配置

 //配置图片的loader
            {
                test: /\.(gif|png|jpe?g)$/,
                use: {
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                    }
                },
            }

可以正常编译
webpack打包图片多生成空白图片且图片不能正常加载
但是会多生成一个打不开的图片文件(本应该只生成一个1.jpg文件)
webpack打包图片多生成空白图片且图片不能正常加载
但是网页不能正常显示,可以看到加载的是打不开的图片(d4586487e52584ae24dc.jpg)
webpack打包图片多生成空白图片且图片不能正常加载
然后通过查询官方文档找到问题描述
webpack打包图片多生成空白图片且图片不能正常加载
按照官方的文档并没有解决我的问题,发现了file-loaderv的4.3.0版本默认使用了esModule语法,造成了引用图片文件时的方式和以前的版本不一样。
因此,再关闭esModule属性就可以了,配置文件如下

 //配置图片的loader
            {
                test: /\.(gif|png|jpe?g)$/,
                use: {
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        esModule: false
                    }
                },
                type: 'javascript/auto',
            }
上一篇:找不到 tools.jar。请检查 C:\Program Files\Java\jre1.8.0_151 是否包含有效的 JDK 安装


下一篇:动手学PyG(三):PyG中的mini-batches