浅谈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 相关文章推荐
{}与function(){}选用空对象{}来存放keyValue
May 23 Javascript
javascript 面向对象封装与继承
Nov 27 Javascript
JSON字符串和对象之间的转换详解
May 26 Javascript
全面解析Bootstrap布局组件应用
Feb 22 Javascript
jQuery siblings()用法实例详解
Apr 26 Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
Jul 09 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
Angular5中调用第三方js插件的方法
Feb 26 Javascript
微信小程序实现提交input信息到后台的方法示例
Jan 19 Javascript
VUE实现强制渲染,强制更新
Oct 29 Javascript
如何优雅地在Node应用中进行错误异常处理
Nov 25 Javascript
JS运算符优先级与表达式示例详解
Sep 04 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(6) 面向对象
2010/02/16 PHP
刷新PHP缓冲区为你的站点加速
2015/10/10 PHP
部署PHP时的4个配置修改说明
2015/10/19 PHP
配置eAccelerator和XCache扩展来加速PHP程序的执行
2015/12/22 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
jquery 插件开发 extjs中的extend用法小结
2013/01/04 Javascript
JQuery验证jsp页面属性是否为空(实例代码)
2013/11/08 Javascript
js实现页面跳转重定向的几种方式
2014/05/29 Javascript
巧用jQuery选择器提高写表单效率的方法
2016/08/19 Javascript
jQuery ajax请求struts action实现异步刷新
2017/04/19 jQuery
JavaScript实现无刷新上传预览图片功能
2017/08/02 Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
2017/09/20 jQuery
vue-devtools的安装步骤
2018/04/23 Javascript
通过扫小程序码实现网站登陆功能
2019/08/22 Javascript
p5.js临摹旋转爱心
2019/10/23 Javascript
深入浅析python继承问题
2016/05/29 Python
修复 Django migration 时遇到的问题解决
2018/06/14 Python
Django文件存储 自己定制存储系统解析
2019/08/02 Python
浅析pandas 数据结构中的DataFrame
2019/10/12 Python
matplotlib实现数据实时刷新的示例代码
2021/01/05 Python
python中time tzset()函数实例用法
2021/02/18 Python
CSS3结构性伪类选择器九种写法
2012/04/18 HTML / CSS
Snapfish英国:在线照片打印和个性化照片礼品
2017/01/13 全球购物
Charlotte Tilbury美国官网:英国美妆品牌
2017/10/13 全球购物
物业门卫岗位职责
2013/12/28 职场文书
廉政教育心得体会
2014/01/01 职场文书
七年级生物教学反思
2014/01/30 职场文书
莫言诺贝尔获奖演讲稿
2014/05/21 职场文书
羽毛球社团活动总结
2014/06/27 职场文书
小学社会实践活动总结
2014/07/03 职场文书
2014教师党员自我评议总结
2014/09/19 职场文书
2014入党积极分子批评与自我批评思想汇报
2014/09/20 职场文书
建党伟业观后感
2015/06/01 职场文书
五年级作文之学校的四季
2019/12/05 职场文书
简单且有用的Python数据分析和机器学习代码
2021/07/02 Python
一条 SQL 语句执行过程
2022/03/17 MySQL