VuePressVuePress
  • 介绍
  • 快速上手
  • 配置
  • 页面
  • Markdown
  • 静态资源
  • 多语言支持
  • 部署
  • 主题
  • 插件
  • 打包工具
  • 从 v1 迁移
  • 常见问题
  • 核心

    • 命令行接口
    • 配置
    • Frontmatter
    • 内置组件
    • 插件 API
    • 主题 API
    • 客户端 API
    • Node API
  • 打包工具

    • Vite
    • Webpack
  • 生态系统

    • 默认主题
    • 插件
  • 深入

    • 架构
    • 开发插件
    • 开发主题
    • Cookbook
  • 其他资源

    • 生态系统
    • 市场
    • 贡献指南
  • 更新日志
  • v1.x
  • v0.x
  • English
  • 简体中文
GitHub
  • 介绍
  • 快速上手
  • 配置
  • 页面
  • Markdown
  • 静态资源
  • 多语言支持
  • 部署
  • 主题
  • 插件
  • 打包工具
  • 从 v1 迁移
  • 常见问题
  • 核心

    • 命令行接口
    • 配置
    • Frontmatter
    • 内置组件
    • 插件 API
    • 主题 API
    • 客户端 API
    • Node API
  • 打包工具

    • Vite
    • Webpack
  • 生态系统

    • 默认主题
    • 插件
  • 深入

    • 架构
    • 开发插件
    • 开发主题
    • Cookbook
  • 其他资源

    • 生态系统
    • 市场
    • 贡献指南
  • 更新日志
  • v1.x
  • v0.x
  • English
  • 简体中文
GitHub
  • 核心

    • 命令行接口
    • 配置
    • Frontmatter
    • 内置组件
    • 插件 API
    • 主题 API
    • 客户端 API
    • Node API
  • 打包工具

    • Vite
    • Webpack
  • 生态系统

    • 默认主题
    • 插件

Webpack

@vuepress/bundler-webpack

Webpack 打包工具是由 @vuepress/bundler-webpack 包提供的。

使用方法

安装打包工具:

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

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

.vuepress/config.ts
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-chain 来修改内部的 Webpack 配置。

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

devServerSetupMiddlewares

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

  • 详情:

    在 Webpack 的 devServer.setupMiddlewares 中调用的 Hook 。

    函数的参数即是 devServer.setupMiddlewares 的参数。

  • 参考:

    • Webpack > Configuration > DevServer > devServer.setupMiddlewares

vue

  • 类型: VueLoaderOptions

  • 详情:

    vue-loader 的配置项。

  • 参考:

    • vue-loader > 选项参考

postcss

  • 类型: PostcssLoaderOptions

  • 详情:

    postcss-loader 的配置项。

  • 参考:

    • postcss-loader > Options

stylus

  • 类型: StylusLoaderOptions

  • 详情:

    stylus-loader 的配置项。

  • 参考:

    • stylus-loader > Options

scss

  • 类型: SassLoaderOptions

  • 详情:

    针对 .scss 文件的 sass-loader 的配置项。

  • 参考:

    • sass-loader > Options

sass

  • 类型: SassLoaderOptions

  • 详情:

    针对 .sass 文件的 sass-loader 的配置项。

  • 参考:

    • sass-loader > Options

less

  • 类型: LessLoaderOptions

  • 详情:

    less-loader 的配置项。

  • 参考:

    • less-loader > Options

evergreen

  • 类型: boolean

  • 默认值: true

  • 详情:

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

常见问题

在修改 base 后引用 Public 文件

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

使用默认主题

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

在 GitHub 上编辑此页
上次更新: 2024/1/26 16:29
贡献者: meteorlxy
Prev
Vite