本文介绍了Webpack中file-loader处理图片时遇到的路径问题。在开发环境与生产环境下的图片引入路径不同，通过分析file-loader的outputPath和publicPath解决打包后图片无法正确引用的问题。解决方案包括调整file-loader配置，修改ExtractTextPlugin选项，确保CSS和图片打包在同一目录层级，从而实现图片在不同环境下都能正确加载。
Webpack使用file-loader处理图片
在页面中引入图片有两种方式
img标签引入
css引入
file-loader
配置
{
test: /\.jpg|\.png|\.jpeg|\.svg|\.ttf|\.woff$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: './img',
publicPath: '/img'
}
}]
}
其中
outputPath负责输出目录, 即打包后的写在磁盘的位置.
publicPath则是对页面引入资源的补充,比如img标签引入或者css引入等.
问题
按上面路径配置时, 打包后文件都在build/img
开发环境下可以正确引入文件,引入路径为localhost:8080/img
生产环境下引入路径为f:///img导致找不到图片
file-loader的官方说明
outputPath
Specify a filesystem path where the target file(s) will be placed
publicPath
Specifies a custom public path for the target file(s)
output : 指定将放置目标文件的文件系统路径. 这跟我们遇到的文件没多大关系.那问题就是在publicPath
publicPath: 指定目标文件的自定
最低0.47元/天 解锁文章
1101
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
