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 流畅动画实现原理
Sep 08 Javascript
JavaScript Event学习第二章 Event浏览器兼容性
Feb 07 Javascript
javascript中substr,substring,slice.splice的区别说明
Nov 25 Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
Dec 12 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
Mar 08 Javascript
与Math.pow 相反的函数使用介绍
Aug 04 Javascript
js正则匹配出所有图片及图片地址src的方法
Jun 08 Javascript
Javascript刷新窗口方法小结
Oct 21 Javascript
js计算文本框输入的字符数
Oct 23 Javascript
基于input动态模糊查询的实现方法
Dec 12 Javascript
一文搞懂ES6中的Map和Set
May 20 Javascript
通过滑动翻页效果实现和移动端click事件问题
Jan 26 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下用rmdir实现删除目录的三种方法小结
2008/04/20 PHP
apache mysql php 源码编译使用方法
2012/05/03 PHP
PHP去掉从word直接粘贴过来的没有用格式的函数
2012/10/29 PHP
注意:php5.4删除了session_unregister函数
2013/08/05 PHP
thinkPHP模板中函数的使用方法示例
2016/11/30 PHP
微信公众平台开发-微信服务器IP接口实例(含源码)
2017/03/05 PHP
表单的一些基本用法与技巧
2006/07/15 Javascript
JavaScript打字小游戏代码
2011/12/26 Javascript
jquery ajax 调用失败的原因示例介绍
2013/09/27 Javascript
js 删除数组的几种方法小结
2014/02/21 Javascript
jQuery不使用插件及swf实现无刷新文件上传
2014/12/08 Javascript
浅谈EasyUI中Treegrid节点的删除
2015/03/01 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
2016/01/27 Javascript
Javascript发送AJAX请求实例代码
2016/08/21 Javascript
Vue通过input筛选数据
2020/10/26 Javascript
JavaScript监听手机物理返回键的两种解决方法
2017/08/14 Javascript
详解a++和++a的区别
2017/08/30 Javascript
浅析JS中回调函数及用法
2018/07/25 Javascript
JavaScript 高性能数组去重的方法
2018/09/20 Javascript
微信小程序基础教程之worker线程的使用方法
2019/07/15 Javascript
jsonp格式前端发送和后台接受写法的代码详解
2019/11/07 Javascript
Java Varargs 可变参数用法详解
2020/01/28 Javascript
[37:45]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS Orenda
2014/05/22 DOTA
Python去除、替换字符串空格的处理方法
2018/04/01 Python
在python里面运用多继承方法详解
2019/07/01 Python
Python3的socket使用方法详解
2020/02/18 Python
python数据预处理方式 :数据降维
2020/02/24 Python
Python实现爬取网页中动态加载的数据
2020/08/17 Python
HTML利用九宫格原理进行网页布局
2020/03/13 HTML / CSS
京东国际站:JOYBUY
2017/11/23 全球购物
上海天奕面试题笔试题
2015/04/19 面试题
挂职学习心得体会
2014/09/09 职场文书
党的群众路线教育实践活动总结
2014/10/30 职场文书
2014年工程师工作总结
2014/11/25 职场文书
软件项目经理岗位职责
2015/04/01 职场文书
2016年安全生产先进个人事迹材料
2016/02/29 职场文书