浅谈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代码
Aug 29 Javascript
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型
Feb 27 Javascript
自动最大化窗口的Javascript代码
May 22 Javascript
jQuery实现用户注册的表单验证示例
Aug 28 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
Oct 16 Javascript
JS使用eval解析JSON的注意事项分析
Nov 14 Javascript
微信小程序 教程之注册页面
Oct 17 Javascript
妙用Angularjs实现表格按指定列排序
Jun 23 Javascript
js中事件对象和事件委托的介绍
Jan 21 Javascript
vue使用Proxy实现双向绑定的方法示例
Mar 20 Javascript
构建大型 Vue.js 项目的10条建议(小结)
Nov 14 Javascript
JS前端可扩展的低代码UI框架Sunmao使用详解
Jul 23 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
DW中链接mysql数据库时,建立字符集中文出现乱码的解决方法
2010/03/27 PHP
解析thinkphp中的导入文件标签
2013/06/20 PHP
PHP根据IP判断地区名信息的示例代码
2014/03/03 PHP
CodeIgniter使用smtp服务发送html邮件的方法
2015/06/10 PHP
php $_SESSION会员登录实例分享
2021/01/19 PHP
如何让您的中波更粗更长 - 中波框形天线制作
2021/03/10 无线电
[原创]网络复制内容时常用的正则+editplus
2006/11/30 Javascript
20个最新的jQuery插件
2012/01/13 Javascript
js 文本滚动效果的实例代码
2013/08/17 Javascript
js中对象的声明方式以及数组的一些用法示例
2013/12/11 Javascript
删除条目时弹出的确认对话框
2014/06/05 Javascript
js采用concat和sort将N个数组拼接起来的方法
2016/01/21 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
2016/09/01 Javascript
jquery 抽奖小程序实现代码
2016/10/12 Javascript
jQuery展示表格点击变色、全选、删除
2017/01/05 Javascript
js Canvas绘制圆形时钟效果
2017/02/17 Javascript
vue组件生命周期详解
2017/11/07 Javascript
Echarts之悬浮框中的数据排序问题
2018/11/08 Javascript
vue 全局环境切换问题
2019/10/27 Javascript
Flask框架的学习指南之制作简单blog系统
2016/11/20 Python
Python文本处理之按行处理大文件的方法
2018/04/09 Python
django 开发忘记密码通过邮箱找回功能示例
2018/04/17 Python
对python中raw_input()和input()的用法详解
2018/04/22 Python
对TensorFlow的assign赋值用法详解
2018/07/30 Python
Python文件如何引入?详解引入Python文件步骤
2018/12/10 Python
python实现批量视频分帧、保存视频帧
2019/05/31 Python
在matplotlib中改变figure的布局和大小实例
2020/04/23 Python
详解python 内存优化
2020/08/17 Python
css3 iphone玻璃透明气泡完美实现
2013/03/20 HTML / CSS
介绍一下Linux内核的排队自旋锁
2014/01/04 面试题
法学毕业生自我鉴定
2013/11/08 职场文书
终止劳动合同证明书样本
2014/11/19 职场文书
2014教师专业技术工作总结
2014/12/03 职场文书
公司行政助理岗位职责
2015/04/11 职场文书
七年级生物教学反思
2016/02/20 职场文书
MySQL中的全表扫描和索引树扫描
2022/05/15 MySQL