前言:
最开始接触微前端,由于路由异构的问题会导致资源请求出错。
主项目域名a.com,子项目域名b.com,请求的动态(dynamic import
)文件b.com/js/test.js
,在微前端下会请求到a.com/js/test.js
会导致资源404
错误。
后面经过查找需要指定__webpack_public_path__
,能够解决路由异构问题,本文就是解释__webpack_public_path__
的运行机制
__webpack_public_path__ 是如何运行的
首先对于动态文件dynamic import
, webpack
是如何解析的。
// 动态文件
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()
})
}
更详细的代码:
这里有一个很重要的参数__webpack_require__.p
,__webpack__require__.p = 配置文件的publicPath
。
如果你需要指定__webpack__public_path__
,需要在文件的最开头引入。
当你显示的指定了__webpack_public_path__
的值,那么它将会在运行时覆盖__webpack__require__.p
的值,也就是说配置项的publicPath
会失真。
这样,我们请求的路径就会变成这样:
注意:这只针对动态组件的publicPath
,entry
文件还是遵循publicPath
的配置。