Webpack TS Configuration Initial Implementation

[AlbertoBrusa]

Background
Webpack now supports configuration written in TypeScript.
Currently, modular-scripts has two folders of JS code copied over from CRA, adapted as needed, to create the Webpack configuration for Modular. Modular's build and start script run JS scripts with execa() to start and build with Webpack.
Problems:

• JavaScript Code outside the /src/ directory - hard to maintain and work on
• Duplicated code - some of these scripts have been translated to TS and placed in /src/ as they are required by other parts of Modular
• Running the scripts with execa() means having to pass all variables as Environment variables

This PR
We now create the Webpack configuration in TypeScript, and run the build and start scripts as functions, passing variables directly.

• No more internal Env variables
• TypeChecking in Webpack configuration
• Moved all scripts into /src/build-scripts where we can manage them better
• react-scripts and react-dev-utils are now integrated in the modular build logic under build-scripts/webpack-scripts/ and match what esbuild-scripts do/how they are called
• Duplicated logic from esbuild and webpack now deduped and placed in common-scripts

To Do:

• Fix CDN rewriting cause it seems very much broken right now (esmView.test.ts)
• Fix conflicts with Support custom public/index.html for esm-views #2282
• Improve folder structure
• Refactor/rename/cleanup

There's still a lot of work to be done in future PRs:

• Still some duplicated pieces of code
• Many scripts still in JS
  • The script that provides the baseConfig for Webpack has a non-typed dependency, and in turn it uses a lot of scripts that have to stay written in JS

Few notes for those reviewing this PR:
Things have been moved around so much that a lot of code appears as 'new', while in fact it's just moved/typed but using existing logic. I've held back from making actual functional code changes to existing scripts unless absolutely necessary.

[changeset-bot]

🦋 Changeset detected

Latest commit: 406fc69

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
modular-scripts	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[AlbertoBrusa]

webpack config type claims async isn't a property of typescript {}

[AlbertoBrusa]

Allowed properties of typescript:

    memoryLimit?: number;
    configFile?: string;
    configOverwrite?: TypeScriptConfigOverwrite;
    context?: string;
    build?: boolean;
    mode?: 'readonly' | 'write-tsbuildinfo' | 'write-dts' | 'write-references';
    diagnosticOptions?: Partial<TypeScriptDiagnosticsOptions>;
    extensions?: {
        vue?: TypeScriptVueExtensionOptions;
    };
    profile?: boolean;
    typescriptPath?: string;

I think we can put this down as a mistake until now uncaught because of lack of typings

[coveralls]

Coverage: 20.348% (-6.4%) from 26.715% when pulling 545b4fe on AlbertoBrusa:webpack-ts into 8439691 on jpmorganchase:feature/v4.2.

[cristiano-belloni]

paths = determineTargetPaths(target, targetPath); in the if branch is repeated in the else branch. Maybe it just needs to be outside the if?

[AlbertoBrusa]

targetPath is updated in one of the two if branches, thus changing the output of determine target branches
It was actually a bug that I took a long time to figure out

[cristiano-belloni]

I see. We'll need to disentangle this code, but not for now. Can you put a //TODO: this needs to be rewritten in a clearer way or something equivalent?

[AlbertoBrusa]

Now that I've revisited it I cleaned it up