webpack打包后直接访问页面图片路径错误的解决方法


Posted in Javascript onJune 17, 2017

前言

本文说的这种图片路径错误是这样的,运行webpack-dev-server,一切正常,没有错误。当webpack之后,直接打开index页面,报错,图片找不到,找不到的原因是路径错误。

先看我的项目代码

webpack.config.js

var Webpack = require("webpack");
var path = require("path");

module.exports = {
 entry: './js/entry.js',
 output: {
 path: path.join(__dirname, '/build'),
 filename: 'bundle.js',
 publicPath: "/src/"
 },
 module: {
 loaders: [{
  test: /\.css$/,
  loader: 'style-loader!css-loader'
  }, {
  test: /\.(png|jpg)$/,
  loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'
  }, 
  {
  test: require.resolve('zepto'),
  loader: 'exports-loader?window.Zepto!script-loader'
  }
 ]
 },
 watch: true,
 devtool: "cheap-module-eval-source-map"
}

这里设置了publicPath,用法点击这里

index.html中引用路径如下:

<script type="text/javascript" src="src/bundle.js" ></script>

当运行webapck-dev-server时,http://localhost:8080/显示正常。

紧接着,要打包,目的是脱离命令能直接访问页面。

操作如下:

1.执行webpack

2.将build中的文件全部拷贝到src中

3.查看页面

因为图片路径错误,所以找不到图片。

我通过单独给处理图片的loader设置publicPath解决了这个问题,如下:

 {
  test: /\.(png|jpg)$/,
  loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]',
  options:{
   publicPath:'/'
  }
  }

然后测试,webapck-dev-server成功,wepback成功,打开页面访问,成功。

webpack打包后直接访问页面图片路径错误的解决方法

路径是这个样子的。

总结

以上就是这文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JavaScript XML和string相互转化实现代码
Jul 04 Javascript
关于query Javascript CSS Selector engine
Apr 12 Javascript
Javascript实现视频轮播在pc端与移动端均可
Sep 29 Javascript
js闭包引起的事件注册问题介绍
Mar 29 Javascript
jQuery Validate插件实现表单验证
Aug 19 Javascript
jquery实现图片列表鼠标移入微动
Dec 01 Javascript
TableSort.js表格排序插件使用方法详解
Feb 10 Javascript
浅谈js中的this问题
Aug 31 Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
Mar 08 Javascript
微信小程序实现长按删除图片的示例
May 18 Javascript
使用Bootstrap做一个朝代历史表
Dec 10 Javascript
在js文件中引入(调用)另一个js文件的三种方法
Sep 11 Javascript
webpack学习教程之publicPath路径问题详解
Jun 17 #Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
Jun 17 #Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
Jun 17 #Javascript
js简易版购物车功能
Jun 17 #Javascript
Webpack如何引入bootstrap的方法
Jun 17 #Javascript
Webpack执行命令参数详解
Jun 17 #Javascript
JS实现留言板功能
Jun 17 #Javascript
You might like
用php过滤危险html代码的函数
2008/07/22 PHP
js使用函数绑定技术改变事件处理程序的作用域
2011/12/26 Javascript
简单实现JS计算器功能
2016/12/21 Javascript
jQuery中的siblings()是什么意思(推荐)
2016/12/29 Javascript
angular和BootStrap3实现购物车功能
2017/01/25 Javascript
使用Bootstrap美化按钮实例代码(demo)
2017/02/03 Javascript
jQuery实现腾讯信用界面(自制刻度尺)样式
2017/08/15 jQuery
你应该知道的几类npm依赖包管理详解
2017/10/06 Javascript
Javascript中prototype与__proto__的关系详解
2018/03/11 Javascript
axios简单实现小程序延时loading指示
2018/07/30 Javascript
jQuery表单元素过滤选择器用法实例分析
2019/02/20 jQuery
通过Nodejs搭建网站简单实现注册登录流程
2019/06/14 NodeJs
vue 导航内容设置选中状态样式的例子
2019/11/01 Javascript
Python 获取新浪微博的最新公共微博实例分享
2014/07/03 Python
Python实现pdf文档转txt的方法示例
2018/01/19 Python
python 用所有标点符号分隔句子的示例
2019/07/15 Python
python模拟实现斗地主发牌
2020/01/07 Python
对python中 math模块下 atan 和 atan2的区别详解
2020/01/17 Python
pandas读取csv文件提示不存在的解决方法及原因分析
2020/04/21 Python
Python数据可视化实现多种图例代码详解
2020/07/14 Python
Python unittest discover批量执行代码实例
2020/09/08 Python
Python爬虫爬取ts碎片视频+验证码登录功能
2021/02/22 Python
新加坡网上化妆品店:Best Buy World
2018/05/18 全球购物
如果NULL和0作为空指针常数是等价的,那我到底该用哪一个
2014/09/16 面试题
会计主管岗位职责范文
2013/11/08 职场文书
出生公证委托书
2014/04/03 职场文书
三分钟英语演讲稿
2014/04/24 职场文书
铣床操作工岗位职责
2014/06/13 职场文书
幼儿园户外活动总结
2014/07/04 职场文书
企业公益活动策划方案
2014/08/24 职场文书
社保转移委托书范本
2014/10/08 职场文书
2015感人爱情寄语
2015/02/26 职场文书
违纪学生保证书
2015/02/27 职场文书
PyTorch 如何自动计算梯度
2021/05/23 Python
SQL Server数据库基本概念、组成、常用对象与约束
2022/03/20 SQL Server
python 学习GCN图卷积神经网络
2022/05/11 Python