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,'/');
            }
        }
    }]
}

这里需要注意：

1. [path]是指相对于src的字体输出路径，比如src/fonts/ xxx.ttf，输出在dist/fonts/xxx.ttf。
2. css中url中的字体路径是由webpack_public_path + 输出路径确定的，前者即为webpack配置文件中output.publicPath的值。
3. 上面配置中publicPath中的url就是webpack_public_path + 输出路径的值，然后再求出对输出根目录的相对路径。

三、修改后的结果