Dev server: minimize the "Module not found" error during rebuilds

[vmarta]

When developing our hooks library (commerce-sdk-react) and testing in the test-commerce project, we were seeing Module Not Found error pretty frequently. As a workaround, we had to restart our dev server. But doing so many times hurt our development flow.

I found webpack to be too eager to rebuild the app you're working on, whenever one of our sdk packages is being rebuilt. We needed a way to tell webpack to wait a bit before doing its rebuild. This PR adds a new watch option in the webpack config.

Ticket: W-11767052

Types of Changes

• Bug fix (non-breaking change that fixes an issue)
• New feature (non-breaking change that adds functionality)
• Documentation update
• Breaking change (could cause existing functionality to not work as expected)
• Other changes (non-breaking changes that does not fit any of the above)

Breaking changes include:

• Removing a public function or component or prop
• Adding a required argument to a function
• Changing the data type of a function parameter or return value
• Adding a new peer dependency to package.json

How to Test-Drive This PR

First of all, run the dev server in the test-commerce project, and then run a build watch in our hooks library:

npm ci # at the root of monorepo, to rebuild all the packages
cd packages/test-commerce-sdk-react/
npm start
# Then open up a new terminal window/tab
cd packages/commerce-sdk-react
npm run build:watch

Then in your code editor:

1. Open up one of the files in the package commerce-sdk-react
2. Do a save (yes, no need to write additional code), and that should trigger the build-watch to rebuild the hooks library
3. Verify in your browser that the site is still working OK.

Some variations to try:

• Do a save multiple times in a row ← to simulate developers who love to save their changes often
• If you see the Module Not Found error (it still happens occasionally), see if you do another save, would that fix things?

Checklists

General

• Changes are covered by test cases
• CHANGELOG.md updated with a short description of changes (not required for documentation updates)

Accessibility Compliance

You must check off all items in one of the follow two lists:

• There are no changes to UI

or...

• Changes were tested with a Screen Reader (iOS VoiceOver or Android Talkback) and had no issues
• Changes comply with WCAG 2.0 guidelines levels A and AA
• Changes to common UI patterns and interactions comply with WAI-ARIA best practices

Localization

• Changes include a UI text update in the Retail React App (which requires translation)

[vmarta]

Reference: https://webpack.js.org/configuration/watch/#watchoptionsaggregatetimeout

[kevinxh]

Please also add changelog :)