關於__webpack_public_path__的一些思考

前言：產品裏有個困擾很久的bug，某處圖片引用使用的require('xxxx')的方式，線上環境沒問題，圖片正常加載顯示。當被第三方引用後，發現圖片不能加載，引用路徑上出現protocol:host:port/path/NANimg/xxxx.png的奇怪信息。

問題：分析路徑信息，發現與webpack的publicPath配置有關係，conf文件中使用url-loader配置如下：

{
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    query: {
        limit: 8192,
        name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
    }
}

url-loader對於超過8KB大小的文件，使用file-loader處理，file-loader的文檔如下：

publicPath的默認值__webpack_public_path__，跟蹤發現，在出問題的場景中，__webpack_public_path__的值是NAN。

找下webpack文檔 https://www.webpackjs.com/configuration/output/#output-publicpath

編譯時無法獲取的值，使用自由變量，在運行時動態獲取，即滿足最初的需求。

解決方案：

方案1.按照webpack文檔內容，在入口處定義__webpack_public_path__，運行時動態獲取。

方案2.在構建編譯時，使用絕對地址指定assetsPublicPath的具體值。