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

Co-authored-by: meteorlxy <meteor.lxy@foxmail.com>

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

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'
 

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

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,

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)

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)

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

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

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

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

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'
 

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`

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,