問題描述：通過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 + 輸出路徑的值，然後再求出對輸出根目錄的相對路徑。

三、修改後的結果