docs: add dev server function config API (#4699)

* docs: add dev server function config API

* update docs

content/guides/component-testing/component-framework-configuration.md

@@ -215,6 +215,15 @@ module.exports = defineConfig({
     devServer: {
       framework: 'react',
       bundler: 'vite',
+      // optionally pass in vite config
+      viteConfig: require('./webpack.config'),
+      // or a function - the result is merged with
+      // any `vite.config` file that is detected
+      viteConfig: async () => {
+        // ... do things ...
+        const modifiedConfig = await injectCustomConfig(baseConfig)
+        return modifiedConfig
+      },
     },
   },
 })
@@ -225,12 +234,22 @@ module.exports = defineConfig({
 
 ```ts
 import { defineConfig } from 'cypress'
+import customViteConfig from './customConfig'
 
 export default defineConfig({
   component: {
     devServer: {
       framework: 'react',
       bundler: 'vite',
+      // optionally pass in vite config
+      viteConfig: customViteConfig,
+      // or a function - the result is merged with
+      // any `vite.config` file that is detected
+      viteConfig: async () => {
+        // ... do things ...
+        const modifiedConfig = await injectCustomConfig(baseConfig)
+        return modifiedConfig
+      },
     },
   },
 })
@@ -260,6 +279,13 @@ module.exports = {
       bundler: 'webpack',
       // optionally pass in webpack config
       webpackConfig: require('./webpack.config'),
+      // or a function - the result is merged with any
+      // webpack.config that is found
+      webpackConfig: async () => {
+        // ... do things ...
+        const modifiedConfig = await injectCustomConfig(baseConfig)
+        return modifiedConfig
+      },
     },
   },
 }
@@ -279,6 +305,13 @@ export default defineConfig({
       bundler: 'webpack',
       // optionally pass in webpack config
       webpackConfig,
+      // or a function - the result is merged with any
+      // webpack.config that is found
+      webpackConfig: async () => {
+        // ... do things ...
+        const modifiedConfig = await injectCustomConfig(baseConfig)
+        return modifiedConfig
+      },
     },
   },
 })
@@ -472,6 +505,13 @@ module.exports = {
       bundler: 'webpack',
       // optionally pass in webpack config
       webpackConfig: require('./webpack.config'),
+      // or a function - the result is merged with any
+      // webpack.config that is found
+      webpackConfig: async () => {
+        // ... do things ...
+        const modifiedConfig = await injectCustomConfig(baseConfig)
+        return modifiedConfig
+      },
     },
   },
 }
@@ -491,6 +531,11 @@ export default defineConfig({
       bundler: 'webpack',
       // optionally pass in webpack config
       webpackConfig,
+      webpackConfig: async () => {
+        // ... do things ...
+        const modifiedConfig = await injectCustomConfig(baseConfig)
+        return modifiedConfig
+      },
     },
   },
 })
@@ -675,6 +720,12 @@ module.exports = {
       bundler: 'webpack',
       // optionally pass in webpack config
       webpackConfig: require('./webpack.config'),
+      // or a function - the result is merged with the base config
+      webpackConfig: async () => {
+        // ... do things ...
+        const modifiedConfig = await injectCustomConfig(baseConfig)
+        return modifiedConfig
+      },
     },
   },
 }