社区
余其方的课程社区_NO_1
从基础到实战 手把手带你掌握新版Webpack
帖子详情
3-3配置loader打包图片的路径
weixin_42915158
2023-01-13 02:18:35
课时名称
课时知识点
3-3配置loader打包图片的路径
现在的图片,我们看到都被打包到dist目录的,根目录下去了。但在工作中,一个项目有大量的html, js,css,图片文件,字体库等。如果全部都打包到dist根目录下,是不是非常的乱啊,于是为了更好的管理我们的项目,我希望打包图片的时候,打包到assets/images这样的一个文件夹里面,于是引出这节课如何配置loader打包图片的路径
...全文
64
回复
打赏
收藏
3-3配置loader打包图片的路径
课时名称课时知识点3-3配置loader打包图片的路径现在的图片,我们看到都被打包到dist目录的,根目录下去了。但在工作中,一个项目有大量的html, js,css,图片文件,字体库等。如果全部都打包到dist根目录下,是不是非常的乱啊,于是为了更
复制链接
扫一扫
分享
转发到动态
举报
AI
作业
写回复
配置赞助广告
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
【webpack】---url-
loader
图片
路径
问题
webpack:url-
loader
图片
路径
问题 我们使用webpack
打包
项目中,在处理
图片
路径
时, 最常用的
loader
有两种, url-
loader
和 file-
loader
。 我们在写项目中引用
路径
的时候,填写的URL是基于我们开发时的
路径
, 但是在webpack
打包
时, 会将各个模块
打包
成一个文件,里面引用的
路径
是相对于入口html文件,并不是相对于我们的原始文件
路径
的。lo...
初学webpack,使用url-
loader
和file-
loader
打包
背景
图片
不生效的问题
问题描述: 在项目里,的css文件夹里引用了这个
图片
,想让这个
图片
作为html的背景展示,然后使用webpack
打包
。 在学习webpack时候得知,大于8KB的
图片
要使用 file-
loader
打包
,小于8KB的
图片
会使用url-
loader
打包
。下图是我目前的
配置
文件,以及目录结构。 。于是开始使用npm
打包
。
打包
成功结果如下:
图片
和bundle.js均正常生成,
图片
的名字格式也符合我的file-
loader
里的name
配置
。然后点击html打开页面。 发现样式和文字均正常显示,.
Webpack5 file-
loader
、url-
loader
打包
url引入一张
图片
生成两个
图片
,一个无法加载
最近在学习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
对html中img标签引入的
图片
打包
,
打包
后
图片
无法显示,
路径
上多出default对象
webpack,使用html-withimg-
loader
打包
img
图片
,
打包
后
图片
无法显示,
路径
上多出default的一个对象。 前面会进行img
图片
打包
的
配置
安装和介绍。对于已了解的,想直接解决问题的实用党,可跳过第一部分,直接看第二部分代码。 第一部分:插件安装和
配置
介绍(本人目前使用的
配置
) 在使用webpack进行
打包
时,使用url-
loader
打包
的是样式文件中的背景
图片
,如less、...
url-
loader
打包
图片
不显示的问题
打包
图片
的时候出现了问题 具体问题如下: 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
社区内容
发帖
与我相关
我的任务
余其方的课程社区_NO_1
复制链接
扫一扫
分享
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章