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

做項目的時候遇到個問題，css中的背景圖片無法正常加載，檢查原因之后，發現是應為引用的路徑有問題，所以導致了圖片引用失敗。

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

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

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

有時候引用前綴在打包的時候 無法確認 需要后來修改，那么就入口文件中添加__webpack_public_path__全局變量
*** 如果你在入口文件中使用 ES6 模塊導入，則在導入后對__webpack_public_path__進行賦值。在這種情況下，你必須將公共路徑(public path)賦值移至自己的專屬模塊，然后將其導入到你的 入口文件 之上：***

// public-path.js
__webpack_public_path__ = "http://cdn.example.com/assets/"  // 這里可以換成變量獲取 比如 window.publickPath 其中這個publickPath變量可以由后端直接在html模版中替換

// 入口文件 index.js
import './public-path'; // 特別要注意 放到第一行 

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