feat(bundler-webpack): replace webpack-chain with webpack-5-chain (close #1503) (#1566)

Co-authored-by: meteorlxy <[email protected]>

Author: Mister-Hope

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"
   },

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,

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'
 

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()
 
   /**

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'
 

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')
   }
 }

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

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

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'

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,26 +26,26 @@ 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]',
     })
 
   // media
   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]',
     })
 
   // fonts
   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]',
     })
 }