VuePress打包工具

来自泡泡学习笔记
BrainBs讨论 | 贡献2023年8月12日 (六) 15:24的版本 (创建页面,内容为“VuePress 一直以来都在使用 [https://webpack.js.org/ Webpack] 作为打包工具来进行网站的开发和构建。从 VuePress v2 开始,我们还支持使用其他的打包工具,并且现在使用 [https://vitejs.dev/ Vite] 作为默认的打包工具。当然,你仍然可以选择使用 Webpack 。 == 选择一个打包工具 == 在使用 [https://www.npmjs.com/package/vuepress vuepress] 包时,会自动安装和使用 Vite 打包工具。…”)
(差异) ←上一版本 | 最后版本 (差异) | 下一版本→ (差异)
跳到导航 跳到搜索

VuePress 一直以来都在使用 Webpack 作为打包工具来进行网站的开发和构建。从 VuePress v2 开始,我们还支持使用其他的打包工具,并且现在使用 Vite 作为默认的打包工具。当然,你仍然可以选择使用 Webpack 。

选择一个打包工具

在使用 vuepress 包时,会自动安装和使用 Vite 打包工具。

如果你想改为使用 Webpack 打包工具,那么你可以移除它,改为安装 vuepress-webpack 包:


npm uninstall vuepress
npm install -D vuepress-webpack@next

实际上, vuepress 包只是 vuepress-vite 包的一个封装而已。


配置打包工具

一般情况下,你不要任何额外配置就可以使用打包工具,因为我们已经帮你配置好了它们。

通过 bundler 配置项,你可以对打包工具进行进阶配置:

import { viteBundler } from 'vuepress'
// import { webpackBundler } from 'vuepress-webpack'

export default {
  bundler: viteBundler({
    vuePluginOptions: {
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag === 'center',
        },
      },
    },
  }),
}

你可以参考 打包工具 > Vite 和 打包工具 > Webpack 来查看对应打包工具的所有配置项。