diff --git a/packages/bundler-webpack/package.json b/packages/bundler-webpack/package.json
index 1b997d2936..0425b1476d 100644
--- a/packages/bundler-webpack/package.json
+++ b/packages/bundler-webpack/package.json
@@ -59,7 +59,7 @@
     "vue-loader": "^17.4.2",
     "vue-router": "^4.3.2",
     "webpack": "^5.91.0",
-    "webpack-chain": "^6.5.1",
+    "webpack-5-chain": "^8.0.2",
     "webpack-dev-server": "^5.0.4",
     "webpack-merge": "^5.10.0"
   },
diff --git a/packages/bundler-webpack/src/build/createClientConfig.ts b/packages/bundler-webpack/src/build/createClientConfig.ts
index cd40685ee4..b64ea26770 100644
--- a/packages/bundler-webpack/src/build/createClientConfig.ts
+++ b/packages/bundler-webpack/src/build/createClientConfig.ts
@@ -3,8 +3,9 @@ import type { App } from '@vuepress/core'
 import { fs } from '@vuepress/utils'
 import CopyWebpackPlugin from 'copy-webpack-plugin'
 import CssMinimizerPlugin from 'css-minimizer-webpack-plugin'
+import type { CssModule } from 'mini-css-extract-plugin'
 import MiniCssExtractPlugin from 'mini-css-extract-plugin'
-import type Config from 'webpack-chain'
+import type Config from 'webpack-5-chain'
 import { createClientBaseConfig } from '../config/index.js'
 import type { WebpackBundlerOptions } from '../types.js'
 import { createClientPlugin } from './ssr/index.js'
@@ -65,7 +66,7 @@ export const createClientConfig = async (
       styles: {
         idHint: 'styles',
         // necessary to ensure async chunks are also extracted
-        test: (m) => /css\/mini-extract/.test(m.type),
+        test: (m: CssModule) => /css\/mini-extract/.test(m.type),
         chunks: 'all',
         enforce: true,
         reuseExistingChunk: true,
diff --git a/packages/bundler-webpack/src/build/createServerConfig.ts b/packages/bundler-webpack/src/build/createServerConfig.ts
index 2574bc785b..0db803831e 100644
--- a/packages/bundler-webpack/src/build/createServerConfig.ts
+++ b/packages/bundler-webpack/src/build/createServerConfig.ts
@@ -1,6 +1,6 @@
 import { createRequire } from 'node:module'
 import type { App } from '@vuepress/core'
-import type Config from 'webpack-chain'
+import type Config from 'webpack-5-chain'
 import { createBaseConfig } from '../config/index.js'
 import type { WebpackBundlerOptions } from '../types.js'
 
diff --git a/packages/bundler-webpack/src/config/createBaseConfig.ts b/packages/bundler-webpack/src/config/createBaseConfig.ts
index f4282af143..b6d8bec3b0 100644
--- a/packages/bundler-webpack/src/config/createBaseConfig.ts
+++ b/packages/bundler-webpack/src/config/createBaseConfig.ts
@@ -1,5 +1,5 @@
 import type { App } from '@vuepress/core'
-import Config from 'webpack-chain'
+import Config from 'webpack-5-chain'
 import type { WebpackBundlerOptions } from '../types.js'
 import { handleDevtool } from './handleDevtool.js'
 import { handleEntry } from './handleEntry.js'
@@ -21,7 +21,7 @@ export const createBaseConfig = async ({
   isBuild: boolean
   isServer: boolean
 }): Promise<Config> => {
-  // create new webpack-chain config
+  // create new webpack-5-chain config
   const config = new Config()
 
   /**
diff --git a/packages/bundler-webpack/src/config/createClientBaseConfig.ts b/packages/bundler-webpack/src/config/createClientBaseConfig.ts
index b071ffd6ac..3dcccffcb4 100644
--- a/packages/bundler-webpack/src/config/createClientBaseConfig.ts
+++ b/packages/bundler-webpack/src/config/createClientBaseConfig.ts
@@ -1,5 +1,5 @@
 import type { App } from '@vuepress/core'
-import type Config from 'webpack-chain'
+import type Config from 'webpack-5-chain'
 import type { WebpackBundlerOptions } from '../types.js'
 import { createBaseConfig } from './createBaseConfig.js'
 
diff --git a/packages/bundler-webpack/src/config/handleDevtool.ts b/packages/bundler-webpack/src/config/handleDevtool.ts
index 7d38a38be7..774e0df405 100644
--- a/packages/bundler-webpack/src/config/handleDevtool.ts
+++ b/packages/bundler-webpack/src/config/handleDevtool.ts
@@ -1,5 +1,5 @@
 import type { App } from '@vuepress/core'
-import type Config from 'webpack-chain'
+import type Config from 'webpack-5-chain'
 
 /**
  * Set webpack devtool
@@ -18,7 +18,6 @@ export const handleDevtool = ({
     config.devtool('source-map')
   } else if (!isBuild) {
     // only enable eval-source-map in dev mode
-    // TODO: remove type assertion when webpack-chain updates its types for webpack 5
-    config.devtool('eval-cheap-module-source-map' as Config.DevTool)
+    config.devtool('eval-cheap-module-source-map')
   }
 }
diff --git a/packages/bundler-webpack/src/config/handleEntry.ts b/packages/bundler-webpack/src/config/handleEntry.ts
index 38a9e6394a..1c2c592b7d 100644
--- a/packages/bundler-webpack/src/config/handleEntry.ts
+++ b/packages/bundler-webpack/src/config/handleEntry.ts
@@ -1,6 +1,6 @@
 import type { App } from '@vuepress/core'
 import { fs } from '@vuepress/utils'
-import type Config from 'webpack-chain'
+import type Config from 'webpack-5-chain'
 
 /**
  * Set webpack entry
diff --git a/packages/bundler-webpack/src/config/handleMode.ts b/packages/bundler-webpack/src/config/handleMode.ts
index 5f12d92682..b0f804b03c 100644
--- a/packages/bundler-webpack/src/config/handleMode.ts
+++ b/packages/bundler-webpack/src/config/handleMode.ts
@@ -1,5 +1,5 @@
 import type { App } from '@vuepress/core'
-import type Config from 'webpack-chain'
+import type Config from 'webpack-5-chain'
 
 /**
  * Set webpack mode
diff --git a/packages/bundler-webpack/src/config/handleModule.ts b/packages/bundler-webpack/src/config/handleModule.ts
index 270dc39a48..fe857c7f11 100644
--- a/packages/bundler-webpack/src/config/handleModule.ts
+++ b/packages/bundler-webpack/src/config/handleModule.ts
@@ -1,5 +1,5 @@
 import type { App } from '@vuepress/core'
-import type Config from 'webpack-chain'
+import type Config from 'webpack-5-chain'
 import type { WebpackBundlerOptions } from '../types.js'
 import { handleModuleAssets } from './handleModuleAssets.js'
 import { handleModuleJs } from './handleModuleJs.js'
diff --git a/packages/bundler-webpack/src/config/handleModuleAssets.ts b/packages/bundler-webpack/src/config/handleModuleAssets.ts
index 277c00acbe..0ccd291938 100644
--- a/packages/bundler-webpack/src/config/handleModuleAssets.ts
+++ b/packages/bundler-webpack/src/config/handleModuleAssets.ts
@@ -1,5 +1,5 @@
 import type { App } from '@vuepress/core'
-import type Config from 'webpack-chain'
+import type Config from 'webpack-5-chain'
 
 /**
  * Set webpack config to handle assets files
@@ -15,8 +15,8 @@ export const handleModuleAssets = ({
   config.module
     .rule('images')
     .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
-    .type('asset' as any)
-    .set('generator', {
+    .type('asset')
+    .generator({
       filename: 'assets/img/[name].[contenthash:8][ext]',
     })
 
@@ -26,8 +26,8 @@ export const handleModuleAssets = ({
   config.module
     .rule('svg')
     .test(/\.(svg)(\?.*)?$/)
-    .type('asset/resource' as any)
-    .set('generator', {
+    .type('asset/resource')
+    .generator({
       filename: 'assets/img/[name].[contenthash:8][ext]',
     })
 
@@ -35,8 +35,8 @@ export const handleModuleAssets = ({
   config.module
     .rule('media')
     .test(/\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/)
-    .type('asset/resource' as any)
-    .set('generator', {
+    .type('asset/resource')
+    .generator({
       filename: 'assets/media/[name].[contenthash:8][ext]',
     })
 
@@ -44,8 +44,8 @@ export const handleModuleAssets = ({
   config.module
     .rule('fonts')
     .test(/\.(woff2?|eot|ttf|otf)(\?.*)?$/i)
-    .type('asset/resource' as any)
-    .set('generator', {
+    .type('asset/resource')
+    .generator({
       filename: 'assets/fonts/[name].[contenthash:8][ext]',
     })
 }
diff --git a/packages/bundler-webpack/src/config/handleModuleJs.ts b/packages/bundler-webpack/src/config/handleModuleJs.ts
index 6e2842e245..d0e3efb386 100644
--- a/packages/bundler-webpack/src/config/handleModuleJs.ts
+++ b/packages/bundler-webpack/src/config/handleModuleJs.ts
@@ -1,5 +1,5 @@
 import { createRequire } from 'node:module'
-import type Config from 'webpack-chain'
+import type Config from 'webpack-5-chain'
 import type { WebpackBundlerOptions } from '../types.js'
 import { resolveEsbuildJsxOptions } from './resolveEsbuildJsxOptions.js'
 
diff --git a/packages/bundler-webpack/src/config/handleModulePug.ts b/packages/bundler-webpack/src/config/handleModulePug.ts
index b2a463d4fe..a19c34a727 100644
--- a/packages/bundler-webpack/src/config/handleModulePug.ts
+++ b/packages/bundler-webpack/src/config/handleModulePug.ts
@@ -1,4 +1,4 @@
-import type Config from 'webpack-chain'
+import type Config from 'webpack-5-chain'
 
 /**
  * Set webpack module to handle pug files
diff --git a/packages/bundler-webpack/src/config/handleModuleStyles.ts b/packages/bundler-webpack/src/config/handleModuleStyles.ts
index 6664e357d8..ea799e5332 100644
--- a/packages/bundler-webpack/src/config/handleModuleStyles.ts
+++ b/packages/bundler-webpack/src/config/handleModuleStyles.ts
@@ -1,7 +1,7 @@
 import { createRequire } from 'node:module'
 import autoprefixer from 'autoprefixer'
 import MiniCssExtractPlugin from 'mini-css-extract-plugin'
-import type Config from 'webpack-chain'
+import type Config from 'webpack-5-chain'
 import type {
   LessLoaderOptions,
   LoaderOptions,
diff --git a/packages/bundler-webpack/src/config/handleModuleTs.ts b/packages/bundler-webpack/src/config/handleModuleTs.ts
index d7048a45bb..74e045a372 100644
--- a/packages/bundler-webpack/src/config/handleModuleTs.ts
+++ b/packages/bundler-webpack/src/config/handleModuleTs.ts
@@ -1,6 +1,6 @@
 import { createRequire } from 'node:module'
 import type { App } from '@vuepress/core'
-import type Config from 'webpack-chain'
+import type Config from 'webpack-5-chain'
 import { resolveEsbuildJsxOptions } from './resolveEsbuildJsxOptions.js'
 
 const require = createRequire(import.meta.url)
diff --git a/packages/bundler-webpack/src/config/handleModuleVue.ts b/packages/bundler-webpack/src/config/handleModuleVue.ts
index 7944309003..ecfdbc7069 100644
--- a/packages/bundler-webpack/src/config/handleModuleVue.ts
+++ b/packages/bundler-webpack/src/config/handleModuleVue.ts
@@ -2,7 +2,7 @@ import { createRequire } from 'node:module'
 import type { App } from '@vuepress/core'
 import { VueLoaderPlugin } from 'vue-loader'
 import type { VueLoaderOptions } from 'vue-loader'
-import type Config from 'webpack-chain'
+import type Config from 'webpack-5-chain'
 import type { WebpackBundlerOptions } from '../types.js'
 
 const require = createRequire(import.meta.url)
diff --git a/packages/bundler-webpack/src/config/handleNode.ts b/packages/bundler-webpack/src/config/handleNode.ts
index 77729ab3c8..5bdb24d63a 100644
--- a/packages/bundler-webpack/src/config/handleNode.ts
+++ b/packages/bundler-webpack/src/config/handleNode.ts
@@ -1,4 +1,4 @@
-import type Config from 'webpack-chain'
+import type Config from 'webpack-5-chain'
 
 /**
  * Set webpack node config
diff --git a/packages/bundler-webpack/src/config/handleOtherOptions.ts b/packages/bundler-webpack/src/config/handleOtherOptions.ts
index 10debc0d79..ef8e1d8816 100644
--- a/packages/bundler-webpack/src/config/handleOtherOptions.ts
+++ b/packages/bundler-webpack/src/config/handleOtherOptions.ts
@@ -1,7 +1,6 @@
 import { createRequire } from 'node:module'
 import type { App } from '@vuepress/core'
-import type { Configuration } from 'webpack'
-import type Config from 'webpack-chain'
+import type Config from 'webpack-5-chain'
 
 const require = createRequire(import.meta.url)
 
@@ -22,12 +21,12 @@ export const handleOtherOptions = ({
   isServer: boolean
 }): void => {
   // set infrastructureLogging options
-  config.set('infrastructureLogging', {
+  config.infrastructureLogging({
     level: app.env.isDebug ? 'info' : 'error',
-  } as Configuration['infrastructureLogging'])
+  })
 
   // set cache options
-  config.set('cache', {
+  config.cache({
     type: 'filesystem',
     cacheDirectory: app.dir.cache(),
     version: JSON.stringify({
@@ -40,5 +39,5 @@ export const handleOtherOptions = ({
       'vue-loader': require('vue-loader/package.json').version,
       'webpack': require('webpack/package.json').version,
     }),
-  } as Configuration['cache'])
+  })
 }
diff --git a/packages/bundler-webpack/src/config/handlePluginDefine.ts b/packages/bundler-webpack/src/config/handlePluginDefine.ts
index 3a603cb458..d118844d48 100644
--- a/packages/bundler-webpack/src/config/handlePluginDefine.ts
+++ b/packages/bundler-webpack/src/config/handlePluginDefine.ts
@@ -1,6 +1,6 @@
 import type { App } from '@vuepress/core'
 import webpack from 'webpack'
-import type Config from 'webpack-chain'
+import type Config from 'webpack-5-chain'
 
 /**
  * Set webpack DefinePlugin
diff --git a/packages/bundler-webpack/src/config/handleResolve.ts b/packages/bundler-webpack/src/config/handleResolve.ts
index 5075bf3a89..6081614be2 100644
--- a/packages/bundler-webpack/src/config/handleResolve.ts
+++ b/packages/bundler-webpack/src/config/handleResolve.ts
@@ -1,5 +1,5 @@
 import type { App } from '@vuepress/core'
-import type Config from 'webpack-chain'
+import type Config from 'webpack-5-chain'
 
 /**
  * Set webpack resolve
diff --git a/packages/bundler-webpack/src/dev/createDevConfig.ts b/packages/bundler-webpack/src/dev/createDevConfig.ts
index c7360de572..99845e6810 100644
--- a/packages/bundler-webpack/src/dev/createDevConfig.ts
+++ b/packages/bundler-webpack/src/dev/createDevConfig.ts
@@ -1,7 +1,7 @@
 import type { App } from '@vuepress/core'
 import HtmlPlugin from 'html-webpack-plugin'
 import webpack from 'webpack'
-import type Config from 'webpack-chain'
+import type Config from 'webpack-5-chain'
 import { createClientBaseConfig } from '../config/index.js'
 import type { WebpackBundlerOptions } from '../types.js'
 
diff --git a/packages/bundler-webpack/src/resolveWebpackConfig.ts b/packages/bundler-webpack/src/resolveWebpackConfig.ts
index ba8999bcd1..ce619b529c 100644
--- a/packages/bundler-webpack/src/resolveWebpackConfig.ts
+++ b/packages/bundler-webpack/src/resolveWebpackConfig.ts
@@ -1,5 +1,5 @@
 import type { Configuration } from 'webpack'
-import type Config from 'webpack-chain'
+import type Config from 'webpack-5-chain'
 import { merge } from 'webpack-merge'
 import type { WebpackBundlerOptions } from './types.js'
 
@@ -17,7 +17,7 @@ export const resolveWebpackConfig = ({
   // allow modifying webpack config via `chainWebpack`
   options.chainWebpack?.(config, isServer, isBuild)
 
-  // generate webpack config from webpack-chain
+  // generate webpack config from webpack-5-chain
   const webpackConfig = config.toConfig()
 
   // allow modifying webpack config via `configureWebpack`
diff --git a/packages/bundler-webpack/src/types.ts b/packages/bundler-webpack/src/types.ts
index b5648d74a1..7cbdbd569e 100644
--- a/packages/bundler-webpack/src/types.ts
+++ b/packages/bundler-webpack/src/types.ts
@@ -3,7 +3,7 @@ import type {
   LoaderContext,
   Configuration as WebpackConfiguration,
 } from 'webpack'
-import type WebpackChainConfig from 'webpack-chain'
+import type WebpackChainConfig from 'webpack-5-chain'
 import type WebpackDevServer from 'webpack-dev-server'
 
 export type {
@@ -27,7 +27,7 @@ export interface WebpackBundlerOptions {
   ) => WebpackConfiguration | void
 
   /**
-   * use webpack-chain to set webpack config
+   * use webpack-5-chain to set webpack config
    */
   chainWebpack?: (
     config: WebpackChainConfig,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 065b3fecf5..84261aede1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -225,9 +225,9 @@ importers:
       webpack:
         specifier: ^5.91.0
         version: 5.91.0(esbuild@0.19.12)
-      webpack-chain:
-        specifier: ^6.5.1
-        version: 6.5.1
+      webpack-5-chain:
+        specifier: ^8.0.2
+        version: 8.0.2
       webpack-dev-server:
         specifier: ^5.0.4
         version: 5.0.4(webpack@5.91.0(esbuild@0.19.12))
@@ -5110,10 +5110,9 @@ packages:
   webidl-conversions@4.0.2:
     resolution: {integrity: sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==}
 
-  webpack-chain@6.5.1:
-    resolution: {integrity: sha512-7doO/SRtLu8q5WM0s7vPKPWX580qhi0/yBHkOxNkv50f6qB76Zy9o2wRTrrPULqYTvQlVHuvbA8v+G5ayuUDsA==}
-    engines: {node: '>=8'}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
+  webpack-5-chain@8.0.2:
+    resolution: {integrity: sha512-gpzlChffrVUu5YwIw9i240/wdcglw53mSEV/7WoK7L/ddfb6Al8/sRjztyPYV8VgJAmkapH5T1AOUfMFryQ/VA==}
+    engines: {node: '>=10'}
 
   webpack-dev-middleware@7.2.1:
     resolution: {integrity: sha512-hRLz+jPQXo999Nx9fXVdKlg/aehsw1ajA9skAneGmT03xwmyuhvF93p6HUKKbWhXdcERtGTzUCtIQr+2IQegrA==}
@@ -10318,7 +10317,7 @@ snapshots:
 
   webidl-conversions@4.0.2: {}
 
-  webpack-chain@6.5.1:
+  webpack-5-chain@8.0.2:
     dependencies:
       deepmerge: 1.5.2
       javascript-stringify: 2.1.0