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 相关文章推荐
用JTrackBar实现的模拟苹果风格的滚动条
Aug 06 Javascript
javascript import css实例代码
Jul 18 Javascript
JavaScript 计算当天是本年本月的第几周
Mar 22 Javascript
用按钮控制iframe显示的网页实现方法
Feb 04 Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
Mar 18 Javascript
javascript 获取浏览器版本
Jan 21 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
Mar 21 Javascript
js禁止表单重复提交
Aug 29 Javascript
react-native DatePicker日期选择组件的实现代码
Sep 12 Javascript
React-native桥接Android原生开发详解
Jan 17 Javascript
使用layui定义一个模块并使用的例子
Sep 14 Javascript
微信小程序实现滑动翻页效果(完整代码)
Dec 06 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函数轻松实现压缩html/js/Css及注意事项
2013/01/27 PHP
PHP使用trim函数去除字符串左右空格及特殊字符实例
2016/01/07 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
mongodb和php的用法详解
2019/03/25 PHP
laravel 框架结合关联查询 when()用法分析
2019/11/22 PHP
javascript document.execCommand() 常用解析
2009/12/14 Javascript
jQuery基础框架浅入剖析
2012/12/27 Javascript
禁止IE用右键的JS代码
2013/12/30 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
2015/08/07 Javascript
跟我学习javascript的call(),apply(),bind()与回调
2015/11/16 Javascript
JavaScript位移运算符(无符号) &gt;&gt;&gt; 三个大于号 的使用方法详解
2016/03/31 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
2016/06/08 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
2016/10/14 Javascript
微信小程序侧边栏滑动特效(左右滑动)
2017/01/23 Javascript
js canvas实现简单的图像扩散效果
2020/06/28 Javascript
微信小程序switch组件使用详解
2018/01/31 Javascript
Node.js中你不可不精的Stream(流)
2018/06/08 Javascript
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
2018/10/25 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
2018/11/08 Javascript
vue路由--网站导航功能详解
2019/03/29 Javascript
python统计字符串中指定字符出现次数的方法
2015/04/04 Python
python中import reload __import__的区别详解
2017/10/16 Python
python 堆和优先队列的使用详解
2019/03/05 Python
Python识别快递条形码及Tesseract-OCR使用详解
2019/07/15 Python
关于Python内存分配时的小秘密分享
2019/09/05 Python
10个Python面试常问的问题(小结)
2019/11/20 Python
Python 字符串处理特殊空格\xc2\xa0\t\n Non-breaking space
2020/02/23 Python
如何用Python和JS实现的Web SSH工具
2021/02/23 Python
Interrail法国:乘火车探索欧洲,最受欢迎的欧洲铁路通票
2019/08/27 全球购物
毕业生自荐书
2014/02/02 职场文书
地理科学专业自荐信
2014/09/01 职场文书
2014年维稳工作总结
2014/11/18 职场文书
求职推荐信范文
2015/03/27 职场文书
2015年团支部工作总结
2015/04/03 职场文书
2015年技术员工作总结
2015/04/10 职场文书
党校团干班培训心得体会
2016/01/06 职场文书