浅谈webpack打包过程中因为图片的路径导致的问题


Posted in Javascript onFebruary 21, 2018

最近在制作一个自己的个人博客的时候遇到这么一个问题, 在CSS中使用了相对路径来充当背景图片, 如下所示:

浅谈webpack打包过程中因为图片的路径导致的问题

然后将整个工程使用webpack打包之后, 在浏览器上运行却报错了, 报错如下:

浅谈webpack打包过程中因为图片的路径导致的问题

也就是说, 打包之后这个图片文件找不到了, 那么原因出在哪里呢? 先来看一下我在webpack.config.js文件中的配置:

浅谈webpack打包过程中因为图片的路径导致的问题

在这里其实我的loader并没有使用错误的, 图片对应的就是使用url-loader来处理. 那么再来看一下通过webpack打包之后的目录:

浅谈webpack打包过程中因为图片的路径导致的问题

发现dist文件夹中出现了我们想要打包生成的一个文件build.js, 同时还额外的生成了一个图片文件, 这个文件就是刚刚我们在CSS中

指定的一个背景图片. 通过浏览器的报错信息可以发现, build.js为我们指定的这个图片的地址明显不正确, 在默认情况下, 打包过程会

将使用到的图片拷贝一份放到output的path指定的目录下, 然而在build.js中引用的图片路径确实整个工程文件的根目录, 因此自然引

用不到. 那么应该如何处理呢? 在webpack.config.js文件中output对象中指定publicPath属性, 它用来指定静态资源 (图片等) 的发布地

址, 当配置过该属性后,打包文件 (也就是build.js) 中所有通过相对路径引用的资源都会被配置的路径所替换。因此通过如此设置

之后build.js中引用该图片的路径会在一开始的根目录的路径后面添加publicPath指定的路径, 所以我们在webpack.config.js添加

下图中的红色框中的内容即可:

浅谈webpack打包过程中因为图片的路径导致的问题

那么最终运行起来就能够通过dist文件夹找到生成的图片了!

以上这篇浅谈webpack打包过程中因为图片的路径导致的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 极速 隐藏/显示万行表格列只需 60毫秒
Mar 28 Javascript
用jquery实现自定义风格的滑动条实现代码
Apr 26 Javascript
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
Oct 11 Javascript
JS中把字符转成ASCII值的函数示例代码
Nov 21 Javascript
Iframe 自动适应页面的高度示例代码
Feb 26 Javascript
jquery attr方法获取input的checked属性问题
May 26 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
Dec 15 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
Jan 23 Javascript
javascript执行环境及作用域详解
May 05 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
Nov 07 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
Dec 05 Javascript
JavaScript如何借用构造函数继承
Nov 06 Javascript
解决vue打包之后静态资源图片失效的问题
Feb 21 #Javascript
Vue项目中设置背景图片方法
Feb 21 #Javascript
使用vue + less 实现简单换肤功能的示例
Feb 21 #Javascript
利用angular、react和vue实现相同的面试题组件
Feb 19 #Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 #jQuery
Angular实现的进度条功能示例
Feb 18 #Javascript
Angular2.0实现modal对话框的方法示例
Feb 18 #Javascript
You might like
php把大写命名转换成下划线分割命名
2015/04/27 PHP
制作个性化的WordPress登陆界面的实例教程
2016/05/21 PHP
php处理静态页面:页面设置缓存时间实例
2017/06/22 PHP
js内存泄露的几种情况详细探讨
2013/05/31 Javascript
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
2013/12/16 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
2016/05/13 Javascript
使用jQuery的ajax方法向服务器发出get和post请求的方法
2017/01/13 Javascript
jQuery基本选择器和层次选择器学习使用
2017/02/27 Javascript
AngularJS之页面跳转Route实例代码
2017/03/10 Javascript
浅谈vue项目重构技术要点和总结
2018/01/23 Javascript
nodejs中Express与Koa2对比分析
2018/02/06 NodeJs
Nuxt.js实现校验访问浏览器类型的中间件
2018/08/24 Javascript
详解vue 自定义marquee无缝滚动组件
2019/04/09 Javascript
微信小程序页面间跳转传参方式总结
2019/06/13 Javascript
Vue2.0实现简单分页及跳转效果
2019/07/29 Javascript
[00:26]TI7不朽珍藏III——冥界亚龙不朽展示
2017/07/15 DOTA
[05:06]DOTA2-DPC中国联赛 正赛 VG vs Magma选手采访
2021/03/11 DOTA
[51:39]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第二场 2月7日
2021/03/11 DOTA
Python Sqlite3以字典形式返回查询结果的实现方法
2016/10/03 Python
python 读写中文json的实例详解
2017/10/29 Python
python对视频画框标记后保存的方法
2018/12/07 Python
python opencv鼠标事件实现画框圈定目标获取坐标信息
2020/04/18 Python
Python 中如何写注释
2020/08/28 Python
Lenox官网:精美的瓷器&独特的礼品
2017/02/12 全球购物
英国领先的独立酒精饮料零售商:DrinkSupermarket
2021/01/13 全球购物
经理职责范文
2013/11/08 职场文书
财会自我鉴定范文
2013/12/27 职场文书
教师应聘自荐信范文
2014/03/14 职场文书
师范大学生求职信
2014/06/13 职场文书
机电一体化专业毕业生自荐信
2014/06/19 职场文书
乡镇干部先进性教育活动个人整改措施
2014/09/16 职场文书
2014年节能工作总结
2014/12/18 职场文书
灵山大佛导游词
2015/02/04 职场文书
详解CSS不定宽溢出文本适配滚动
2021/05/24 HTML / CSS
忆童年!用Python实现愤怒的小鸟游戏
2021/06/07 Python
纯CSS如何禁止用户复制网页的内容
2021/11/01 HTML / CSS