Webpack5 Tree Shakes the Configuration File of Micro-Frontend Qiankun

When loading the sub-application through the base application in the network panel, a JS file returned 404.

This is puzzling because the sub-application can run independently. When loaded via the base application, only one JS file (an async-loaded one) returns 404. So it must be a problem with the loading logic.

Debugging in the sub-application, I opened the public-path file and found it was not executed.

The core issue: I discovered that the __webpack_public_path__ variable of the sub-application was not modified, causing the request host to be incorrect and the async-loaded JS file to return 404. The file was tree-shaken by webpack5. The sideEffects field added in package.json.

"sideEffects":["src/public-path.js"]

Note:

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

This code is actually not referenced in the context. Only after compilation, when the async JS file is loaded, the __webpack_public_path__ variable is used, so the code was removed.

To solve this problem, we need to add a "sideEffects" property in package.json.