Webpack: Make manager and preview build processes cancelable

[yannbf]

Issue: N/A

What I did

Transformed the build and start steps, for both manager and preview, for both webpack4 and webpack5, so that they are all generators. This allows us to e.g. cancel the execution of preview when manager fail and vice versa.
The reason we need this is because the processes happen in parallel, so we need a generator in order to get some control over their executions.

There are lots of duplication between the builders, they certainly can be improved.

co-authored by @ndelangen

How to test

repro.mp4

Sample code from video:

// lib/core-server/build-static.ts | lib/core-server/build-dev.ts
await prompts({
      type: 'confirm',
      name: 'test',
      message: `Do you want to answer?`,
});

// examples/react-ts/main.ts

const throwError = async () => {
  throw new Error('bla');
};

const previewWebpack = true;

if (!previewWebpack) {
  config.webpackFinal = throwError;
} else {
  // @ts-ignore
  config.managerWebpack = throwError;
}

• Is this testable with Jest or Chromatic screenshots?
• Does this need a new example in the kitchen sink apps?
• Does this need an update to the documentation?

If your answer is yes to any of these, please make sure to include it in your PR.

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 1da2437. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

---

✅ Successfully ran 1 target

• nx run-many --target=prepare --all --parallel --max-parallel=15 -- --optimized

---

Sent with 💌 from NxCloud.

[yannbf]

@ndelangen any ideas about the Typescript issues? weird that they don't happen locally while editing or building (but they do when running yarn nx run @storybook/builder-webpack4:prepare --optimized)

[ndelangen]

I think I resolved the typescript issues... I also changed the return type of the builders in case an error occurs. I think in-line with #15885