application-manager: use Webpack v5

[paul-marechal]

Bump Webpack from 4 to 5 and update the generated configurations to use
the new APIs.

Closes #9435

How to test

Only impacts the browser/electron-browser, everything should work like before.

• Images and icons should be properly loaded.
• Monaco editor should be working.
• WASM should be loaded (if not syntax highlighting won't work properly)

Review checklist

• as an author, I have thoroughly tested my changes and carefully followed the review guidelines

Reminder for reviewers

• as a reviewer, I agree to behave in accordance with the review guidelines

[paul-marechal]

cc @eclipse-theia/core

[vince-fugnitto]

I verified the following for both browser and electron targets:

• icons are loaded successfully.
• fonts are loaded successfully.
• syntax-highlighting works correctly.

I also verified that the updated dependencies are license compatible (through clearly defined).

I'll let other review as well 👍

[msujew]

LGTM, I can confirm that everything works as expected in the browser and electron targets.

Furthermore, this change reduces the size of the webpack bundles by a few hundred KB and the node_modules directory by about 80MB 👍

[paul-marechal]

Thanks for the reviews. Since the reference to process.env got removed from the frontend code on master I changed the configs here to not deal with that anymore. Will merge tomorrow.

[tsmaeder]

@paul-marechal One thing I still don't understand here is why these are not in the devDependencies section. Does webpack not take care of including them in the mangled output?

[paul-marechal]

devDependencies are not installed when a package is depended upon meaning those packages would be missing for dependents. Hence those being regular dependencies.

Regarding the bundling, setimmediate is required in src-gen and bundled. The loaders should never reach the final bundles, although they need to be in the environment used to run Webpack (using Theia CLI.)

[paul-marechal]

Thinking about it, if @theia/application-manager only appears as a dev-dependency in a application package.json it should keep working indeed. But from the POV of @theia/application-manager these dependencies must be pulled alongside it, so they can't be declared as devDependencies.

[tsmaeder]

Ok, so the correct way to consume all that is to have @theia/application-manager as a dev dependency in the application package (like examples/browser)?

[tsmaeder]

Experimenting a bit further with this: unless I add an explicit dependency in my application to stuff like circular-dependency-plugin only gets installed into node_modules/@theia/application-manager/node_modules/circular-dependency-plugin and thus is not available for require(...)from gen-weback-config.js. So I think we need to fix https://theia-ide.org/docs/composing_applications.

[paul-marechal]

What you describe sounds like a hoisting problem and it can be painful to troubleshoot. It is part of why I wanted to limit implicit dependencies as much as possible. In this specific case I am not sure how you could dedup the package. yarn why can be useful to see all dependents, and if every package depends on the same version yarn should install it only once at the root of your node_modules.

[tsmaeder]

How do you folks build your application packages? Do you consume the theia packages as npm modules?

[paul-marechal]

Do you consume the theia packages as npm modules?

Most of the time yes.