fix: migrate webpack-dev-server to 4.0.0 (#54)

* fix: migrate webpack-dev-server to 4.0.0

* fix: types of webpack-dev-server

* chore: lint

* chore: remove useless code

Author: ClarkXia

.eslintrc.js

@@ -16,9 +16,12 @@ const jsRules = deepmerge(eslint, {
 const tsRules = deepmerge(tslint, {
   rules: {
     ...commonRules,
-    '@typescript-eslint/explicit-function-return-type': ['warn', {
-      allowTypedFunctionExpressions: true,
-    }],
+    '@typescript-eslint/explicit-function-return-type': [
+      'warn',
+      {
+        allowTypedFunctionExpressions: true,
+      },
+    ],
   },
 });
 

packages/build-scripts/package.json

@@ -51,12 +51,12 @@
     "@types/semver": "^6.2.0",
     "@types/webpack": "^4.41.30",
     "@types/webpack-chain": "^5.2.0",
-    "@types/webpack-dev-server": "^3.11.5",
+    "@types/webpack-dev-server": "^4.0.0",
     "jest": "^27.0.6",
     "package-json": "^6.5.0",
     "ts-jest": "^27.0.3",
     "typescript": "^3.7.2",
     "webpack": "^5.0.0",
-    "webpack-dev-server": "^3.7.2"
+    "webpack-dev-server": "^4.0.0"
   }
 }

packages/build-scripts/src/commands/start.ts

@@ -1,6 +1,6 @@
 import WebpackService from '../service/WebpackService';
 import { IContextOptions, ITaskConfig } from '../core/Context';
-import WebpackDevServer = require('webpack-dev-server');
+import type WebpackDevServer from 'webpack-dev-server';
 
 type StartResult = void | ITaskConfig[] | WebpackDevServer;
 

packages/build-scripts/src/core/Context.ts

@@ -5,6 +5,7 @@ import webpack, { MultiStats } from 'webpack';
 import { Logger } from 'npmlog';
 import { AggregatedResult } from '@jest/test-result';
 import { GlobalConfig } from '@jest/types/build/Config';
+import type WebpackDevServer from 'webpack-dev-server';
 import {
   IHash,
   Json,
@@ -20,7 +21,6 @@ import assert = require('assert');
 import _ = require('lodash');
 import camelCase = require('camelcase');
 import WebpackChain = require('webpack-chain');
-import WebpackDevServer = require('webpack-dev-server');
 import deepmerge = require('deepmerge');
 import log = require('../utils/log');
 

packages/build-scripts/src/service/start.ts

@@ -2,13 +2,13 @@ import chalk from 'chalk';
 import { WebpackOptionsNormalized } from 'webpack';
 import Context, { ITaskConfig } from '../core/Context';
 import webpackStats from '../utils/webpackStats';
+import type WebpackDevServer from 'webpack-dev-server';
 import { IRunOptions } from '../types';
 import deepmerge = require('deepmerge');
-import WebpackDevServer = require('webpack-dev-server');
 import prepareURLs = require('../utils/prepareURLs');
 import log = require('../utils/log');
 
-type DevServer = Record<string, any>;
+type DevServerConfig = Record<string, any>;
 
 export = async function(context: Context, options?: IRunOptions): Promise<void | ITaskConfig[] | WebpackDevServer> {
   const { eject } = options || {};
@@ -28,7 +28,7 @@ export = async function(context: Context, options?: IRunOptions): Promise<void |
   }
 
   let serverUrl = '';
-  let devServerConfig: DevServer = {
+  let devServerConfig: DevServerConfig = {
     port: commandArgs.port || 3333,
     host: commandArgs.host || '0.0.0.0',
     https: commandArgs.https || false,
@@ -90,31 +90,20 @@ export = async function(context: Context, options?: IRunOptions): Promise<void |
   // context may hijack webpack resolve
   // eslint-disable-next-line @typescript-eslint/no-var-requires
   const DevServer = require('webpack-dev-server');
-  const devServer = new DevServer(compiler, devServerConfig);
+  const devServer: WebpackDevServer = new DevServer(devServerConfig, compiler);
 
   await applyHook(`before.${command}.devServer`, {
     url: serverUrl,
     urls,
     devServer,
   });
 
-  devServer.listen(
-    devServerConfig.port,
-    devServerConfig.host,
-    async (err: Error) => {
-      if (err) {
-        log.info(
-          'WEBPACK',
-          chalk.red('[ERR]: Failed to start webpack dev server'),
-        );
-        log.error('WEBPACK', err.stack || err.toString());
-      }
-
-      await applyHook(`after.${command}.devServer`, {
+  devServer.startCallback(
+    () => {
+      applyHook(`after.${command}.devServer`, {
         url: serverUrl,
         urls,
         devServer,
-        err,
       });
     },
   );