Webpack
Webpack
Webpack 打包工具是由 @vuepress/bundler-webpack 包提供的。
使用方法
安装打包工具:
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-chain 来修改内部的 Webpack 配置。
该配置项接收一个函数,该函数的第一个参数是由
webpack-chain
提供的Config
实例,第二个参数是isServer
标志位,第三个参数是isBuild
标志位。
devServerSetupMiddlewares
类型:
(middlewares: Middleware[], devServer: Server) => Middleware[]
详情:
在 Webpack 的
devServer.setupMiddlewares
中调用的 Hook 。函数的参数即是
devServer.setupMiddlewares
的参数。参考:
vue
类型:
VueLoaderOptions
详情:
vue-loader
的配置项。参考:
postcss
类型:
PostcssLoaderOptions
详情:
postcss-loader
的配置项。参考:
stylus
类型:
StylusLoaderOptions
详情:
stylus-loader
的配置项。参考:
scss
类型:
SassLoaderOptions
详情:
针对
.scss
文件的sass-loader
的配置项。参考:
sass
类型:
SassLoaderOptions
详情:
针对
.sass
文件的sass-loader
的配置项。参考:
less
类型:
LessLoaderOptions
详情:
less-loader
的配置项。参考:
evergreen
类型:
boolean
默认值:
true
详情:
如果你的对象只有那些 “常青树” 浏览器,你可以将其设置成
true
。这将会禁用一些转译过程和 Polyfills ,带来更快的构建速度和更小的文件体积。
常见问题
在修改 base
后引用 Public 文件
与 Vite 不同, Webpack 不会为 Public 文件自动处理 base
。因此如果你修改了网站的 base
,建议你在引用 Public 图片文件时使用 Base Helper。
使用默认主题
默认主题使用 SASS 作为 CSS 预处理器,因此你在使用 Webpack 时(特别是在使用 pnpm 时)可能需要手动安装 sass-loader 来确保其正常工作。