From 207014b087d29f43bd01604954e33277b6b19150 Mon Sep 17 00:00:00 2001 From: meteorlxy Date: Mon, 14 Jun 2021 17:25:14 +0800 Subject: [PATCH] fix(bundler-webpack): sync types of webpack-dev-server 4 (close #208) --- .../@vuepress/bundler-webpack/package.json | 1 + .../src/dev/createDevServerConfig.ts | 89 +++++++++---------- .../@vuepress/bundler-webpack/src/types.ts | 7 +- .../src/types.webpack-dev-server.ts | 18 ++++ 4 files changed, 63 insertions(+), 52 deletions(-) create mode 100644 packages/@vuepress/bundler-webpack/src/types.webpack-dev-server.ts diff --git a/packages/@vuepress/bundler-webpack/package.json b/packages/@vuepress/bundler-webpack/package.json index a16318b2a7..9d9bb82759 100644 --- a/packages/@vuepress/bundler-webpack/package.json +++ b/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", diff --git a/packages/@vuepress/bundler-webpack/src/dev/createDevServerConfig.ts b/packages/@vuepress/bundler-webpack/src/dev/createDevServerConfig.ts index 2c93d9b8a0..769d1f348d 100644 --- a/packages/@vuepress/bundler-webpack/src/dev/createDevServerConfig.ts +++ b/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 -} + }, +}) diff --git a/packages/@vuepress/bundler-webpack/src/types.ts b/packages/@vuepress/bundler-webpack/src/types.ts index 39caab08b8..42cba844e5 100644 --- a/packages/@vuepress/bundler-webpack/src/types.ts +++ b/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 diff --git a/packages/@vuepress/bundler-webpack/src/types.webpack-dev-server.ts b/packages/@vuepress/bundler-webpack/src/types.webpack-dev-server.ts new file mode 100644 index 0000000000..0680b8c0e5 --- /dev/null +++ b/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 + // DevServer + options: WebpackOptionsNormalized['devServer'] + sockets: any[] + staticWatchers: FSWatcher[] + webSocketProxies: any[] + webSocketHeartbeatInterval: number + + use: Application['use'] +}