浅谈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 Excel操作知识点
Apr 24 Javascript
JavaScript 笔记二 Array和Date对象方法
May 22 Javascript
JS完成代码前最好对其做5件事
Apr 07 Javascript
基于JavaScript制作霓虹灯文字 代码 特效
Sep 01 Javascript
JS中cookie的使用及缺点讲解
May 13 Javascript
Vue中之nextTick函数源码分析详解
Oct 17 Javascript
js 只比较时间大小的实例
Oct 26 Javascript
浅谈Node 异步IO和事件循环
May 05 Javascript
bootstrap实现嵌套模态框的实例代码
Jan 10 Javascript
微信小程序pinker组件使用实现自动相减日期
May 07 Javascript
JS数据类型分类及常用判断方法
Nov 19 Javascript
uni-app 微信小程序授权登录的实现步骤
Feb 18 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
yii上传文件或图片实例
2014/04/01 PHP
PHP动态页生成静态页的3种常用方法
2014/11/13 PHP
Smarty变量用法详解
2016/05/11 PHP
php封装json通信接口详解及实例
2017/03/07 PHP
PHP实现的只保留字符串首尾字符功能示例【隐藏部分字符串】
2019/03/11 PHP
基于JQuery的asp.net树实现代码
2010/11/30 Javascript
JQuery中html()方法使用不当带来的陷阱
2011/04/07 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
2015/04/02 Javascript
jQuery代码实现发展历程时间轴特效
2015/07/30 Javascript
javascript省市区三级联动下拉框菜单实例演示
2015/11/29 Javascript
基于jQuery实现淡入淡出效果轮播图
2020/07/31 Javascript
源码分析Vue.js的监听实现教程
2017/04/23 Javascript
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
2017/09/06 Javascript
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
2017/10/31 Javascript
vue打包的时候自动将px转成rem的操作方法
2018/06/20 Javascript
Angular通过指令动态添加组件问题
2018/07/09 Javascript
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
2018/08/29 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
2018/09/05 Javascript
JointJS流程图的绘制方法
2018/12/03 Javascript
Vue多环境代理配置方法思路详解
2019/06/21 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
2020/02/07 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
2020/07/14 Javascript
[02:14]DOTA2英雄基础教程 修补匠
2013/12/23 DOTA
python 正则式使用心得
2009/05/07 Python
使用Python & Flask 实现RESTful Web API的实例
2017/09/19 Python
python jieba分词并统计词频后输出结果到Excel和txt文档方法
2018/02/11 Python
python logging日志模块原理及操作解析
2019/10/12 Python
PyQt5中多线程模块QThread使用方法的实现
2020/01/31 Python
Python应用自动化部署工具Fabric原理及使用解析
2020/11/30 Python
python实现学生通讯录管理系统
2021/02/25 Python
米兰必去买手店排行榜首位:Antonioli
2016/09/11 全球购物
Sunglasses Shop丹麦:欧洲第一的太阳镜在线销售网站
2017/10/22 全球购物
什么时候需要进行强制类型转换
2016/09/03 面试题
办公室务虚会发言材料
2014/10/20 职场文书
拔河比赛队名及霸气口号
2015/12/24 职场文书
Python字典的基础操作
2021/11/01 Python