docs: bundler guide and reference

docs/guide/bundler.md

@@ -1,3 +1,87 @@
 # Bundler
 
-> TODO
+VuePress has been using [webpack](https://webpack.js.org/) as the bundler to dev and build sites. Since VuePress v2, other tools like [Vite](https://vitejs.dev/) are also supported.
+
+Although it is possible to create other bundler packages by community users, currently we only suggest to use the bundlers provided by VuePress team.
+
+## Webpack
+
+When using the [vuepress](https://www.npmjs.com/package/vuepress) package, the webpack bundler is installed:
+
+```sh
+npm install -D vuepress
+```
+
+You can specify the name of the bundler to use in [bundler](../reference/config.md#bundler) option, or omit it because webpack is the default bundler. Then you can set [options of webpack bundler](../reference/bundler/webpack.md) via [bundlerConfig](../reference/config.md#bundlerconfig) option:
+
+<CodeGroup>
+  <CodeGroupItem title="JS" active>
+
+```js
+module.exports = {
+  bundler: '@vuepress/webpack',
+  bundlerConfig: {
+    // webpack bundler options
+  },
+}
+```
+
+  </CodeGroupItem>
+
+  <CodeGroupItem title="TS">
+
+```ts
+import { defineUserConfig } from 'vuepress'
+import type { DefaultThemeOptions, WebpackBundlerOptions } from 'vuepress'
+
+export default defineUserConfig<DefaultThemeOptions, WebpackBundlerOptions>({
+  bundler: '@vuepress/webpack',
+  bundlerConfig: {
+    // webpack bundler options
+  },
+})
+```
+
+  </CodeGroupItem>
+</CodeGroup>
+
+## Vite
+
+If you want to use Vite instead, you can switch to [vuepress-vite](https://www.npmjs.com/package/vuepress-vite) package:
+
+```sh
+npm install -D vuepress-vite
+```
+
+Next, you need to specify the name of the bundler to use in [bundler](../reference/config.md#bundler) option. Then you can set [options of vite bundler](../reference/bundler/vite.md) via [bundlerConfig](../reference/config.md#bundlerconfig) option:
+
+<CodeGroup>
+  <CodeGroupItem title="JS" active>
+
+```js
+module.exports = {
+  bundler: '@vuepress/vite',
+  bundlerConfig: {
+    // vite bundler options
+  },
+}
+```
+
+  </CodeGroupItem>
+
+  <CodeGroupItem title="TS">
+
+```ts
+import { defineUserConfig } from 'vuepress-vite'
+import type { DefaultThemeOptions, ViteBundlerOptions } from 'vuepress-vite'
+
+export default defineUserConfig<DefaultThemeOptions, ViteBundlerOptions>({
+  bundler: '@vuepress/vite',
+  bundlerConfig: {
+    // vite bundler options
+  },
+})
+```
+
+  </CodeGroupItem>
+</CodeGroup>

docs/reference/bundler/vite.md

@@ -1,3 +1,19 @@
 # Vite
 
-> TODO
+## viteOptions
+
+- Details:
+
+  Accepts all options of Vite.
+
+- Also see:
+  - [Vite > Config](https://vitejs.dev/config/)
+
+## vuePluginOptions
+
+- Details:
+
+  Accepts all options of [@vitejs/plugin-vue](https://www.npmjs.com/package/@vitejs/plugin-vue).
+
+- Also see:
+  - [Vite > Plugins > Official Plugins](https://vitejs.dev/plugins/#vitejs-plugin-vue)

docs/reference/bundler/webpack.md

@@ -1,3 +1,102 @@
 # Webpack
 
-> TODO
+## configureWebpack
+
+- Type: `(config: WebpackConfiguration, isServer: boolean, isBuild: boolean) => WebpackConfiguration`
+
+- Details:
+
+  Edit the internal webpack config.
+
+  This option accepts a function that will receive a webpack config object as the 1st argument, an `isServer` flag as the 2nd argument and an `isBuild` flag as the 3rd argument. You can either mutate the config directly, or return an object to be merged by [webpack-merge](https://github.com/survivejs/webpack-merge).
+
+## chainWebpack
+
+- Type: `(config: WebpackChainConfig, isServer: boolean, isBuild: boolean) => void`
+
+- Details:
+
+  Edit the internal webpack config with [webpack-chain](https://github.com/mozilla-neutrino/webpack-chain).
+
+  This option accepts a function that will receive a `Config` instance that provided by `webpack-chain` as the 1st argument an `isServer` flag as the 2nd argument and an `isBuild` flag as the 3rd argument.
+
+## beforeDevServer
+
+- Type: `(expressApp: Application, server: WebpackDevServer) => void`
+
+- Details:
+
+  A hook to be called in `devServer.before` of webpack.
+
+  The arguments of the function are the first two arguments of `devServer.before`.
+
+- Also see:
+  - [Webpack > Configuration > DevServer > devServer.before](https://webpack.js.org/configuration/dev-server/#devserverbefore)
+
+## afterDevServer
+
+- Type: `(expressApp: Application, server: WebpackDevServer) => void`
+
+- Details:
+
+  A hook to be called in `devServer.after` of webpack.
+
+  The arguments of the function are the first two arguments of `devServer.after`.
+
+- Also see:
+  - [Webpack > Configuration > DevServer > devServer.after](https://webpack.js.org/configuration/dev-server/#devserverafter)
+
+## postcss
+
+- Type: `PostcssLoaderOptions`
+
+- Details:
+
+  Options for `postcss-loader`.
+
+- Also see:
+  - [postcss-loader > Options](https://github.com/webpack-contrib/postcss-loader#options)
+
+## stylus
+
+- Type: `StylusLoaderOptions`
+
+- Details:
+
+  Options for `stylus-loader`.
+
+- Also see:
+  - [stylus-loader > Options](https://github.com/webpack-contrib/stylus-loader#options)
+
+## scss
+
+- Type: `SassLoaderOptions`
+
+- Details:
+
+  Options for `sass-loader` for `.scss` files.
+
+- Also see:
+  - [sass-loader > Options](https://github.com/webpack-contrib/sass-loader#options)
+
+## sass
+
+- Type: `SassLoaderOptions`
+
+- Details:
+
+  Options for `sass-loader` for `.sass` files.
+
+- Also see:
+  - [sass-loader > Options](https://github.com/webpack-contrib/sass-loader#options)
+
+## less
+
+- Type: `LessLoaderOptions`
+
+- Details:
+
+  Options for `less-loader`.
+
+- Also see:
+  - [less-loader > Options](https://github.com/webpack-contrib/less-loader#options)

docs/reference/config.md

@@ -207,6 +207,11 @@ module.exports = {
 
   Provide config options to the used bundler. The options will vary depending on the bundler you are using.
 
+- Also see:
+  - [Guide > Bundler](../guide/bundler.md)
+  - [Bundlers > Webpack](./bundler/webpack.md)
+  - [Bundlers > Vite](./bundler/vite.md)
+
 ## Directory Config
 
 ### dest

docs/zh/guide/bundler.md

@@ -1,3 +1,87 @@
 # 打包工具
 
-> TODO
+VuePress 一直以来都在使用 [webpack](https://webpack.js.org/) 作为打包工具来进行网站的开发和构建。从 VuePress v2 开始，也可以支持使用其他工具，如 [Vite](https://vitejs.dev/) 等。 
+
+尽管社区用户也可以创建打包工具 Package ，但目前我们仅推荐使用由 VuePress 团队提供的打包工具。
+
+## Webpack
+
+在使用 [vuepress](https://www.npmjs.com/package/vuepress) Package 时，安装的是 webpack 打包工具：
+
+```sh
+npm install -D vuepress
+```
+
+你可以在 [bundler](../reference/config.md#bundler) 配置项中设置你要使用的打包工具名称，或者不设置它，因为 webpack 是默认的打包工具。此时你可以通过 [bundlerConfig](../reference/config.md#bundlerconfig) 配置项来设置 [webpack 打包工具的选项](../reference/bundler/webpack.md) ：
+
+<CodeGroup>
+  <CodeGroupItem title="JS" active>
+
+```js
+module.exports = {
+  bundler: '@vuepress/webpack',
+  bundlerConfig: {
+    // webpack 打包工具的选项
+  },
+}
+```
+
+  </CodeGroupItem>
+
+  <CodeGroupItem title="TS">
+
+```ts
+import { defineUserConfig } from 'vuepress'
+import type { DefaultThemeOptions, WebpackBundlerOptions } from 'vuepress'
+
+export default defineUserConfig<DefaultThemeOptions, WebpackBundlerOptions>({
+  bundler: '@vuepress/webpack',
+  bundlerConfig: {
+    // webpack 打包工具的选项
+  },
+})
+```
+
+  </CodeGroupItem>
+</CodeGroup>
+
+## Vite
+
+如果想要改为使用 Vite ，你可以切换成 [vuepress-vite](https://www.npmjs.com/package/vuepress-vite) Package ：
+
+```sh
+npm install -D vuepress-vite
+```
+
+接下来，你需要在 [bundler](../reference/config.md#bundler) 配置项中设置你要使用的打包工具名称。此时你可以通过 [bundlerConfig](../reference/config.md#bundlerconfig) 配置项来设置 [vite 打包工具的选项](../reference/bundler/vite.md) ：
+
+<CodeGroup>
+  <CodeGroupItem title="JS" active>
+
+```js
+module.exports = {
+  bundler: '@vuepress/vite',
+  bundlerConfig: {
+    // vite 打包工具的选项
+  },
+}
+```
+
+  </CodeGroupItem>
+
+  <CodeGroupItem title="TS">
+
+```ts
+import { defineUserConfig } from 'vuepress-vite'
+import type { DefaultThemeOptions, ViteBundlerOptions } from 'vuepress-vite'
+
+export default defineUserConfig<DefaultThemeOptions, ViteBundlerOptions>({
+  bundler: '@vuepress/vite',
+  bundlerConfig: {
+    // vite 打包工具的选项
+  },
+})
+```
+
+  </CodeGroupItem>
+</CodeGroup>

docs/zh/reference/bundler/vite.md

@@ -1,3 +1,19 @@
 # Vite
 
-> TODO
+## viteOptions
+
+- 详情：
+
+  接收 Vite 的所有配置项。
+
+- 参考：
+  - [Vite > Config](https://vitejs.dev/config/)
+
+## vuePluginOptions
+
+- 详情：
+
+  接收 [@vitejs/plugin-vue](https://www.npmjs.com/package/@vitejs/plugin-vue) 的所有配置项。
+
+- 参考：
+  - [Vite > Plugins > Official Plugins](https://vitejs.dev/plugins/#vitejs-plugin-vue)