前言：
最開始接觸微前端，由于路由異構的問題會導致資源請求出錯。
主項目域名a.com，子項目域名b.com，請求的動態(tài)(dynamic import)文件b.com/js/test.js，在微前端下會請求到a.com/js/test.js會導致資源404錯誤。
后面經(jīng)過查找需要指定__webpack_public_path__，能夠解決路由異構問題，本文就是解釋__webpack_public_path__的運行機制

__webpack_public_path__ 是如何運行的

首先對于動態(tài)文件dynamic import， webpack 是如何解析的。

// 動態(tài)文件
const testFile = () => import('./test.js')
// 解析偽代碼：
const testFile = __webpack_require__.e('./test.js')

var __webpack_require__.e = function (url) {
  return new Promise((resolve, reject) => {
    var script = document.createElement('script')
    script.src = __webpack_require__.p + url
    script.onload = resolve()
    script.error = reject()
  })
}

更詳細的代碼：

這里有一個很重要的參數(shù)__webpack_require__.p，__webpack__require__.p = 配置文件的publicPath。

如果你需要指定__webpack__public_path__，需要在文件的最開頭引入。

entry.js

public-path.js

當你顯示的指定了__webpack_public_path__的值，那么它將會在運行時覆蓋__webpack__require__.p的值，也就是說配置項的publicPath會失真。

image.png

image.png

這樣，我們請求的路徑就會變成這樣：

image.png

注意：這只針對動態(tài)組件的publicPath，entry文件還是遵循publicPath的配置。