浅谈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 相关文章推荐
jQuery 表单验证插件formValidation实现个性化错误提示
Jun 23 Javascript
如何创建一个JavaScript弹出DIV窗口层的效果
Sep 25 Javascript
JavaScript中的闭包介绍
Mar 15 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
Oct 12 Javascript
jQuery实现form表单元素序列化为json对象的方法
Dec 09 Javascript
JS键盘版计算器的制作方法
Dec 03 Javascript
详解Vue 事件驱动和依赖追踪
Apr 22 Javascript
bootstrap table单元格新增行并编辑
May 19 Javascript
vue使用Axios做ajax请求详解
Jun 07 Javascript
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
Jan 25 Javascript
vue中使用router全局守卫实现页面拦截的示例
Oct 23 Javascript
JS实现京东商品分类侧边栏
Dec 11 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
Youku 视频绝对地址获取的方法详解
2013/06/26 PHP
php使用curl发送json格式数据实例
2013/12/17 PHP
php使用curl和正则表达式抓取网页数据示例
2014/04/13 PHP
php自定义扩展名获取函数示例
2016/12/12 PHP
PHP微商城开源代码实例
2019/03/27 PHP
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
2009/04/07 Javascript
js实现鼠标经过表格行变色的方法
2015/05/12 Javascript
JavaScript取得键盘按下方向键是哪个的方法
2015/08/04 Javascript
JS DOM实现鼠标滑动图片效果
2020/09/17 Javascript
jQuery实现的倒计时效果实例小结
2016/04/16 Javascript
AngularJS 避繁就简的路由
2016/07/01 Javascript
jquery+CSS3实现3D拖拽相册效果
2016/07/18 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
2017/05/25 Javascript
详解vue-resource promise兼容性问题
2017/06/20 Javascript
Element Input组件分析小结
2018/10/11 Javascript
Vue 实现输入框新增搜索历史记录功能
2019/10/15 Javascript
node.JS二进制操作模块buffer对象使用方法详解
2020/02/06 Javascript
js实现经典贪吃蛇小游戏
2020/03/19 Javascript
微信小程序实现滑动操作代码
2020/04/23 Javascript
十条建议帮你提高Python编程效率
2016/02/16 Python
numpy linalg模块的具体使用方法
2019/05/26 Python
python实现Dijkstra算法的最短路径问题
2019/06/21 Python
关于Tensorflow分布式并行策略
2020/02/03 Python
Python实现疫情地图可视化
2021/02/05 Python
requests在python中发送请求的实例讲解
2021/02/17 Python
俄罗斯美容和健康网上商店:Созвездие Красоты
2019/07/23 全球购物
颇特女士:NET-A-PORTER(直邮中国)
2020/07/11 全球购物
保安员岗位职责
2013/11/17 职场文书
临床护士自荐信
2014/01/31 职场文书
中学生获奖感言
2014/02/04 职场文书
物业管理毕业生的自我评价
2014/02/17 职场文书
机关门卫的岗位职责
2014/04/29 职场文书
2014年党支部学习材料
2014/05/19 职场文书
公司任命书模板
2014/06/06 职场文书
普通话演讲稿
2014/09/03 职场文书
2015新年寄语大全
2014/12/08 职场文书