Core: Support webpack5 and webpack4 side by side

[shilman]

Issue: #9216

What I did

With @ndelangen:

• Upgrade to webpack5 + dependencies
• Fixed webpack build in official example
• Split up @storybook/core into core-server, core-client, core-common
• Introduce a builder abstraction and implement builder-webpack4, builder-webpack5
• Set up snapshot tests for the webpack configuration so that we can test against next
• Set up an e2e test that runs outside the monorepo to avoid hoisting issues

How to test

See core-presets.test.ts whose snapshots we've manually checked against next (webpack4)

[shilman]

Early, completely non-optimized perf testing.

Install size up, build size down

This is a CRA benchmark (webpack4) and we are building the Storybook "manager" UI with (webpack5), so that accounts for the extra install time. But build time is faster (20s vs ~30s before) with no optimizations added yet.

Static storybooks load slightly faster

For static storybooks, time to first render is slightly faster (300ms vs 370ms before):

[shilman]

@ndelangen we still need to set up an e2e test for webpack5, but can do it in a separate PR.

@gaetanmaisse I've broken the yarn2 PNP test but am merging anyway because my head will explode if I look at this PR any longer. Apologies for continuing to subject you to this.

[phaistonian]

@shilman Somehow running yarn storybook builder-webpack4 is preferred, as opposed to the builder-webpack5 one.

I guess the detection phase needs some extra care.

Ps: any way to force use the webpack5 one?

[shilman]

@phaistonian yes you need to set it in .storybook/main.js

module.exports = {
  core: { builder: 'webpack5' }
}

See the full migration guide here:

https://gist.github.com/shilman/8856ea1786dcd247139b47b270912324