记录：Webpack5把微前端qiankun的配置文件tree sharking了

最新推荐文章于 2025-04-02 00:06:31 发布

Peter 谭

最新推荐文章于 2025-04-02 00:06:31 发布

阅读量1k

点赞数 1

文章标签： java vue python javascript react

本文链接：https://blog.youkuaiyun.com/petertanjinjie/article/details/120878502

版权

在将项目升级到Webpack5并使用qiankun进行微前端开发时，遇到子应用启动失败的问题，原因是__webpack_publicPath__变量未被修改导致异步加载的js文件404。经过分析，发现是Webpack5的tree shaking移除了public-path.js文件。解决方案是在package.json中添加"sideEffects"属性，避免tree shaking该文件。理解微前端、Webpack的代码分割原理和tree shaking配置对于这类问题的解决至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

故事的开头

从一个快要下班的BUG开始，由于原部门同事想要基于一个项目再拆分出几个项目，我们本来用的是qiankun(基座模式)的微前端模式，再拆分其实是比较简单的

只是这次顺便在拆分之前升级了webpack5,升级也是比较简单，这里一笔带过

实施的过程没有亲自操作

问题来了，在子应用升级了webpack5以后，本地通过基座加载调试时候，突然启动不了了

复现问题

临近下班，这个事情要解决，先复现

发现network面板通过基座加载子应用时候，出现了一个js文件404

这里面很蹊跷，因为子应用单独可以启动，子应用被基座家加载时候只有一个js文件404了，而且是一个异步加载的js,那么可以判断，肯定是加载逻辑这块出了问题

在子应用中调试，打开public-path文件：

if (window.__POWERED_BY_QIANKUN__) {
    __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

发现这些代码在通过微前端基座模式加载时候，竟然没有运行！！！是整个代码都没有被执行

这个js文件是通过入口index.tsx文件顶部引入的

最低0.47元/天解锁文章