Build: Add support for Webpack bundle analyzer

[gziolo]

Description

This PR enabled support for Webpack bundle analyzer hidden behind the environment flag BUNDLE_ANALYZER.

We still need to document this and other env flags we use in the Webpack config.

How has this been tested?

BUNDLE_ANALYZER=1 npm run dev

Screenshots

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.

[gziolo]

Open question is if we want to standardize the name of flags offered inside Webpack config. We have the following:

• BUNDLE_ANALYZER
• SOURCEMAP
• GUTENBERG_LIVE_RELOAD_PORT

Should we prefix all of them with GUTENBERG_ or skip it at all?

Where should we put the documentation? We still need to provide missing docs for the source map and live-reload feature.

[atimmer]

Ooh, I like solving toggling it on and off using environment variables. I am going to copy this for our plugins if you don't mind. I like it!

[atimmer]

Prefixing them with something (in this case GUTENBERG_) is a good idea, because that allows them to be set globally in your environment and not conflict with other environment variables. So if I wanted to always run the live reload on a different port I could set that environment variable in my shell startup file.

The only disadvantage is typing a bit more when running it inline PREFIX_BUNDLE_ANALYZER=1 npm run dev.

[gziolo]

Ooh, I like solving toggling it on and off using environment variables. I am going to copy this for our plugins if you don't mind. I like it!

Sure things, not that I come up with it myself. Calypso has this plugin enabled for long. I just wanted to enable another tool which would help to check if we don't introduce huge deps when bringing in external libraries :)

[noisysocks]

Should we prefix all of them with GUTENBERG_ or skip it at all?

I think prefixing with GUTENBERG_ or WP_ is a good idea for consistency and so that they don't conflict with other environments like @atimmer says.

Wondering also if we should rename SOURCEMAP to SOURCE_MAP or even DEVTOOL for consistency with what the actual Webpack property is.

Where should we put the documentation? We still need to provide missing docs for the source map and live-reload feature.

Not too sure about this. CONTRIBUTING.md is the only place where we touch on build tooling at the moment. Maybe a new Build Tooling section in the handbook underneath Reference is warranted.

[gziolo]

I added prefix GUTENBERG_ to all global variables used in Webpack's config. I also included inline comments to better explain what purpose they play.

We have #8982 files to document how Webpack works, so I will leave a more detailed task to be included there. See #8982 (comment).

Comments addressed