Webpack打包生成多余图片的解决方案和Webpack5正确打包图片姿势

本文链接：https://blog.csdn.net/weixin_43714543/article/details/121201846

本文探讨了在Webpack 5中如何避免url-loader的重复打包问题，升级css-loader后，如何正确配置HTML-loader以处理背景图片，并介绍了使用asset-modules的便捷打包方法。

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

最近在学习webpack打包图片资源（background-image）时出现了一些问题

一般来说使用webpack进行对图片的打包处理需要下载两个依赖，file-loader和url-loader

url-loader是依赖于file-loader的基础上的扩展，其可以将设置的limit大小的图片转化为base64格式，这样可以减少http的请求次数，减轻服务器的压力。

但是在我使用url-loader进行打包时却发现我的每张图片资源都打包了两次，而且有一张不能显示，打开不显示的图片二进制后内容是：export default __webpack_public_path__ ...(图片名称)

而且打包后的index.html里面引入的图片地址正是这张打不开的图片路径。

这是我的webpack版本

在搜集众多资料之后发现罪魁祸首居然是css-loader这个鬼东西，在某一次的版本更新中，css-loader推出了打包图片的新功能

在这里插入图片描述

这是我的css-loader版本

所以我们在对背景图片的引入打包处理时可以不再需要使用url-loader了

同样的对于页面上的图片的引入我们之前的方法是使用html-loader并且要将url-loader的esModule设置为false，因为我们的html-loader引入图片使用的是commonjs，而url-loader默认使用es6模块化解析，如果不设置为false打包后的图片路径会出现 [object Module]。