Add preact/debug tools to development version of bundle

[gaambo]

See discussion #219

This PR adds the preact debug tools to the runtime. Webpack now creates two versions of the runtime. A runtime.js including the debugtools and a runtime.min.js without them. Bundle size is nearly the same.

If SCRIPT_DEBUG is set to true, the plugin enqueues the version with debug tools. Both versions are minified.
To make it work I had to extend the webpack config and return multiple configs - that's why common config is stored in a shared config. Also the DefinePlugin is used to build a constant which can be checked in the runtime on whether to import the debug tools or note. preact/debug cannot be externalized and needs to be the first import, that's why a flag is used.

I'm not a webpack expert, so if there's a better way to do it let me know.

How to test:

1. Install the preact devtools
2. Run npm build
3. In .wp-env.json set config.SCRIPT_DEBUG to true
4. Start the local dev environment via wp-env start.
5. Enable "Client side navigation" in the plugins settings
6. Load the frontpage and check that runtime.js was loaded. Preact devtools should be enabled (and not show a warning about missing renderings). Preact devtools should show some directives.
7. In .wp-env.json set config.SCRIPT_DEBUG to false
8. 4. Start the local dev environment via wp-env start.
9. Load the frontpage and check that runtime.min.js was loaded. Preact devtools should not be enabled/active or show a warning about missing renderings.
10. All other things should work as expected (eg client side navigation).

[gziolo]

I don't know how the webpack config works today, but I would imagine that you need to output the development version unminified which probably could be achieved by enforcing the mode field to be development.

[gaambo]

tests are failing at the moment because e2e scripts are now bundled in a seperate webpack conf and therefore don't correctly share the runtime/vendors. i'm working at figuring out how to make the webpack config do what I want and still keep it readable 😅

[gaambo]

I can't get the e2e tests to pass. I'm pretty sure it has something to do with the e2e scripts now having it's own configuration entry in webpack and therefore not having access to the same chunks (vendor) as in trunk atm.
But I can't seem to figure out chunks in webpack correctly - I tried a bunch of methods but none of them worked. Thankful for any help with the webpack configuration (or feedback if this is even the right way to do this).

[luisherranz]

Thanks a lot for this PR, @gaambo.

We're moving everything to Gutenberg, and we'll stop updating this repository at the end of this month (after the 6.3 feature freeze): Tracking Issue.

The SCRIPT_DEBUG global is not available in Gutenberg yet, but @gziolo did a PR to introduce it. Once that PR is merged, we can replicate this there.

[luisherranz]

I'm going to close this issue as part of the migration to the Gutenberg repository.

We will open a new PR for this in Gutenberg once the SCRIPT_DEBUG PR is merged.

Please, go to this discussion to continue the conversation.