webpack之file-loader加载字体、图片路径问题（八）

问题描述：通过webpack构建之后，发现生成的字体目录与css中引用的字体路径不一致，而默认情况下，css中url的路径是由publicPath和outputPath两者拼接而成的。

一、为了便于理解问题，下面放上构建后的文件目录（字体引用路径存在问题）：



二、修改file-loader的配置

{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [{
loader:'file-loader',
options: {
name: '[path][name].[ext]',//path为相对于context的路径
context:'src',
publicPath:function(url){//返回最终的资源相对路径
return path.relative(distDir,url).replace(/\\/g,'/');
}
}
}]
}

这里需要注意：

[path]是指相对于src的字体输出路径，比如src/fonts/ xxx.ttf，输出在dist/fonts/xxx.ttf。

css中url中的字体路径是由webpack_public_path + 输出路径确定的，前者即为webpack配置文件中output.publicPath的值。

上面配置中publicPath中的url就是webpack_public_path + 输出路径的值，然后再求出对输出根目录的相对路径。

三、修改后的结果