前言：
最開始接觸微前端碉咆，由于路由異構(gòu)的問題會導(dǎo)致資源請求出錯。
主項(xiàng)目域名a.com蛀恩，子項(xiàng)目域名b.com疫铜，請求的動態(tài)(dynamic import)文件b.com/js/test.js，在微前端下會請求到a.com/js/test.js會導(dǎo)致資源404錯誤双谆。
后面經(jīng)過查找需要指定__webpack_public_path__壳咕，能夠解決路由異構(gòu)問題，本文就是解釋__webpack_public_path__的運(yùn)行機(jī)制
__webpack_public_path__ 是如何運(yùn)行的
首先對于動態(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()
})
}
更詳細(xì)的代碼：
這里有一個很重要的參數(shù)__webpack_require__.p，__webpack__require__.p = 配置文件的publicPath趣避。
如果你需要指定__webpack__public_path__庞呕，需要在文件的最開頭引入。
entry.js
public-path.js
當(dāng)你顯示的指定了__webpack_public_path__的值程帕，那么它將會在運(yùn)行時覆蓋__webpack__require__.p的值住练，也就是說配置項(xiàng)的publicPath會失真。
image.png
image.png
這樣愁拭，我們請求的路徑就會變成這樣：
image.png
注意：這只針對動態(tài)組件的publicPath讲逛，entry文件還是遵循publicPath的配置。
