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

可以正常编译

但是会多生成一个打不开的图片文件（本应该只生成一个1.jpg文件）

但是网页不能正常显示，可以看到加载的是打不开的图片（d4586487e52584ae24dc.jpg）

然后通过查询官方文档找到问题描述

按照官方的文档并没有解决我的问题，发现了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',
            }

标签：name,jpe,esModule,loader,webpack,file,图片,加载
来源： https://blog.csdn.net/weixin_44417475/article/details/122528286