源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2021-03-28 20:56 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:webpack打包后直接访问页面图片路径错误的解决方法
[b]前言[/b] 本文说的这种图片路径错误是这样的,运行[code]webpack-dev-server[/code],一切正常,没有错误。当webpack之后,直接打开index页面,报错,图片找不到,找不到的原因是路径错误。 [b]先看我的项目代码[/b] 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"
}
这里设置了[url=http://www.1sucai.cn/article/116443.htm]publicPath,用法点击这里[/url] index.html中引用路径如下:
<script type="text/javascript" src="src/bundle.js" ></script>
当运行[code]webapck-dev-server[/code]时,http://localhost:8080/显示正常。 紧接着,要打包,目的是脱离命令能直接访问页面。 [b]操作如下:[/b]   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成功,打开页面访问,成功。 [img]http://files.jb51.net/file_images/article/201706/2017617113038950.png?2017517113512[/img] 路径是这个样子的。 [b]总结[/b] 以上就是这文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如有疑问大家可以留言交流,谢谢大家对编程素材网的支持。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部