浅谈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 遍历页面text控件详解
Jan 06 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
Oct 18 Javascript
浅析如何利用angular结合translate为项目实现国际化
Dec 08 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
Mar 06 Javascript
在使用JSON格式处理数据时应该注意的问题小结
May 20 Javascript
深入理解JavaScript创建对象的多种方式以及优缺点
Jun 01 Javascript
javascript实现循环广告条效果
Dec 12 Javascript
全新打包工具parcel零配置vue开发脚手架
Jan 11 Javascript
实例介绍JavaScript中多种组合继承
Jan 20 Javascript
JavaScript仿京东秒杀倒计时
Mar 17 Javascript
JavaScript禁止右击保存图片,禁止拖拽图片的实现代码
Apr 28 Javascript
区分vue-router的hash和history模式
Oct 03 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
使用PHPMailer实现邮件发送代码分享
2014/10/23 PHP
typecho插件编写教程(三):保存配置
2015/05/28 PHP
PHP将Excel导入数据库及数据库数据导出至Excel的方法
2015/06/24 PHP
PHP判断用户是否已经登录(跳转到不同页面或者执行不同动作)
2016/09/22 PHP
PHP命名空间与自动加载机制的基础介绍
2019/08/25 PHP
javascript各浏览器中option元素的表现差异
2011/04/07 Javascript
JQuery给元素绑定click事件多次执行的解决方法
2014/05/29 Javascript
jQuery学习笔记之jQuery原型属性和方法
2014/06/09 Javascript
简单实现js间歇或无缝滚动效果
2016/06/29 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
2016/11/07 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
2017/12/06 Javascript
解决webpack dev-server不能匹配post请求的问题
2018/08/24 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
2019/08/23 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
2019/11/07 Javascript
js实现幻灯片轮播图
2020/08/14 Javascript
详细分析JavaScript中的深浅拷贝
2020/09/17 Javascript
[43:24]VG vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
[01:20:05]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第二场 2月5日
2021/03/11 DOTA
使用Python进行稳定可靠的文件操作详解
2013/12/31 Python
python实现查询苹果手机维修进度
2015/03/16 Python
python字符串中的单双引
2017/02/16 Python
python re库的正则表达式入门学习教程
2019/03/08 Python
浅析Python 多行匹配模式
2020/07/24 Python
Python爬虫逆向分析某云音乐加密参数的实例分析
2020/12/04 Python
使用Python提取文本中含有特定字符串的方法示例
2020/12/09 Python
HTML5图片预览实例分享
2014/06/04 HTML / CSS
德国家用电器购物网站:Premiumshop24
2019/08/22 全球购物
幼儿园门卫制度
2014/01/29 职场文书
应届中专生自荐书范文
2014/02/13 职场文书
群众路线教育实践活动心得体会
2014/03/07 职场文书
詹天佑教学反思
2014/04/30 职场文书
2014年政风行风自查自纠报告
2014/10/21 职场文书
先进个人申报材料
2014/12/30 职场文书
信息简报范文
2015/07/21 职场文书
进行数据处理的6个 Python 代码块分享
2022/04/06 Python
httpclient调用远程接口的方法
2022/08/14 Java/Android