fix(bundler-webpack): sync types of webpack-dev-server 4 (close #208)

Author: meteorlxy

packages/@vuepress/bundler-webpack/package.json

@@ -37,6 +37,7 @@
     "@vuepress/shared": "2.0.0-beta.18",
     "@vuepress/utils": "2.0.0-beta.18",
     "autoprefixer": "^10.2.6",
+    "chokidar": "^3.5.1",
     "copy-webpack-plugin": "^9.0.0",
     "css-loader": "^5.2.6",
     "esbuild-loader": "~2.13.1",

packages/@vuepress/bundler-webpack/src/dev/createDevServerConfig.ts

@@ -1,60 +1,53 @@
 import { sep } from 'path'
 import type { WebpackOptionsNormalized } from 'webpack'
-import * as WebpackDevServer from 'webpack-dev-server'
 import { App } from '@vuepress/core'
 import { path } from '@vuepress/utils'
 import type { WebpackBundlerOptions } from '../types'
+import type { WebpackDevServer } from '../types.webpack-dev-server'
 import { trailingSlashMiddleware } from './trailingSlashMiddleware'
 
 export const createDevServerConfig = (
   app: App,
   options: WebpackBundlerOptions
-): WebpackDevServer.Configuration => {
-  // TODO: add types for webpack-dev-server 4
-  const serverConfig: WebpackOptionsNormalized['devServer'] = {
-    compress: true,
-    devMiddleware: {
-      publicPath: app.options.base,
-      writeToDisk: false,
-      stats: app.env.isDebug ? 'normal' : 'errors-warnings',
-    },
-    firewall: false,
-    headers: {
-      'access-control-allow-origin': '*',
-    },
-    historyApiFallback: {
-      disableDotRule: true,
-      rewrites: [{ from: /./, to: path.join(app.options.base, 'index.html') }],
-    },
-    host: app.options.host,
-    hot: true,
-    onAfterSetupMiddleware: (expressApp, server) => {
-      // plugin hook: afterDevServer
-      options.afterDevServer?.(expressApp, server)
-    },
-    onBeforeSetupMiddleware: (expressApp, server) => {
-      // use trailing slash middleware to support vuepress routing in dev-server
-      // it will be handled by most of the deployment platforms
-      expressApp.use(trailingSlashMiddleware)
+): WebpackOptionsNormalized['devServer'] => ({
+  compress: true,
+  devMiddleware: {
+    publicPath: app.options.base,
+    writeToDisk: false,
+    stats: app.env.isDebug ? 'normal' : 'errors-warnings',
+  },
+  firewall: false,
+  headers: {
+    'access-control-allow-origin': '*',
+  },
+  historyApiFallback: {
+    disableDotRule: true,
+    rewrites: [{ from: /./, to: path.join(app.options.base, 'index.html') }],
+  },
+  host: app.options.host,
+  hot: true,
+  onAfterSetupMiddleware: (server: WebpackDevServer) => {
+    options.afterDevServer?.(server)
+  },
+  onBeforeSetupMiddleware: (server: WebpackDevServer) => {
+    // use trailing slash middleware to support vuepress routing in dev-server
+    // it will be handled by most of the deployment platforms
+    server.use(trailingSlashMiddleware)
 
-      // plugin hook: beforeDevServer
-      options.beforeDevServer?.(expressApp, server)
-    },
-    open: app.options.open,
-    port: app.options.port,
-    static: {
-      // `static.directory` will fail on Windows if we do not replace / with \
-      directory: app.dir.public().replace('/', sep),
-      publicPath: app.options.base,
-      watch: {
-        ignoreInitial: true,
-        ignored: [
-          // Do not watch node_modules
-          'node_modules',
-        ],
-      },
+    options.beforeDevServer?.(server)
+  },
+  open: app.options.open,
+  port: app.options.port,
+  static: {
+    // `static.directory` will fail on Windows if we do not replace / with \
+    directory: app.dir.public().replace('/', sep),
+    publicPath: app.options.base,
+    watch: {
+      ignoreInitial: true,
+      ignored: [
+        // Do not watch node_modules
+        'node_modules',
+      ],
     },
-  }
-
-  return serverConfig
-}
+  },
+})

packages/@vuepress/bundler-webpack/src/types.ts

@@ -1,8 +1,7 @@
-import type { Application } from 'express'
 import type { Configuration as WebpackConfiguration } from 'webpack'
 import type * as WebpackChainConfig from 'webpack-chain'
-import type * as WebpackDevServer from 'webpack-dev-server'
 import type { LoaderContext } from './types.webpack'
+import type { WebpackDevServer } from './types.webpack-dev-server'
 
 export type { WebpackConfiguration, WebpackChainConfig, WebpackDevServer }
 
@@ -31,12 +30,12 @@ export interface WebpackBundlerOptions {
   /**
    * hook that to be called in `devServer.before`
    */
-  beforeDevServer?: (expressApp: Application, server: WebpackDevServer) => void
+  beforeDevServer?: (server: WebpackDevServer) => void
 
   /**
    * hook that to be called in `devServer.after`
    */
-  afterDevServer?: (expressApp: Application, server: WebpackDevServer) => void
+  afterDevServer?: (server: WebpackDevServer) => void
 
   /**
    * postcss-loader options

packages/@vuepress/bundler-webpack/src/types.webpack-dev-server.ts

@@ -0,0 +1,18 @@
+import type { FSWatcher } from 'chokidar'
+import type { Application } from 'express'
+import type { Compiler, WebpackOptionsNormalized } from 'webpack'
+
+export interface WebpackDevServer {
+  app: Application
+  compiler: Compiler
+  // WebpackLogger
+  logger: ReturnType<Compiler['getInfrastructureLogger']>
+  // DevServer
+  options: WebpackOptionsNormalized['devServer']
+  sockets: any[]
+  staticWatchers: FSWatcher[]
+  webSocketProxies: any[]
+  webSocketHeartbeatInterval: number
+
+  use: Application['use']
+}