Webpack

@vuepress/bundler-webpack

Webpack bundler is provided by @vuepress/bundler-webpackopen in new window package. It is a dependency of the vuepress-webpackopen in new window package, and you can also install it separately.

npm i -D @vuepress/bundler-webpack@next

Options

Reference of webpack bundler options:

import { webpackBundler } from '@vuepress/bundler-webpack'
import { defineUserConfig } from '@vuepress/cli'

export default defineUserConfig({
  bundler: webpackBundler({
    postcss: {},
    vue: {},
  }),
})

configureWebpack

  • Type: (config: WebpackConfiguration, isServer: boolean, isBuild: boolean) => WebpackConfiguration | void

  • 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-mergeopen in new window.

chainWebpack

  • Type: (config: WebpackChainConfig, isServer: boolean, isBuild: boolean) => void

  • Details:

    Edit the internal webpack config with webpack-chainopen in new window.

    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.

devServerSetupMiddlewares

vue

postcss

stylus

scss

sass

less

evergreen

  • Type: boolean

  • Default: true

  • Details:

    Set to true if you are only targeting evergreen browsers. This will disable some transpilation and polyfills, and result in faster builds and smaller files.

FAQ

Referencing Public Files after Changing base

Unlike Vite, Webpack won't handle base for public files automatically. So if you change the base of your site, you'd better to use Base Helper when referencing an public image file.

Using with Default Theme

Default theme is using SASSopen in new window as CSS pre-processor, so you might need to install sass-loaderopen in new window as a peer dependency to make it work with Webpack, especially when you are using pnpmopen in new window.