Webpack 使用publicPath 解決圖片或者字體沒法顯示引用失敗的問題

作項目的時候遇到個問題，css中的背景圖片沒法正常加載，檢查緣由以後，發現是應爲引用的路徑有問題，因此致使了圖片引用失敗。

有沒有什麼方法可以很方便的css中圖片文件的引用路徑呢，webpack中publicPath能夠可方便的解決

output: {
    path: "/home/proj/cdn/assets/[hash]",
    publicPath: "http://cdn.example.com/assets/[hash]/"
},

publicPath 會在引用文件的時候，將路徑前面添加一個前綴，也就是將publicPath的值拼接到引用路徑的前面，因此在publicPath設置一下路徑就能夠了。

有時候引用前綴在打包的時候 沒法確認 須要後來修改，那麼就入口文件中添加__webpack_public_path__全局變量

// 入口文件
__webpack_public_path__ = "http://cdn.example.com/assets/[hash]/"

這樣就能夠解決編譯時不知道最終輸出文件的 publicPath，須要動態設置publicPath的問題了