跳至主要內容

Webpack

大约 2 分钟

Webpack

@vuepress/bundler-webpack

Webpack 打包工具是由 @vuepress/bundler-webpackopen in new window 包提供的。

使用方法

安装打包工具:

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

在配置文件中指定打包工具:

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

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

配置项

configureWebpack

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

  • 详情:

    用于修改内部的 Webpack 配置。

    该配置项接收一个函数,该函数的第一个参数是 Webpack 配置对象,第二个参数是 isServer 标志位,第三个参数是 isBuild 标志位。

chainWebpack

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

  • 详情:

    通过 webpack-chainopen in new window 来修改内部的 Webpack 配置。

    该配置项接收一个函数,该函数的第一个参数是由 webpack-chain 提供的 Config 实例,第二个参数是 isServer 标志位,第三个参数是 isBuild 标志位。

devServerSetupMiddlewares

vue

postcss

stylus

scss

sass

less

evergreen

  • 类型: boolean

  • 默认值: true

  • 详情:

    如果你的对象只有那些 “常青树” 浏览器,你可以将其设置成 true 。这将会禁用一些转译过程和 Polyfills ,带来更快的构建速度和更小的文件体积。

常见问题

在修改 base 后引用 Public 文件

与 Vite 不同, Webpack 不会为 Public 文件自动处理 base。因此如果你修改了网站的 base,建议你在引用 Public 图片文件时使用 Base Helper

使用默认主题

默认主题使用 SASSopen in new window 作为 CSS 预处理器,因此你在使用 Webpack 时(特别是在使用 pnpmopen in new window 时)可能需要手动安装 sass-loaderopen in new window 来确保其正常工作。