docs: exhibit defineConfig (vitejs#4343)

docs/config/index.md

@@ -55,7 +55,7 @@ Vite also directly supports TS config files. You can use `vite.config.ts` with t
 If the config needs to conditional determine options based on the command (`serve` or `build`) or the [mode](/guide/env-and-mode) being used, it can export a function instead:
 
 ```js
-export default ({ command, mode }) => {
+export default defineConfig(({ command, mode }) => {
   if (command === 'serve') {
     return {
       // serve specific config
@@ -65,15 +65,15 @@ export default ({ command, mode }) => {
       // build specific config
     }
   }
-}
+})
 ```
 
 ### Async Config
 
 If the config needs to call async function, it can export a async function instead:
 
 ```js
-export default async ({ command, mode }) => {
+export default defineConfig(async ({ command, mode }) => {
   const data = await asyncFunction()
   return {
     // build specific config
@@ -242,15 +242,15 @@ export default async ({ command, mode }) => {
   Specify options to pass to CSS pre-processors. Example:
 
   ```js
-  export default {
+  export default defineConfig({
     css: {
       preprocessorOptions: {
         scss: {
           additionalData: `$injectedColor: orange;`
         }
       }
     }
-  }
+  })
   ```
 
 ### json.namedExports
@@ -276,24 +276,24 @@ export default async ({ command, mode }) => {
   `ESBuildOptions` extends [ESbuild's own transform options](https://esbuild.github.io/api/#transform-api). The most common use case is customizing JSX:
 
   ```js
-  export default {
+  export default defineConfig({
     esbuild: {
       jsxFactory: 'h',
       jsxFragment: 'Fragment'
     }
-  }
+  })
   ```
 
   By default, ESBuild is applied to `ts`, `jsx` and `tsx` files. You can customize this with `esbuild.include` and `esbuild.exclude`, both of which expect type of `string | RegExp | (string | RegExp)[]`.
 
   In addition, you can also use `esbuild.jsxInject` to automatically inject JSX helper imports for every file transformed by ESBuild:
 
   ```js
-  export default {
+  export default defineConfig({
     esbuild: {
       jsxInject: `import React from 'react'`
     }
-  }
+  })
   ```
 
   Set to `false` to disable ESbuild transforms.
@@ -374,11 +374,11 @@ export default async ({ command, mode }) => {
   **Example:**
 
   ```js
-  export default {
+  export default defineConfig({
     server: {
       open: '/docs/index.html'
     }
-  }
+  })
   ```
 
 ### server.proxy
@@ -392,7 +392,7 @@ export default async ({ command, mode }) => {
   **Example:**
 
   ```js
-  export default {
+  export default defineConfig({
     server: {
       proxy: {
         // string shorthand
@@ -419,7 +419,7 @@ export default async ({ command, mode }) => {
         }
       }
     }
-  }
+  })
   ```
 
 ### server.cors
@@ -514,14 +514,14 @@ createServer()
   Accepts a path to specify the custom workspace root. Could be a absolute path or a path relative to [project root](/guide/#index-html-and-project-root). For example
 
   ```js
-  export default {
+  export default defineConfig({
     server: {
       fs: {
         // Allow serving files from one level up to the project root
         allow: ['..']
       }
     }
-  }
+  })
   ```
 
 ## Build Options

docs/guide/api-plugin.md

@@ -34,9 +34,9 @@ Users will add plugins to the project `devDependencies` and configure them using
 import vitePlugin from 'vite-plugin-feature'
 import rollupPlugin from 'rollup-plugin-feature'
 
-export default {
+export default defineConfig({
   plugins: [vitePlugin(), rollupPlugin()]
-}
+})
 ```
 
 Falsy plugins will be ignored, which can be used to easily activate or deactivate plugins.
@@ -55,11 +55,12 @@ export default function framework(config) {
 
 ```js
 // vite.config.js
+import { defineConfig } from 'vite'
 import framework from 'vite-plugin-framework'
 
-export default {
+export default defineConfig({
   plugins: [framework()]
-}
+})
 ```
 
 ## Simple Examples
@@ -429,16 +430,17 @@ You can also augment an existing Rollup plugin with Vite-only properties:
 ```js
 // vite.config.js
 import example from 'rollup-plugin-example'
+import { defineConfig } from 'vite'
 
-export default {
+export default defineConfig({
   plugins: [
     {
       ...example(),
       enforce: 'post',
       apply: 'build'
     }
   ]
-}
+})
 ```
 
 Check out [Vite Rollup Plugins](https://vite-rollup-plugins.patak.dev) for a list of compatible official Rollup plugins with usage instructions.

docs/guide/backend-integration.md

@@ -8,7 +8,7 @@ Or you can follow these steps to configure it manually:
 
    ```js
    // vite.config.js
-   export default {
+   export default defineConfig({
      build: {
        // generate manifest.json in outDir
        manifest: true,
@@ -17,7 +17,7 @@ Or you can follow these steps to configure it manually:
          input: '/path/to/main.js'
        }
      }
-   }
+   })
    ```
 
    If you use [`@vitejs/plugin-legacy`](https://github.com/vitejs/vite/tree/main/packages/plugin-legacy) or manually enable the [`build.dynamicImportPolyfill` option](/config/#build-polyfilldynamicimport), remember to add the [dynamic import polyfill](/config/#build-polyfilldynamicimport) to your entry, since it will no longer be auto-injected:

docs/guide/build.md

@@ -32,13 +32,13 @@ The build can be customized via various [build config options](/config/#build-op
 
 ```js
 // vite.config.js
-module.exports = {
+module.exports = defineConfig({
   build: {
     rollupOptions: {
       // https://rollupjs.org/guide/en/#big-list-of-options
     }
   }
-}
+})
 ```
 
 For example, you can specify multiple Rollup outputs with plugins that are only applied during build.
@@ -49,13 +49,13 @@ You can enable rollup watcher with `vite build --watch`. Or, you can directly ad
 
 ```js
 // vite.config.js
-module.exports = {
+module.exports = defineConfig({
   build: {
     watch: {
       // https://rollupjs.org/guide/en/#watch-options
     }
   }
-}
+})
 ```
 
 ## Multi-Page App
@@ -79,8 +79,9 @@ During build, all you need to do is to specify multiple `.html` files as entry p
 ```js
 // vite.config.js
 const { resolve } = require('path')
+const { defineConfig } = require('vite')
 
-module.exports = {
+module.exports = defineConfig({
   build: {
     rollupOptions: {
       input: {
@@ -89,7 +90,7 @@ module.exports = {
       }
     }
   }
-}
+})
 ```
 
 If you specify a different root, remember that `__dirname` will still be the folder of your vite.config.js file when resolving the input paths. Therefore, you will need to add your `root` entry to the arguments for `resolve`.
@@ -103,13 +104,14 @@ When it is time to bundle your library for distribution, use the [`build.lib` co
 ```js
 // vite.config.js
 const path = require('path')
+const { defineConfig } = require('vite')
 
-module.exports = {
+module.exports = defineConfig({
   build: {
     lib: {
       entry: path.resolve(__dirname, 'lib/main.js'),
       name: 'MyLib',
-      fileName: format => `my-lib.${format}.js`  
+      fileName: (format) => `my-lib.${format}.js`
     },
     rollupOptions: {
       // make sure to externalize deps that shouldn't be bundled
@@ -124,7 +126,7 @@ module.exports = {
       }
     }
   }
-}
+})
 ```
 
 Running `vite build` with this config uses a Rollup preset that is oriented towards shipping libraries and produces two bundle formats: `es` and `umd` (configurable via `build.lib`):

docs/guide/features.md

@@ -78,12 +78,12 @@ If not using JSX with React or Vue, custom `jsxFactory` and `jsxFragment` can be
 
 ```js
 // vite.config.js
-export default {
+export default defineConfig({
   esbuild: {
     jsxFactory: 'h',
     jsxFragment: 'Fragment'
   }
-}
+})
 ```
 
 More details in [esbuild docs](https://esbuild.github.io/content-types/#jsx).
@@ -92,11 +92,11 @@ You can inject the JSX helpers using `jsxInject` (which is a Vite-only option) t
 
 ```js
 // vite.config.js
-export default {
+export default defineConfig({
   esbuild: {
     jsxInject: `import React from 'react'`
   }
-}
+})
 ```
 
 ## CSS

docs/guide/migration.md

@@ -53,10 +53,11 @@ Vite 2.0 core is now framework agnostic. Vue support is now provided via [`@vite
 
 ```js
 import vue from '@vitejs/plugin-vue'
+import { defineConfig } from 'vite'
 
-export default {
+export default defineConfig({
   plugins: [vue()]
-}
+})
 ```
 
 ### Custom Blocks Transforms
@@ -66,6 +67,7 @@ A custom plugin can be used to transform Vue custom blocks like the one below:
 ```ts
 // vite.config.js
 import vue from '@vitejs/plugin-vue'
+import { defineConfig } from 'vite'
 
 const vueI18nPlugin = {
   name: 'vue-i18n',
@@ -82,9 +84,9 @@ const vueI18nPlugin = {
   }
 }
 
-export default {
+export default defineConfig({
   plugins: [vue(), vueI18nPlugin]
-}
+})
 ```
 
 ## React Support

docs/guide/using-plugins.md

@@ -13,14 +13,15 @@ $ npm i -D @vitejs/plugin-legacy
 ```js
 // vite.config.js
 import legacy from '@vitejs/plugin-legacy'
+import { defineConfig } from 'vite'
 
-export default {
+export default defineConfig({
   plugins: [
     legacy({
       targets: ['defaults', 'not IE 11']
     })
   ]
-}
+})
 ```
 
 `plugins` also accept presets including several plugins as a single element. This is useful for complex features (like framework integration) that are implemented using several plugins. The array will be flattened internally.
@@ -48,15 +49,16 @@ For compatibility with some Rollup plugins, it may be needed to enforce the orde
 ```js
 // vite.config.js
 import image from '@rollup/plugin-image'
+import { defineConfig } from 'vite'
 
-export default {
+export default defineConfig({
   plugins: [
     {
       ...image(),
       enforce: 'pre'
     }
   ]
-}
+})
 ```
 
 Check out [Plugins API Guide](./api-plugin.md#plugin-ordering) for detailed information, and look out for the `enforce` label and usage instructions for popular plugins in the [Vite Rollup Plugins](https://vite-rollup-plugins.patak.dev) compatibility listing.
@@ -68,15 +70,16 @@ By default, plugins are invoked for both serve and build. In cases where a plugi
 ```js
 // vite.config.js
 import typescript2 from 'rollup-plugin-typescript2'
+import { defineConfig } from 'vite'
 
-export default {
+export default defineConfig({
   plugins: [
     {
       ...typescript2(),
       apply: 'build'
     }
   ]
-}
+})
 ```
 
 ## Building Plugins