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: 指定目标文件的自定