3-3配置loader打包图片的路径

weixin_42915158 2023-01-13 02:18:35

课时名称

课时知识点

3-3配置loader打包图片的路径

现在的图片，我们看到都被打包到dist目录的，根目录下去了。但在工作中，一个项目有大量的html, js，css，图片文件，字体库等。如果全部都打包到dist根目录下，是不是非常的乱啊，于是为了更好的管理我们的项目，我希望打包图片的时候，打包到assets/images这样的一个文件夹里面,于是引出这节课如何配置loader打包图片的路径

...全文

64 回复打赏收藏转发到动态举报

写回复

回复

切换为时间正序

请发表友善的回复…

发表回复

webpack:url-loader 图片路径问题我们使用webpack打包项目中，在处理图片路径时，最常用的loader有两种， url-loader 和 file-loader。我们在写项目中引用路径的时候，填写的URL是基于我们开发时的路径，但是在webpack打包时，会将各个模块打包成一个文件，里面引用的路径是相对于入口html文件，并不是相对于我们的原始文件路径的。lo...

问题描述：在项目里，的css文件夹里引用了这个图片，想让这个图片作为html的背景展示，然后使用webpack打包。在学习webpack时候得知，大于8KB的图片要使用 file-loader打包，小于8KB的图片会使用url-loader打包。下图是我目前的配置文件，以及目录结构。。于是开始使用npm打包。打包成功结果如下：图片和bundle.js均正常生成，图片的名字格式也符合我的file-loader里的name配置。然后点击html打开页面。发现样式和文字均正常显示，.

最近在学习webpack5 Webpack5 file-loader、url-loader打包url引入的图片生成两个图片，一个无法加载。但是页面引入的却是这个无法加载的图片就算是使用了file-loader的outputPath，也会发现，生成的无效图片并不会进入到outputPath中指定的路径里面。问题原因： css-loader版本不同。 css-loader 6.0.0以上版本。对引入背景图片的url解析方式不一样，导致生成了两个图片（一个正常由file-loader解析生成，一个仅由c

webpack，使用html-withimg-loader打包img图片，打包后图片无法显示，路径上多出default的一个对象。前面会进行img图片打包的配置安装和介绍。对于已了解的，想直接解决问题的实用党，可跳过第一部分，直接看第二部分代码。第一部分：插件安装和配置介绍（本人目前使用的配置）在使用webpack进行打包时，使用url-loader打包的是样式文件中的背景图片，如less、...

打包图片的时候出现了问题具体问题如下： 1.在没有配置图片打包的时候，不会报错，图片正常显示，但是如果要使html中的图片显示的话不配置就会出错 2.配置了url-loader，背景图片不显示 3.配置了url-loader,html-withimg-loader,背景图片不显示，html中图片显示正常 4.所以要解决两边都显示正常的问题，需要在test: /\.(png|jpg|gif|jpeg)$/下添加一个type配置，即: type: 'javascript/auto', 5.具体配置代码如下

余其方的课程社区_NO_1

1

社区成员

14

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章