feat: custom webpack config for react/plugins/babel (#16597)

* Allow babel loader options to be configurable

Allow babel loader options to be configurable to support running within a monorepo.

Fixes #16596

* new configuration option in cypress.schema.json

* Revert "new configuration option in cypress.schema.json"

This reverts commit 0a39322.

* support custom webpack configuration via config function

* fix linting issue

* Update getBabelWebpackConfig.js

* linting

Co-authored-by: Lachlan Miller <lachlan.miller.1990@outlook.com>

Author: penx

npm/react/plugins/babel/getBabelWebpackConfig.js

@@ -22,7 +22,28 @@ const webpackConfigLoadsBabel = {
   },
 }
 
-module.exports = (on, config) => {
+/**
+  * `on` and `config` are mandatory and must be forwarded from
+  * your plugins file (`cypress/plugins/index.js` by default).
+  * the third argument is an optional object with a `setWebpackConfig`
+  * property. It's a function that will receive the webpack configuration
+  * (after babel-loader is added) that allows you to further modify
+  * the webpack configuration
+  *
+  * @example
+  * module.exports = (on, config) => {
+  *   require('@cypress/react/plugins/babel')(on, config, {
+  *     setWebpackConfig: (webpackConfig) => {
+  *       webpackConfig.resolve.alias = {
+  *         '@my-monorepo/my-package': '../../my-package/src',
+  *       }
+  *       return webpackConfig
+  *     }
+  *   })
+  *   return config
+  * }
+  */
+module.exports = (on, config, { setWebpackConfig } = { setWebpackConfig: null }) => {
   debug('env object %o', config.env)
 
   debug('initial environments %o', {
@@ -47,5 +68,9 @@ module.exports = (on, config) => {
     NODE_ENV: process.env.NODE_ENV,
   })
 
+  if (setWebpackConfig) {
+    return setWebpackConfig(webpackConfigLoadsBabel)
+  }
+
   return webpackConfigLoadsBabel
 }

npm/react/plugins/babel/index.js

@@ -1,9 +1,9 @@
 const getBabelWebpackConfig = require('./getBabelWebpackConfig')
 const { startDevServer } = require('@cypress/webpack-dev-server')
 
-module.exports = (on, config) => {
+module.exports = (on, config, moduleOptions) => {
   on('dev-server:start', async (options) => {
-    return startDevServer({ options, webpackConfig: getBabelWebpackConfig(on, config) })
+    return startDevServer({ options, webpackConfig: getBabelWebpackConfig(on, config, moduleOptions) })
   })
 
   config.env.reactDevtools = true