Improve source map quality for development

Feature Description

Source maps let us inspect the original source files from JS modules that have been bundled together (for us, using Webpack). Webpack exposes quite a few options for different source map strategies via the devtool configuration option which have different costs in terms of the quality of the information included and the time it adds to the build.

We currently use the cheap-source-map option as part of our build script: https://github.com/google/site-kit-wp/blob/6123efaea980ad2c4179a2995b1d7c6178b010da/package.json#L9

This option has good performance for the initial build but slow rebuilds. It also only provides transformed (i.e. transpiled) code, which can make it difficult to track down the real source code. For example, in React all JSX would be shown as React.createElement calls, which is not ideal.

We should consider changing our source map configuration used for development, which provides the original source, rather than transformed lines. In initial testing cheap-module-eval-source-map seems like a good option without too much additional overhead in the initial build, and is faster that what we have now for rebuilds.

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• The default options used for the development build should be updated to generate a higher quality source map that provides original source (can be lines only)
  • E.g. for React, the source map should show the source JSX rather than createElement calls
• A sensible default should be chosen to minimize the impact on build and rebuild times (see the table here for a full comparison) – we can always override this as part of the build command with a different value that does not require code changes

Implementation Brief

• Update the build:dev command to use cheap-module-eval-source-map instead of cheap-source-map.
• Remove the --debug flag from the build:dev command.
• Add a new option sourceMap to the babel config in the webpack.config.js file with mode !== 'production' value: https://github.com/google/site-kit-wp/blob/f54254f2bf2e71d6660c4f5f3510c89027a048bd/webpack.config.js#L105-L110
• Update the sourceMap property of the TerserPlugin plugin to have the same mode !== 'production' value: https://github.com/google/site-kit-wp/blob/f54254f2bf2e71d6660c4f5f3510c89027a048bd/webpack.config.js#L293

Test Coverage

• N/A

Visual Regression Changes

• N/A

QA Brief

• Build development assets and verify that you can see the original sources when you open a script in the “Sources” tab of the developer tools:

Changelog entry

• N/A

[johnPhillips]

QA ✅

I used a diffing tool to verify that the source code in dev tools was identical to the original source files.

[aaemnnosttv]

IB ✅