本文针对webpack打包后直接打开HTML页面导致图片无法显示的问题，分析了路径配置原因。通过为处理图片的url-loader单独设置publicPath选项，修正了资源引用路径，确保开发服务器与静态文件访问均能正常加载图片。
webpack打包后图片路径错误问题描述
前言
本文讨论一种特定的图片路径错误情况：在运行webpack-dev-server时，项目一切正常且无报错。然而，当使用webpack进行打包后，直接打开生成的index.html页面时，会提示图片找不到。其根本原因在于资源路径配置错误。
先看我的项目代码
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参数解决了此问题，具体配置如下：
解决方案：单独设置publicPath
{
test: /\.(png|jpg)$/,
loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]',
options:{
publicPath:'/'
}
}随后进行测试，确认webpack-devserver启动正常，webpack打包成功，且直接打开页面访问图片成功。
此时图片路径结构如下所示。
总结
以上就是本文的全部内容，希望这些内容能对您的学习或工作有所帮助。如有疑问，欢迎留言交流，感谢支持。