社区
余其方的课程社区_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打包图片的路径
...全文
63
回复
打赏
收藏
3-3配置loader打包图片的路径
课时名称课时知识点3-3配置loader打包图片的路径现在的图片,我们看到都被打包到dist目录的,根目录下去了。但在工作中,一个项目有大量的html, js,css,图片文件,字体库等。如果全部都打包到dist根目录下,是不是非常的乱啊,于是为了更
复制链接
扫一扫
分享
转发到动态
举报
AI
作业
写回复
配置赞助广告
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
【webpack】---url-
loader
图片
路径
问题
我们使用webpack
打包
项目中,在处理
图片
路径
时, 最常用的
loader
有两种, url-
loader
和 file-
loader
。 我们在写项目中引用
路径
的时候,填写的URL是基于我们开发时的
路径
, 但是在webpack
打包
时, 会将各个模块
打包
...
初学webpack,使用url-
loader
和file-
loader
打包
背景
图片
不生效的问题
在学习webpack时候得知,大于8KB的
图片
要使用 file-
loader
打包
,小于8KB的
图片
会使用url-
loader
打包
。下图是我目前的
配置
文件,以及目录结构。 。于是开始使用npm
打包
。
打包
成功结果如下:
图片
和bundle.js均正常...
Webpack5 file-
loader
、url-
loader
打包
url引入一张
图片
生成两个
图片
,一个无法加载
Webpack5 file-
loader
、url-
loader
打包
url引入的
图片
生成两个
图片
,一个无法加载。 但是页面引入的却是这个无法加载的
图片
就算是使用了file-
loader
的outputPath,也会发现,生成的无效
图片
并不会进入到outputPath...
webpack:使用html-withimg-
loader
对html中img标签引入的
图片
打包
,
打包
后
图片
无法显示,
路径
上多出default对象
webpack,使用html-withimg-
loader
打包
img
图片
,
打包
后
图片
无法显示,
路径
上多出default的一个对象。 前面会进行img
图片
打包
的
配置
安装和介绍。对于已了解的,想直接解决问题的实用党,可跳过第一部分,直接看第二...
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写文章