关于webpack5打包图片不报错但是也不显示问题

外号蓝大胖

于 2021-08-09 22:01:45 发布

阅读量1.7k

点赞数 9

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

本文链接：https://blog.youkuaiyun.com/qq_31659129/article/details/119547922

版权

webpack5 图片打包 asset模块 url-loader dataURI

关键词由优快云通过智能技术生成

web前端专栏收录该内容

29 篇文章

订阅专栏

在使用webpack 5.49.0时遇到图片打包异常，打包后出现两个图片文件，导致图片无法正常显示。官方推荐使用新的asset模块替代url-loader。设置`type:'asset/resource'`可解决此问题，使图片正确打包。现在可以避免使用loader，转而使用webpack5的内置asset模块进行资源处理。

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

我在使用 webpack : "^5.49.0"这个版本的时候，使用url-loader处理图片打包，这时候打包输出会有两个图片文件，一个是打包后的图片，一个图片内容是引入刚才的这个图片，比如他的内容是在这里插入图片描述
最后导致打包图片不报错，但是也不显示，查阅官网后，发现该问题是由于webpack5版本太新，官方推荐使用asset module 资源模块替换loader

转自官网：
asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现。
asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现。
asset/source 导出资源的源代码。之前通过使用 raw-loader 实现。
asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现。

如果你还想使用url-loader 那么你只需要在url-loader中设置type: 'javascript/auto’即可；

 {test:/\.(jpg|png|gif)$/,loader: "url-loader",options:{limit: 8 * 1024,esModule: false,name:"[hash:10].[ext]"},type: 'javascript/auto'}

由于loader可能不再更新，现在官方更推荐该写法

{test:/\.(jpg|png|gif)$/,type: 'asset/resource'}

这样后我们就可以在页面上看到打包后的图片