打包工具

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

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

Webpack

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

  1. npm install -D vuepress

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

  • JS
  • TS
  1. module.exports = {
  2.   bundler: '@vuepress/webpack',
  3.   bundlerConfig: {
  4.     // webpack 打包工具的选项
  5.   },
  6. }
  1. import { defineUserConfig } from 'vuepress'
  2. import type { DefaultThemeOptions, WebpackBundlerOptions } from 'vuepress'
  4. export default defineUserConfig<DefaultThemeOptions, WebpackBundlerOptions>({
  5.   bundler: '@vuepress/webpack',
  6.   bundlerConfig: {
  7.     // webpack 打包工具的选项
  8.   },
  9. })

Vite

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

  1. npm install -D vuepress-vite

接下来，你需要在 bundler 配置项中设置你要使用的打包工具名称。此时你可以通过 bundlerConfig 配置项来设置 vite 打包工具的选项 ：

  • JS
  • TS
  1. module.exports = {
  2.   bundler: '@vuepress/vite',
  3.   bundlerConfig: {
  4.     // vite 打包工具的选项
  5.   },
  6. }
  1. import { defineUserConfig } from 'vuepress-vite'
  2. import type { DefaultThemeOptions, ViteBundlerOptions } from 'vuepress-vite'
  4. export default defineUserConfig<DefaultThemeOptions, ViteBundlerOptions>({
  5.   bundler: '@vuepress/vite',
  6.   bundlerConfig: {
  7.     // vite 打包工具的选项
  8.   },
  9. })