我说的这种图片路径错误是这样的,运行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学习笔记——打包后直接访问页面,图片路径错误的更多相关文章

  1. vue build打包后css里的图片路径404不正确的问题

    vue build打包后css里的图片路径404 在vue-cli项目中build/utils.js中找到如下代码块,添加 publicPath:’../../’ if (options.extrac ...

  2. Tomcat启动后,访问页面报404错误解决方法

    Tomcat正常启动后,出现如下情况 提供一个参考解决方法: 1.双击servers 2.把Server Locations设置为User Tomcat installation 保存后再次访问页面就 ...

  3. webpack学习笔记——打包js

    1.新建一个入口js文件,如entry.js,代码如下: document.write("It works.") 2.然后编译 entry.js 并打包到 bundle.js(会自 ...

  4. webpack学习笔记-2-file-loader 和 url-loader

    一 .前言 如果我们希望在页面引入图片(包括img的src和background的url).当我们基于webpack进行开发时,引入图片会遇到一些问题. 其中一个就是引用路径的问题.拿backgrou ...

  5. webpack学习笔记一(入门)

    webpack集成了模块加载和打包等功能 ,这两年在前端领域越来越受欢迎.平时一般是用requirejs.seajs作为模块加载用,用grunt/gulp作为前端构建.webpack作为模块化加载兼容 ...

  6. webpack快速入门——打包后如何调试

    在配置devtool时,webpack给我们提供了四种选项. source-map:在一个单独文件中产生一个完整且功能完全的文件.这个文件具有最好的source map,但是它会减慢打包速度: che ...

  7. vue-cli webpack打包后加载资源的路径问题

    vue项目,访问打包后的项目,输入路径后,页面加载空白.这时会有两类问题,都是路径问题. 1.一个是css,js,ico等文件加载不到,是目录里少了dist 打开页面时一片空白 解决办法: confi ...

  8. 解决React路由URL中hash(#)部分的显示 、browserHistory打包后浏览器刷新页面出现404的问题

    摘要 在React项目中,我们需要采用它的路由库React-Router来进行页面跳转,React会根据路由URL来判断是哪个页面.常见的的URL有两种显示方式,一种是hashHistory的形式,形 ...

  9. 我的webpack学习笔记(二)

    前言 上一篇文章我们讲了多页面js的打包,本篇文章我们继续scss的打包. 多页面css单独打包 首先,我们css编写采用的是sass,所以我们先来安装sass-loader以及可以用到的依赖 $ n ...

随机推荐

  1. kernel笔记——VFS

    vfs(the virtual filesystem, virtual file switch)为应用程序访问文件提供了统一的接口,如read.write.open等. 下面我们看加载文件系统模块.格 ...

  2. laravel整理笔记(一)

    安装laravel5.8.3需要的环境 PHP >= 7.1.3 PHP OpenSSL 扩展 PHP PDO 扩展 PHP Mbstring 扩展 PHP Tokenizer 扩展 PHP X ...

  3. 【Git】+ 新建+删除+上传+覆盖

    上传代码时邮箱格式不符合:https://blog.csdn.net/u012558695/article/details/64921922 在本地新建一个分支: git branch newBran ...

  4. SkylineGlobe7.0.1版本 支持SQLite(*.sqlite;*.db)数据库

    SQLite,是一款轻型的数据库,是遵守ACID的关联式数据库管理系统,它的设计目标是嵌入式的,而且目前已经在很多嵌入式产品中使用了它,它占用资源非常的低,在嵌入式设备中,可能只需要几百K的内存就够了 ...

  5. SpringCloud(3)服务消费者(Feign)

    上一篇文章,讲述了如何通过 RestTemplate+Ribbon 去消费服务,这篇文章主要讲述如何通过Feign去消费服务. 1.Feign简介 Feign是一个声明式的伪Http客户端,它使得写H ...

  6. pyspider煎蛋无聊图爬取

    命令行pyspider,启动pyspider. web预览界面太小,解决方法:找到pyspider的安装路径下的debug.min.css,修改css代码: 将其中的iframe{border-wid ...

  7. Windows 通过批处理自动执行 linux服务器上面命令的办法

    1. 使用putty 下载地址 https://www.chiark.greenend.org.uk/~sgtatham/putty/latest.html 直接使用 exe版本就可以 https:/ ...

  8. jQuery 合成事件

    jQuery有两个合成事件—— hover() 方法和 toggle() 方法,类似ready() 方法,hover() 方法和 toggle() 方法都属于 jQuery 自定义的方法. 1.  h ...

  9. springboot的热部署

    SpringBoot 4.SpringBoot 整合 devtools 实现热部署   一.添加 devtools 依赖 <!-- Spring boot 热部署 : 此热部署会遇到 java. ...

  10. 栈(LIFO)

    1 栈的定义 栈是限定在表尾进行插入和删除操作的线性表. 2 栈的特点 1)栈是特殊的线性表,线性表也具有前驱后继性: 2)栈的插入和删除操作只能在表尾即栈顶进行: 3)后进先出. 3 栈的实现及关键 ...