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

最新推荐文章于 2024-12-16 20:56:34 发布

一星伴月

最新推荐文章于 2024-12-16 20:56:34 发布

阅读量741

点赞数 5

CC 4.0 BY-SA版权

分类专栏： webpack 文章标签： webpack javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_44417475/article/details/122528286

webpack 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何解决Webpack V5版本中图片加载器导致的额外文件生成及无法正确显示的问题，通过调整配置关闭esModule特性实现正确加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我用的是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）

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

还是不行，然后继续找文档，发现我当前版本默认使用esModule语法
在这里插入图片描述

因此，再关闭esModule属性就可以了，配置文件如下

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