refactor(bundler-webpack): replace webpack-5-chain with webpack-v5-chain (#1650)

Author: Mister-Hope

packages/bundler-webpack/package.json

@@ -60,9 +60,9 @@
     "vue-loader": "^17.4.2",
     "vue-router": "catalog:",
     "webpack": "^5.99.7",
-    "webpack-5-chain": "^8.0.2",
     "webpack-dev-server": "^5.2.1",
-    "webpack-merge": "^6.0.1"
+    "webpack-merge": "^6.0.1",
+    "webpack-v5-chain": "^1.0.0"
   },
   "publishConfig": {
     "access": "public"

packages/bundler-webpack/src/build/createClientConfig.ts

@@ -5,7 +5,7 @@ import CopyWebpackPlugin from 'copy-webpack-plugin'
 import CssMinimizerPlugin from 'css-minimizer-webpack-plugin'
 import MiniCssExtractPlugin from 'mini-css-extract-plugin'
 import type { Module } from 'webpack'
-import type Config from 'webpack-5-chain'
+import type { Config } from 'webpack-v5-chain'
 import { createClientBaseConfig } from '../config/index.js'
 import type { WebpackBundlerOptions } from '../types.js'
 import { createClientPlugin } from './createClientPlugin.js'

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-5-chain'
+import type { Config } from 'webpack-v5-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-5-chain'
+import { Config } from 'webpack-v5-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-5-chain config
+  // create new webpack-v5-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-5-chain'
+import type { Config } from 'webpack-v5-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-5-chain'
+import type { Config } from 'webpack-v5-chain'
 
 /**
  * Set webpack devtool

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-5-chain'
+import type { Config } from 'webpack-v5-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-5-chain'
+import type { Config } from 'webpack-v5-chain'
 
 /**
  * Set webpack mode

packages/bundler-webpack/src/config/handleModule.ts

@@ -1,4 +1,4 @@
-import type Config from 'webpack-5-chain'
+import type { Config } from 'webpack-v5-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,4 +1,4 @@
-import type Config from 'webpack-5-chain'
+import type { Config } from 'webpack-v5-chain'
 
 /**
  * Set webpack config to handle assets files

packages/bundler-webpack/src/config/handleModuleJs.ts

@@ -1,5 +1,5 @@
 import { createRequire } from 'node:module'
-import type Config from 'webpack-5-chain'
+import type { Config } from 'webpack-v5-chain'
 import type { WebpackBundlerOptions } from '../types.js'
 import { resolveEsbuildLoaderOptions } from './resolveEsbuildLoaderOptions.js'
 

packages/bundler-webpack/src/config/handleModulePug.ts

@@ -1,4 +1,4 @@
-import type Config from 'webpack-5-chain'
+import type { Config } from 'webpack-v5-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-5-chain'
+import type { Config } from 'webpack-v5-chain'
 import type {
   StylePreprocessorLoaderOptions,
   WebpackBundlerOptions,

packages/bundler-webpack/src/config/handleModuleTs.ts

@@ -1,5 +1,5 @@
 import { createRequire } from 'node:module'
-import type Config from 'webpack-5-chain'
+import type { Config } from 'webpack-v5-chain'
 import { resolveEsbuildLoaderOptions } from './resolveEsbuildLoaderOptions.js'
 
 const require = createRequire(import.meta.url)

packages/bundler-webpack/src/config/handleModuleVue.ts

@@ -1,7 +1,7 @@
 import { createRequire } from 'node:module'
 import type { VueLoaderOptions } from 'vue-loader'
 import { VueLoaderPlugin } from 'vue-loader'
-import type Config from 'webpack-5-chain'
+import type { Config } from 'webpack-v5-chain'
 import type { WebpackBundlerOptions } from '../types.js'
 
 const require = createRequire(import.meta.url)

packages/bundler-webpack/src/config/handleNode.ts

@@ -1,11 +1,11 @@
-import type Config from 'webpack-5-chain'
+import type { Config } from 'webpack-v5-chain'
 
 /**
  * Set webpack node config
  */
 export const handleNode = ({ config }: { config: Config }): void => {
   // do not polyfill or mock node globals and modules
-  config.node.merge({
+  config.node({
     __filename: false,
     __dirname: false,
     global: false,

packages/bundler-webpack/src/config/handleOtherOptions.ts

@@ -1,6 +1,6 @@
 import { createRequire } from 'node:module'
 import type { App } from '@vuepress/core'
-import type Config from 'webpack-5-chain'
+import type { Config } from 'webpack-v5-chain'
 
 const require = createRequire(import.meta.url)
 

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-5-chain'
+import type { Config } from 'webpack-v5-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-5-chain'
+import type { Config } from 'webpack-v5-chain'
 
 /**
  * Set webpack resolve
@@ -19,15 +19,10 @@ export const handleResolve = async ({
     .set('@temp', app.dir.temp())
     .set('@internal', app.dir.temp('internal'))
 
-  // extensions
-  config.merge({
-    resolve: {
-      extensionAlias: {
-        '.js': ['.js', '.ts'],
-        '.mjs': ['.mjs', '.mts'],
-      },
-      extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue', '.json'],
-    },
+  // extensionAlias
+  config.resolve.extensionAlias.merge({
+    '.js': ['.js', '.ts'],
+    '.mjs': ['.mjs', '.mts'],
   })
 
   // extensions

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-5-chain'
+import type { Config } from 'webpack-v5-chain'
 import { createClientBaseConfig } from '../config/index.js'
 import type { WebpackBundlerOptions } from '../types.js'
 

packages/bundler-webpack/src/resolveWebpackConfig.ts

@@ -1,6 +1,6 @@
 import type { Configuration } from 'webpack'
-import type Config from 'webpack-5-chain'
 import { merge } from 'webpack-merge'
+import type { Config } from 'webpack-v5-chain'
 import type { WebpackBundlerOptions } from './types.js'
 
 export const resolveWebpackConfig = ({
@@ -17,7 +17,7 @@ export const resolveWebpackConfig = ({
   // allow modifying webpack config via `chainWebpack`
   options.chainWebpack?.(config, isServer, isBuild)
 
-  // generate webpack config from webpack-5-chain
+  // generate webpack config from webpack-v5-chain
   const webpackConfig = config.toConfig()
 
   // allow modifying webpack config via `configureWebpack`

packages/bundler-webpack/src/types.ts

@@ -4,8 +4,8 @@ import type {
   LoaderContext,
   Configuration as WebpackConfiguration,
 } from 'webpack'
-import type WebpackChainConfig from 'webpack-5-chain'
 import type WebpackDevServer from 'webpack-dev-server'
+import type { Config as WebpackChainConfig } from 'webpack-v5-chain'
 
 export type {
   VueLoaderOptions,
@@ -28,7 +28,7 @@ export interface WebpackBundlerOptions extends BundlerOptions {
   ) => WebpackConfiguration | void
 
   /**
-   * use webpack-5-chain to set webpack config
+   * use webpack-v5-chain to set webpack config
    */
   chainWebpack?: (
     config: WebpackChainConfig,