Bump wp-scripts to 22.1.0 and webpack to v5, and enhance webpack related usages

[eason9487]

User story

As a developer, it'd be great

• if there were more productive development tools.
• if we could reduce potential security concerns from dependent packages.
• If we could clear some temporary programs that can be resolved along with the dependent package upgrades.

Describe the solution you'd like

• Upgrade webpack version to v5.x, which is used by @wordpress/scripts since v18.0.1.
• Introduce Fast Refresh for React, which is supported in webpack v5 via @wordpress/scripts v20.0.1+. So that the frontend development experience should be improved.
  • About the Fast Refresh: https://github.com/pmmmwh/react-refresh-webpack-plugin
  • Development only
• Clean up temporary solutions that are no longer needed.

Technical

Shared branch: tweak/1333-wp-scripts-webpack

Stage 1 - Upgrade dependencies

• Upgrade @wordpress/scripts version to 22.1.0 and other packages that depend on it.
• Upgrade webpack config version to v5.x.
• Resolve breaking changes.
• Resolve linting errors.

Stage 2 - Fast Refresh

• Introduce Fast Refresh for React.

Stage 3 - Clean up

• SVG assets resolving and exporting.
• Clean up unneeded and deduplicate npm packages.
• Revert 0167ec4 after getting approval and before merging.

Anything else?

Unknowns

Out of bounds/rabbit holes

[eason9487]

📝 @woocommerce/eslint-plugin 2.0.0 was released a few days ago. Probably we could upgrade eslint and related packages as well.