打包工具

VuePress 一直以来都在使用 webpack在新窗口打开作为打包工具来进行网站的开发和构建。从 VuePress v2 开始，也可以支持使用其他工具，如 Vite在新窗口打开等。

尽管社区用户也可以创建打包工具 Package ，但目前我们仅推荐使用由 VuePress 团队提供的打包工具。

Webpack

在使用 vuepress在新窗口打开 Package 时，安装的是 webpack 打包工具：

yarn add -D vuepress@next

npm install -D vuepress@next

你可以在 bundler 配置项中设置你要使用的打包工具名称，或者不设置它，因为在使用 vuepress Package 时， webpack 是默认的打包工具。此时你可以通过 bundlerConfig 配置项来设置 webpack 打包工具的选项：

module.exports = {
  bundler: '@vuepress/webpack',
  bundlerConfig: {
    // webpack 打包工具的选项
  },
}

1
2
3
4
5
6

import { defineUserConfig } from 'vuepress'
import type { DefaultThemeOptions, WebpackBundlerOptions } from 'vuepress'

export default defineUserConfig<DefaultThemeOptions, WebpackBundlerOptions>({
  bundler: '@vuepress/webpack',
  bundlerConfig: {
    // webpack 打包工具的选项
  },
})

1
2
3
4
5
6
7
8
9

Vite

如果想要改为使用 Vite ，你可以切换成 vuepress-vite在新窗口打开 Package ：

yarn add -D vuepress-vite@next

npm install -D vuepress-vite@next

你可以在 bundler 配置项中设置你要使用的打包工具名称，或者不设置它，因为在使用 vuepress-vite Package 时， vite 是默认的打包工具。此时你可以通过 bundlerConfig 配置项来设置 vite 打包工具的选项：

module.exports = {
  bundler: '@vuepress/vite',
  bundlerConfig: {
    // vite 打包工具的选项
  },
}

1
2
3
4
5
6

import { defineUserConfig } from 'vuepress-vite'
import type { DefaultThemeOptions, ViteBundlerOptions } from 'vuepress-vite'

export default defineUserConfig<DefaultThemeOptions, ViteBundlerOptions>({
  bundler: '@vuepress/vite',
  bundlerConfig: {
    // vite 打包工具的选项
  },
})

1
2
3
4
5
6
7
8
9

# 打包工具

# Webpack

# Vite

打包工具

Webpack

Vite