Webpack

Webpack bundler is provided by @vuepress/bundler-webpack package.

Usage

Install the bundler package:

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

Specify the bundler option in your config file:

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

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

Options

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-merge.

chainWebpack

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

• Details:

  Edit the internal webpack config with webpack-chain.

  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

• Type: (middlewares: Middleware[], devServer: Server) => Middleware[]

• Details:

  A hook to be called in devServer.setupMiddlewares of webpack.

  The arguments of the function are those of devServer.setupMiddlewares.

• Also see:

  • Webpack > Configuration > DevServer > devServer.setupMiddlewares

vue

• Type: VueLoaderOptions

• Details:

  Options for vue-loader.

• Also see:

  • vue-loader > Options Reference

postcss

• Type: PostcssLoaderOptions

• Details:

  Options for postcss-loader.

• Also see:

  • postcss-loader > Options

stylus

• Type: StylusLoaderOptions

• Details:

  Options for stylus-loader.

• Also see:

  • stylus-loader > Options

scss

• Type: SassLoaderOptions

• Details:

  Options for sass-loader for .scss files.

• Also see:

  • sass-loader > Options

sass

• Type: SassLoaderOptions

• Details:

  Options for sass-loader for .sass files.

• Also see:

  • sass-loader > Options

less

• Type: LessLoaderOptions

• Details:

  Options for less-loader.

• Also see:

  • less-loader > Options

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 SASS as CSS pre-processor, so you might need to install sass-loader as a peer dependency to make it work with Webpack, especially when you are using pnpm.