feat(core)!: refine bundler options

packages/bundler-vite/src/index.ts

@@ -1,5 +1,9 @@
+import { mergeConfig } from 'vite'
+
 import { viteBundler } from './viteBundler.js'
 
 export type * from './types.js'
 export * from './viteBundler.js'
+
+export { mergeConfig as viteMergeConfig, viteBundler }
 export default viteBundler

packages/bundler-vite/src/resolveViteConfig.ts

@@ -22,8 +22,9 @@ export const resolveViteConfig = ({
   options: ViteBundlerOptions
   isBuild: boolean
   isServer: boolean
-}): InlineConfig =>
-  mergeConfig(
+}): InlineConfig => {
+  // generate base vite config
+  let viteConfig = mergeConfig(
     {
       clearScreen: false,
       configFile: false,
@@ -43,3 +44,18 @@ export const resolveViteConfig = ({
     // some vite options would not take effect inside a plugin, so we still need to merge them here in addition to userConfigPlugin
     options.viteOptions ?? {},
   )
+
+  // allow modifying vite config via `configureVite`
+  const configureViteResult = options.configureVite?.(
+    viteConfig,
+    isServer,
+    isBuild,
+  )
+
+  // if `configureVite` returns a configuration object, use it as the new vite config
+  if (configureViteResult) {
+    viteConfig = configureViteResult
+  }
+
+  return viteConfig
+}

packages/bundler-vite/src/types.ts

@@ -6,6 +6,25 @@ import type { InlineConfig } from 'vite'
  * Options for bundler-vite
  */
 export interface ViteBundlerOptions extends BundlerOptions {
+  /**
+   * Vite options
+   */
   viteOptions?: InlineConfig
+  /**
+   * Options for @vitejs/plugin-vue
+   */
   vuePluginOptions?: VuePluginOptions
+  /**
+   * Modify Vite config
+   *
+   * @param config - Vite config
+   * @param isServer - Whether it is server bundle
+   * @param isBuild - Whether in build mode
+   * @returns if returns a configuration object, it will be used as the new vite config, otherwise the original config object will be used
+   */
+  configureVite?: (
+    config: InlineConfig,
+    isServer: boolean,
+    isBuild: boolean,
+  ) => InlineConfig | void
 }

packages/bundler-vite/src/viteBundler.ts

@@ -6,6 +6,7 @@ import type { ViteBundlerOptions } from './types.js'
 
 export const viteBundler = (options: ViteBundlerOptions = {}): Bundler => ({
   name: '@vuepress/bundler-vite',
+  type: 'vite',
   dev: async (app) => dev(options, app),
   build: async (app) => build(options, app),
 })

packages/bundler-webpack/src/index.ts

@@ -1,5 +1,9 @@
+import { merge } from 'webpack-merge'
+
 import { webpackBundler } from './webpackBundler.js'
 
 export type * from './types.js'
 export * from './webpackBundler.js'
+
+export { merge as webpackMergeConfig, webpackBundler }
 export default webpackBundler

packages/bundler-webpack/src/resolveWebpackConfig.ts

@@ -1,5 +1,4 @@
 import type { Configuration } from 'webpack'
-import { merge } from 'webpack-merge'
 import type { Config } from 'webpack-v5-chain'
 
 import type { WebpackBundlerOptions } from './types.js'
@@ -19,7 +18,7 @@ export const resolveWebpackConfig = ({
   options.chainWebpack?.(config, isServer, isBuild)
 
   // generate webpack config from webpack-v5-chain
-  const webpackConfig = config.toConfig()
+  let webpackConfig = config.toConfig()
 
   // allow modifying webpack config via `configureWebpack`
   const configureWebpackResult = options.configureWebpack?.(
@@ -28,10 +27,9 @@ export const resolveWebpackConfig = ({
     isBuild,
   )
 
-  // if `configureWebpack` returns a configuration object,
-  // use webpack-merge to merge it
+  // if `configureWebpack` returns a configuration object, use this object as the new webpack config
   if (configureWebpackResult) {
-    return merge(webpackConfig, configureWebpackResult)
+    webpackConfig = configureWebpackResult
   }
 
   return webpackConfig

packages/bundler-webpack/src/types.ts

@@ -20,6 +20,11 @@ export type {
 export interface WebpackBundlerOptions extends BundlerOptions {
   /**
    * use webpack-merge to set webpack config
+   *
+   * @param config - Webpack config
+   * @param isServer - Whether it is server bundle
+   * @param isBuild - Whether in build mode
+   * @returns if returns a configuration object, it will be used as the new webpack config, otherwise the original config object will be used
    */
   configureWebpack?: (
     config: WebpackConfiguration,

packages/bundler-webpack/src/webpackBundler.ts

@@ -8,6 +8,7 @@ export const webpackBundler = (
   options: WebpackBundlerOptions = {},
 ): Bundler => ({
   name: '@vuepress/bundler-webpack',
+  type: 'webpack',
   dev: async (app) => dev(options, app),
   build: async (app) => build(options, app),
 })

packages/core/src/app/resolveAppMarkdown.ts

@@ -19,7 +19,7 @@ export const resolveAppMarkdown = async (app: App): Promise<Markdown> => {
   if (app.options.markdown.assets !== false) {
     app.options.markdown.assets ??= {}
     app.options.markdown.assets.absolutePathPrependBase ??=
-      app.options.bundler.name === '@vuepress/bundler-webpack'
+      app.options.bundler.type === 'webpack'
   }
 
   const markdown = createMarkdown(app.options.markdown)

packages/core/src/types/bundler.ts

@@ -13,6 +13,11 @@ export interface Bundler {
    */
   name: string
 
+  /**
+   * Type of the bundler, e.g. 'vite' or 'webpack'
+   */
+  type: string
+
   /**
    * Method to run vuepress app in dev mode, starting dev server
    */

packages/core/tests/app/resolveAppOptions.spec.ts

@@ -11,7 +11,7 @@ it('should create app options with default values', () => {
     resolveAppOptions({
       source,
       theme: { name: 'theme' },
-      bundler: { name: 'bundler' } as Bundler,
+      bundler: { name: 'bundler', type: 'vite' } as Bundler,
     }),
   ).toEqual({
     base: '/',
@@ -23,7 +23,7 @@ it('should create app options with default values', () => {
       '/': { lang: 'en-US', title: '', description: '' },
     },
     theme: { name: 'theme' },
-    bundler: { name: 'bundler' },
+    bundler: { name: 'bundler', type: 'vite' },
     source,
     dest: path.resolve(source, '.vuepress/dist'),
     temp: path.resolve(source, '.vuepress/.temp'),