浅谈webpack打包过程中因为图片的路径导致的问题
作者：jacktime23 发布时间：2024-04-28 09:42:38
最近在制作一个自己的个人博客的时候遇到这么一个问题, 在CSS中使用了相对路径来充当背景图片, 如下所示：
然后将整个工程使用webpack打包之后, 在浏览器上运行却报错了, 报错如下:
也就是说, 打包之后这个图片文件找不到了, 那么原因出在哪里呢? 先来看一下我在webpack.config.js文件中的配置:
在这里其实我的loader并没有使用错误的, 图片对应的就是使用url-loader来处理. 那么再来看一下通过webpack打包之后的目录:
发现dist文件夹中出现了我们想要打包生成的一个文件build.js, 同时还额外的生成了一个图片文件, 这个文件就是刚刚我们在CSS中
指定的一个背景图片. 通过浏览器的报错信息可以发现, build.js为我们指定的这个图片的地址明显不正确, 在默认情况下, 打包过程会
将使用到的图片拷贝一份放到output的path指定的目录下, 然而在build.js中引用的图片路径确实整个工程文件的根目录, 因此自然引
用不到. 那么应该如何处理呢? 在webpack.config.js文件中output对象中指定publicPath属性, 它用来指定静态资源 (图片等) 的发布地
址, 当配置过该属性后，打包文件 (也就是build.js) 中所有通过相对路径引用的资源都会被配置的路径所替换。因此通过如此设置
之后build.js中引用该图片的路径会在一开始的根目录的路径后面添加publicPath指定的路径, 所以我们在webpack.config.js添加
下图中的红色框中的内容即可：
那么最终运行起来就能够通过dist文件夹找到生成的图片了!
来源：http://blog.csdn.net/u012863664/article/details/72641250
0
投稿猜你喜欢
- 方法一、SELECT SUM(正确数)+SUM(错误数) AS 总记录数,SUM(正确数),SUM(错误数) FROM ( SELECT C
- 本文较为详细的介绍了python中raw_input的用法，使用raw_input 能够很方便的丛控制台读入数据。具体用法示例如下：1.输入
概念关键字：array，数据的组合（多个）存储到一个指定的容器中，用变量指向该容器，然后可以通过变量一次性得到该容器中的所有数据.数组定义语- 登录页面能访问得到，但当执行下级目录的文件就不行了，浏览器直接跳出以下错误页面： 除些以外没有任何其它有价值的信息，因为此网站在我的电脑上执
- 使用下面的命令检查是否安装有MySQL Server[root@localhost etc]# rpm -qa | grep mysql /
- 当遇到一个模板标签（template tag）时，模板解析器就会把标签包含的内容，以及模板解析器自己作为参数调用一个python函数。 这个
- 第1章 新建工程和创建app新建工程和创建app就不用贴出来了，我这里是测试图片上传的功能能否实现，所以项目都是新的，正常在以有的app下就
- 我不知道没有他们我该如何生活我编写Python已有5年以上了，我的工具集通常变得越来越小，而不是越来越大。 许多工具不是必需的或无用的，而其
- 创建mysql用户 [root@xuhost opt]# useradd -g mysql mysql3307 -s /bin/nologi
- 近期，MSN、江民等知名网站相继受到了黑客的威胁和攻击，一时间网络上风声鹤唳。本报编辑部接到本文作者（炽天使）的电话，他详细讲述了发现国内最
- 程序执行时需要读取两个文件command.txt和ipandpass.txt。格式如下：command.txt:ThreadNum:1por
- 在开始聊我在阿里四个月的网页推广设计之前，我想先来说说我对平面设计和网页设计的认识。它们之间的交集。它们都是集艺术创作、电脑技术和数字技术于
- 本文实例讲述了php tpl模板引擎定义与使用。分享给大家供大家参考，具体如下：tpl.php<?phpnamespace tpl;/
- 本文实例为大家分享了python Tkinter版学生管理的具体代码，供大家参考，具体内容如下Tkinter是python自带的UI包，无需
- 前言本文使用 cpu 版本的 tensorflow 2.4 ，在 shakespeare 数据的基础上使用 Skip-Gram 算法训练词嵌
- 这只是符合比较正常的需求和场景。#一、适用合并两个字典（key不能相同否则会被覆盖），简单，好用。A = {'a': 11,
- 一、配置Git：1、对于首次安装git的机器，一定要首先进行用户账户信息的配置：git config --global user.name
- Django是一个开放源代码的Web应用框架，由Python写成。采用了MTV的框架模式，即模型M，视图V和模版T。它最初是被开发来用于管理
- 有的时候我们在获取到目标电脑时候如果对方电脑又python 编译环境时可以利用python 反弹shell主要用到python os库和so
- 序 号前 缀使用的变量/范围或数据类型1a or arrArray2b or blnBoolean3bytByte4
