Skip to content

Commit 934a32a

Browse files
meteorlxymeteorlxy
committed
docs: bundler guide and reference
1 parent 6701b1e commit 934a32a

File tree

8 files changed

+414
-6
lines changed

8 files changed

+414
-6
lines changed

‎docs/guide/bundler.md

Lines changed: 85 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,87 @@
11
# Bundler
22

3-
> TODO
3+
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.
4+
5+
Although it is possible to create other bundler packages by community users, currently we only suggest to use the bundlers provided by VuePress team.
6+
7+
## Webpack
8+
9+
When using the [vuepress](https://www.npmjs.com/package/vuepress) package, the webpack bundler is installed:
10+
11+
```sh
12+
npm install -D vuepress
13+
```
14+
15+
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:
16+
17+
<CodeGroup>
18+
<CodeGroupItem title="JS" active>
19+
20+
```js
21+
module.exports = {
22+
bundler: '@vuepress/webpack',
23+
bundlerConfig: {
24+
// webpack bundler options
25+
},
26+
}
27+
```
28+
29+
</CodeGroupItem>
30+
31+
<CodeGroupItem title="TS">
32+
33+
```ts
34+
import { defineUserConfig } from 'vuepress'
35+
import type { DefaultThemeOptions, WebpackBundlerOptions } from 'vuepress'
36+
37+
export default defineUserConfig<DefaultThemeOptions, WebpackBundlerOptions>({
38+
bundler: '@vuepress/webpack',
39+
bundlerConfig: {
40+
// webpack bundler options
41+
},
42+
})
43+
```
44+
45+
</CodeGroupItem>
46+
</CodeGroup>
47+
48+
## Vite
49+
50+
If you want to use Vite instead, you can switch to [vuepress-vite](https://www.npmjs.com/package/vuepress-vite) package:
51+
52+
```sh
53+
npm install -D vuepress-vite
54+
```
55+
56+
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:
57+
58+
<CodeGroup>
59+
<CodeGroupItem title="JS" active>
60+
61+
```js
62+
module.exports = {
63+
bundler: '@vuepress/vite',
64+
bundlerConfig: {
65+
// vite bundler options
66+
},
67+
}
68+
```
69+
70+
</CodeGroupItem>
71+
72+
<CodeGroupItem title="TS">
73+
74+
```ts
75+
import { defineUserConfig } from 'vuepress-vite'
76+
import type { DefaultThemeOptions, ViteBundlerOptions } from 'vuepress-vite'
77+
78+
export default defineUserConfig<DefaultThemeOptions, ViteBundlerOptions>({
79+
bundler: '@vuepress/vite',
80+
bundlerConfig: {
81+
// vite bundler options
82+
},
83+
})
84+
```
85+
86+
</CodeGroupItem>
87+
</CodeGroup>

‎docs/reference/bundler/vite.md

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,19 @@
11
# Vite
22

3-
> TODO
3+
## viteOptions
4+
5+
- Details:
6+
7+
Accepts all options of Vite.
8+
9+
- Also see:
10+
- [Vite > Config](https://vitejs.dev/config/)
11+
12+
## vuePluginOptions
13+
14+
- Details:
15+
16+
Accepts all options of [@vitejs/plugin-vue](https://www.npmjs.com/package/@vitejs/plugin-vue).
17+
18+
- Also see:
19+
- [Vite > Plugins > Official Plugins](https://vitejs.dev/plugins/#vitejs-plugin-vue)

‎docs/reference/bundler/webpack.md

Lines changed: 100 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,102 @@
11
# Webpack
22

3-
> TODO
3+
## configureWebpack
4+
5+
- Type: `(config: WebpackConfiguration, isServer: boolean, isBuild: boolean) => WebpackConfiguration`
6+
7+
- Details:
8+
9+
Edit the internal webpack config.
10+
11+
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).
12+
13+
## chainWebpack
14+
15+
- Type: `(config: WebpackChainConfig, isServer: boolean, isBuild: boolean) => void`
16+
17+
- Details:
18+
19+
Edit the internal webpack config with [webpack-chain](https://github.com/mozilla-neutrino/webpack-chain).
20+
21+
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.
22+
23+
## beforeDevServer
24+
25+
- Type: `(expressApp: Application, server: WebpackDevServer) => void`
26+
27+
- Details:
28+
29+
A hook to be called in `devServer.before` of webpack.
30+
31+
The arguments of the function are the first two arguments of `devServer.before`.
32+
33+
- Also see:
34+
- [Webpack > Configuration > DevServer > devServer.before](https://webpack.js.org/configuration/dev-server/#devserverbefore)
35+
36+
## afterDevServer
37+
38+
- Type: `(expressApp: Application, server: WebpackDevServer) => void`
39+
40+
- Details:
41+
42+
A hook to be called in `devServer.after` of webpack.
43+
44+
The arguments of the function are the first two arguments of `devServer.after`.
45+
46+
- Also see:
47+
- [Webpack > Configuration > DevServer > devServer.after](https://webpack.js.org/configuration/dev-server/#devserverafter)
48+
49+
## postcss
50+
51+
- Type: `PostcssLoaderOptions`
52+
53+
- Details:
54+
55+
Options for `postcss-loader`.
56+
57+
- Also see:
58+
- [postcss-loader > Options](https://github.com/webpack-contrib/postcss-loader#options)
59+
60+
## stylus
61+
62+
- Type: `StylusLoaderOptions`
63+
64+
- Details:
65+
66+
Options for `stylus-loader`.
67+
68+
- Also see:
69+
- [stylus-loader > Options](https://github.com/webpack-contrib/stylus-loader#options)
70+
71+
## scss
72+
73+
- Type: `SassLoaderOptions`
74+
75+
- Details:
76+
77+
Options for `sass-loader` for `.scss` files.
78+
79+
- Also see:
80+
- [sass-loader > Options](https://github.com/webpack-contrib/sass-loader#options)
81+
82+
## sass
83+
84+
- Type: `SassLoaderOptions`
85+
86+
- Details:
87+
88+
Options for `sass-loader` for `.sass` files.
89+
90+
- Also see:
91+
- [sass-loader > Options](https://github.com/webpack-contrib/sass-loader#options)
92+
93+
## less
94+
95+
- Type: `LessLoaderOptions`
96+
97+
- Details:
98+
99+
Options for `less-loader`.
100+
101+
- Also see:
102+
- [less-loader > Options](https://github.com/webpack-contrib/less-loader#options)

‎docs/reference/config.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -207,6 +207,11 @@ module.exports = {
207207

208208
Provide config options to the used bundler. The options will vary depending on the bundler you are using.
209209

210+
- Also see:
211+
- [Guide > Bundler](../guide/bundler.md)
212+
- [Bundlers > Webpack](./bundler/webpack.md)
213+
- [Bundlers > Vite](./bundler/vite.md)
214+
210215
## Directory Config
211216

212217
### dest

‎docs/zh/guide/bundler.md

Lines changed: 85 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,87 @@
11
# 打包工具
22

3-
> TODO
3+
VuePress 一直以来都在使用 [webpack](https://webpack.js.org/) 作为打包工具来进行网站的开发和构建。从 VuePress v2 开始，也可以支持使用其他工具，如 [Vite](https://vitejs.dev/) 等。
4+
5+
尽管社区用户也可以创建打包工具 Package ，但目前我们仅推荐使用由 VuePress 团队提供的打包工具。
6+
7+
## Webpack
8+
9+
在使用 [vuepress](https://www.npmjs.com/package/vuepress) Package 时，安装的是 webpack 打包工具：
10+
11+
```sh
12+
npm install -D vuepress
13+
```
14+
15+
你可以在 [bundler](../reference/config.md#bundler) 配置项中设置你要使用的打包工具名称，或者不设置它，因为 webpack 是默认的打包工具。此时你可以通过 [bundlerConfig](../reference/config.md#bundlerconfig) 配置项来设置 [webpack 打包工具的选项](../reference/bundler/webpack.md) ：
16+
17+
<CodeGroup>
18+
<CodeGroupItem title="JS" active>
19+
20+
```js
21+
module.exports = {
22+
bundler: '@vuepress/webpack',
23+
bundlerConfig: {
24+
// webpack 打包工具的选项
25+
},
26+
}
27+
```
28+
29+
</CodeGroupItem>
30+
31+
<CodeGroupItem title="TS">
32+
33+
```ts
34+
import { defineUserConfig } from 'vuepress'
35+
import type { DefaultThemeOptions, WebpackBundlerOptions } from 'vuepress'
36+
37+
export default defineUserConfig<DefaultThemeOptions, WebpackBundlerOptions>({
38+
bundler: '@vuepress/webpack',
39+
bundlerConfig: {
40+
// webpack 打包工具的选项
41+
},
42+
})
43+
```
44+
45+
</CodeGroupItem>
46+
</CodeGroup>
47+
48+
## Vite
49+
50+
如果想要改为使用 Vite ，你可以切换成 [vuepress-vite](https://www.npmjs.com/package/vuepress-vite) Package ：
51+
52+
```sh
53+
npm install -D vuepress-vite
54+
```
55+
56+
接下来，你需要在 [bundler](../reference/config.md#bundler) 配置项中设置你要使用的打包工具名称。此时你可以通过 [bundlerConfig](../reference/config.md#bundlerconfig) 配置项来设置 [vite 打包工具的选项](../reference/bundler/vite.md) ：
57+
58+
<CodeGroup>
59+
<CodeGroupItem title="JS" active>
60+
61+
```js
62+
module.exports = {
63+
bundler: '@vuepress/vite',
64+
bundlerConfig: {
65+
// vite 打包工具的选项
66+
},
67+
}
68+
```
69+
70+
</CodeGroupItem>
71+
72+
<CodeGroupItem title="TS">
73+
74+
```ts
75+
import { defineUserConfig } from 'vuepress-vite'
76+
import type { DefaultThemeOptions, ViteBundlerOptions } from 'vuepress-vite'
77+
78+
export default defineUserConfig<DefaultThemeOptions, ViteBundlerOptions>({
79+
bundler: '@vuepress/vite',
80+
bundlerConfig: {
81+
// vite 打包工具的选项
82+
},
83+
})
84+
```
85+
86+
</CodeGroupItem>
87+
</CodeGroup>

‎docs/zh/reference/bundler/vite.md

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,19 @@
11
# Vite
22

3-
> TODO
3+
## viteOptions
4+
5+
- 详情：
6+
7+
接收 Vite 的所有配置项。
8+
9+
- 参考：
10+
- [Vite > Config](https://vitejs.dev/config/)
11+
12+
## vuePluginOptions
13+
14+
- 详情：
15+
16+
接收 [@vitejs/plugin-vue](https://www.npmjs.com/package/@vitejs/plugin-vue) 的所有配置项。
17+
18+
- 参考：
19+
- [Vite > Plugins > Official Plugins](https://vitejs.dev/plugins/#vitejs-plugin-vue)

0 commit comments

Comments
 (0)