Bundler

VuePress has been using Webpack as the bundler to dev and build sites. Since VuePress v2, other bundlers are also supported, and now we are using Vite as the default bundler. Of course, you can still choose to use Webpack.

Choose a Bundler

When using the vuepress package, Vite bundler is installed and used automatically.

If you want to use Webpack bundler instead, you can remove it and install the vuepress-webpack package instead:

pnpm remove vuepress
pnpm add -D vuepress-webpack@next

yarn remove vuepress
yarn add -D vuepress-webpack@next

npm uninstall vuepress
npm install -D vuepress-webpack@next

prompt

In fact, the vuepress package is just a wrapper of the vuepress-vite package.

Configure Bundler

Generally, you could use a bundler without extra configuration, because we have already configured them properly to work with VuePress.

You can configure bundler for advanced usage via the bundler option:

import { viteBundler } from 'vuepress'
// import { webpackBundler } from 'vuepress-webpack'

export default {
  bundler: viteBundler({
    vuePluginOptions: {
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag === 'center',
        },
      },
    },
  }),
}

You can refer to Bundlers > Vite and Bundlers > Webpack to check out all options of the corresponding bundler.