@rspack/dev-server 1.2.1 → 2.0.0-beta.1

package/dist/server.js

@@ -24,26 +24,32 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Server = void 0;
+const fs = __importStar(require("node:fs"));
 const os = __importStar(require("node:os"));
 const path = __importStar(require("node:path"));
 const url = __importStar(require("node:url"));
 const util = __importStar(require("node:util"));
-const fs = __importStar(require("graceful-fs"));
 const ipaddr = __importStar(require("ipaddr.js"));
-const schema_utils_1 = require("schema-utils");
-const options_json_1 = __importDefault(require("./options.json"));
+const { styleText } = util;
 // Define BasicApplication and Server as ambient, or import them
 if (!process.env.WEBPACK_SERVE) {
     process.env.WEBPACK_SERVE = 'true';
@@ -70,18 +76,33 @@ const encodeOverlaySettings = (setting) => {
         : setting;
 };
 const DEFAULT_ALLOWED_PROTOCOLS = /^(file|.+-extension):/i;
+/**
+ * Extracts and normalizes the hostname from a header, removing brackets for IPv6.
+ */
+function parseHostnameFromHeader(header) {
+    try {
+        const parsedUrl = new URL(
+        // if header doesn't have scheme, add // for parsing.
+        /^(.+:)?\/\//.test(header) ? header : `//${header}`, 'http://localhost/');
+        let { hostname } = parsedUrl;
+        // `URL#hostname` keeps IPv6 brackets, but our validation expects bare IPv6.
+        if (hostname.startsWith('[') && hostname.endsWith(']')) {
+            hostname = hostname.slice(1, -1);
+        }
+        return hostname;
+    }
+    catch {
+        return null;
+    }
+}
 function isMultiCompiler(compiler) {
     return Array.isArray(compiler.compilers);
 }
 class Server {
     constructor(options, compiler) {
         this.isTlsServer = false;
-        (0, schema_utils_1.validate)(options_json_1.default, options, {
-            name: 'Dev Server',
-            baseDataPath: 'options',
-        });
         this.compiler = compiler;
-        this.logger = this.compiler.getInfrastructureLogger('webpack-dev-server');
+        this.logger = this.compiler.getInfrastructureLogger('rspack-dev-server');
         this.options = options;
         this.staticWatchers = [];
         this.listeners = [];
@@ -89,9 +110,6 @@ class Server {
         this.sockets = [];
         this.currentHash = undefined;
     }
-    static get schema() {
-        return options_json_1.default;
-    }
     static get DEFAULT_STATS() {
         return {
             all: false,
@@ -158,14 +176,6 @@ class Server {
             }
         }
     }
-    // TODO remove me in the next major release, we have `findIp`
-    static async internalIP(family) {
-        return Server.findIp(family, false);
-    }
-    // TODO remove me in the next major release, we have `findIp`
-    static internalIPSync(family) {
-        return Server.findIp(family, false);
-    }
     static async getHostname(hostname) {
         if (hostname === 'local-ip') {
             return (Server.findIp('v4', false) || Server.findIp('v6', false) || '0.0.0.0');
@@ -184,13 +194,13 @@ class Server {
         }
         const { default: pRetry } = await import('p-retry');
         const getPort = require('./getPort');
-        const basePort = typeof process.env.WEBPACK_DEV_SERVER_BASE_PORT !== 'undefined'
-            ? Number.parseInt(process.env.WEBPACK_DEV_SERVER_BASE_PORT, 10)
+        const basePort = typeof process.env.RSPACK_DEV_SERVER_BASE_PORT !== 'undefined'
+            ? Number.parseInt(process.env.RSPACK_DEV_SERVER_BASE_PORT, 10)
             : 8080;
         // Try to find unused port and listen on it for 3 times,
         // if port is not specified in options.
-        const defaultPortRetry = typeof process.env.WEBPACK_DEV_SERVER_PORT_RETRY !== 'undefined'
-            ? Number.parseInt(process.env.WEBPACK_DEV_SERVER_PORT_RETRY, 10)
+        const defaultPortRetry = typeof process.env.RSPACK_DEV_SERVER_PORT_RETRY !== 'undefined'
+            ? Number.parseInt(process.env.RSPACK_DEV_SERVER_PORT_RETRY, 10)
             : 3;
         return pRetry(() => getPort(basePort, host), {
             retries: defaultPortRetry,
@@ -214,45 +224,19 @@ class Server {
             dir = parent;
         }
         if (!dir) {
-            return path.resolve(cwd, '.cache/webpack-dev-server');
+            return path.resolve(cwd, '.cache/rspack-dev-server');
         }
         if (process.versions.pnp === '1') {
-            return path.resolve(dir, '.pnp/.cache/webpack-dev-server');
+            return path.resolve(dir, '.pnp/.cache/rspack-dev-server');
         }
         if (process.versions.pnp === '3') {
-            return path.resolve(dir, '.yarn/.cache/webpack-dev-server');
+            return path.resolve(dir, '.yarn/.cache/rspack-dev-server');
         }
-        return path.resolve(dir, 'node_modules/.cache/webpack-dev-server');
-    }
-    static isWebTarget(compiler) {
-        if (compiler.platform?.web) {
-            return compiler.platform.web;
-        }
-        // TODO improve for the next major version and keep only `webTargets` to fallback for old versions
-        if (compiler.options.externalsPresets?.web) {
-            return true;
-        }
-        if (compiler.options.resolve?.conditionNames?.includes('browser')) {
-            return true;
-        }
-        const webTargets = [
-            'web',
-            'webworker',
-            'electron-preload',
-            'electron-renderer',
-            'nwjs',
-            'node-webkit',
-            undefined,
-            null,
-        ];
-        if (Array.isArray(compiler.options.target)) {
-            return compiler.options.target.some((r) => webTargets.includes(r));
-        }
-        return webTargets.includes(compiler.options.target);
+        return path.resolve(dir, 'node_modules/.cache/rspack-dev-server');
     }
     addAdditionalEntries(compiler) {
         const additionalEntries = [];
-        const isWebTarget = Server.isWebTarget(compiler);
+        const isWebTarget = Boolean(compiler.platform.web);
         // TODO maybe empty client
         if (this.options.client && isWebTarget) {
             let webSocketURLStr = '';
@@ -277,20 +261,14 @@ class Server {
                     searchParams.set('password', webSocketURL.password);
                 }
                 let hostname;
-                // SockJS is not supported server mode, so `hostname` and `port` can't specified, let's ignore them
-                const isSockJSType = webSocketServer.type === 'sockjs';
                 const isWebSocketServerHostDefined = typeof webSocketServer.options.host !== 'undefined';
                 const isWebSocketServerPortDefined = typeof webSocketServer.options.port !== 'undefined';
-                if (isSockJSType &&
-                    (isWebSocketServerHostDefined || isWebSocketServerPortDefined)) {
-                    this.logger.warn("SockJS only supports client mode and does not support custom hostname and port options. Please consider using 'ws' if you need to customize these options.");
-                }
                 // We are proxying dev server and need to specify custom `hostname`
                 if (typeof webSocketURL.hostname !== 'undefined') {
                     hostname = webSocketURL.hostname;
                 }
-                // Web socket server works on custom `hostname`, only for `ws` because `sock-js` is not support custom `hostname`
-                else if (isWebSocketServerHostDefined && !isSockJSType) {
+                // Web socket server works on custom `hostname`
+                else if (isWebSocketServerHostDefined) {
                     hostname = webSocketServer.options.host;
                 }
                 // The `host` option is specified
@@ -307,8 +285,8 @@ class Server {
                 if (typeof webSocketURL.port !== 'undefined') {
                     port = webSocketURL.port;
                 }
-                // Web socket server works on custom `port`, only for `ws` because `sock-js` is not support custom `port`
-                else if (isWebSocketServerPortDefined && !isSockJSType) {
+                // Web socket server works on custom `port`
+                else if (isWebSocketServerPortDefined) {
                     port = webSocketServer.options.port;
                 }
                 // The `port` option is specified
@@ -331,10 +309,8 @@ class Server {
                     pathname = webSocketURL.pathname;
                 }
                 // Web socket server works on custom `path`
-                else if (typeof webSocketServer.options.prefix !== 'undefined' ||
-                    typeof webSocketServer.options.path !== 'undefined') {
-                    pathname =
-                        webSocketServer.options.prefix || webSocketServer.options.path;
+                else if (typeof webSocketServer.options.path !== 'undefined') {
+                    pathname = webSocketServer.options.path;
                 }
                 searchParams.set('pathname', pathname);
                 const client = this.options.client;
@@ -374,10 +350,9 @@ class Server {
         if (clientHotEntry) {
             additionalEntries.push(clientHotEntry);
         }
-        const webpack = compiler.webpack || require('webpack');
         // use a hook to add entries if available
         for (const additionalEntry of additionalEntries) {
-            new webpack.EntryPlugin(compiler.context, additionalEntry, {
+            new compiler.rspack.EntryPlugin(compiler.context, additionalEntry, {
                 name: undefined,
             }).apply(compiler);
         }
@@ -396,25 +371,21 @@ class Server {
             if (compilerWithDevServer) {
                 return compilerWithDevServer.options;
             }
-            // Configuration with `web` preset
-            const compilerWithWebPreset = this.compiler.compilers.find((config) => config.options.externalsPresets?.web ||
-                [
-                    'web',
-                    'webworker',
-                    'electron-preload',
-                    'electron-renderer',
-                    'node-webkit',
-                    undefined,
-                    null,
-                ].includes(config.options.target));
-            if (compilerWithWebPreset) {
-                return compilerWithWebPreset.options;
+            // Compiler for `web` target
+            const compilerWithWebTarget = this.compiler.compilers.find((compiler) => Boolean(compiler.platform.web));
+            if (compilerWithWebTarget) {
+                return compilerWithWebTarget.options;
             }
             // Fallback
             return this.compiler.compilers[0].options;
         }
         return this.compiler.options;
     }
+    shouldLogInfrastructureInfo() {
+        const compilerOptions = this.getCompilerOptions();
+        const { level = 'info' } = compilerOptions.infrastructureLogging || {};
+        return level === 'info' || level === 'log' || level === 'verbose';
+    }
     async normalizeOptions() {
         const { options } = this;
         const compilerOptions = this.getCompilerOptions();
@@ -545,12 +516,6 @@ class Server {
             options.allowedHosts.includes('all')) {
             options.allowedHosts = 'all';
         }
-        if (typeof options.bonjour === 'undefined') {
-            options.bonjour = false;
-        }
-        else if (typeof options.bonjour === 'boolean') {
-            options.bonjour = options.bonjour ? {} : false;
-        }
         if (typeof options.client === 'undefined' ||
             (typeof options.client === 'object' && options.client !== null)) {
             if (!options.client) {
@@ -634,13 +599,7 @@ class Server {
             };
         }
         const serverOptions = options.server.options;
-        if (options.server.type === 'spdy' &&
-            typeof serverOptions.spdy === 'undefined') {
-            serverOptions.spdy = { protocols: ['h2', 'http/1.1'] };
-        }
-        if (options.server.type === 'https' ||
-            options.server.type === 'http2' ||
-            options.server.type === 'spdy') {
+        if (options.server.type === 'https' || options.server.type === 'http2') {
             if (typeof serverOptions.requestCert === 'undefined') {
                 serverOptions.requestCert = false;
             }
@@ -674,7 +633,6 @@ class Server {
                         return stats ? fs.readFileSync(item) : item;
                     }
                 };
-                // @ts-expect-error too complex
                 serverOptions[property] = (Array.isArray(value)
                     ? value.map((item) => readFile(item))
                     : readFile(value));
@@ -706,10 +664,14 @@ class Server {
                     this.logger.info('Generating SSL certificate...');
                     const selfsigned = require('selfsigned');
                     const attributes = [{ name: 'commonName', value: 'localhost' }];
-                    const pems = selfsigned.generate(attributes, {
+                    const notBeforeDate = new Date();
+                    const notAfterDate = new Date(notBeforeDate);
+                    notAfterDate.setDate(notAfterDate.getDate() + 30);
+                    const pems = await selfsigned.generate(attributes, {
                         algorithm: 'sha256',
-                        days: 30,
                         keySize: 2048,
+                        notBeforeDate,
+                        notAfterDate,
                         extensions: [
                             {
                                 name: 'basicConstraints',
@@ -844,44 +806,6 @@ class Server {
         if (typeof options.port === 'string' && options.port !== 'auto') {
             options.port = Number(options.port);
         }
-        /**
-         * Assume a proxy configuration specified as:
-         * proxy: {
-         *   'context': { options }
-         * }
-         * OR
-         * proxy: {
-         *   'context': 'target'
-         * }
-         */
-        if (typeof options.proxy !== 'undefined') {
-            options.proxy = options.proxy.map((item) => {
-                if (typeof item === 'function') {
-                    return item;
-                }
-                const getLogLevelForProxy = (level) => {
-                    if (level === 'none') {
-                        return 'silent';
-                    }
-                    if (level === 'log') {
-                        return 'info';
-                    }
-                    if (level === 'verbose') {
-                        return 'debug';
-                    }
-                    return level;
-                };
-                if (typeof item.logLevel === 'undefined') {
-                    item.logLevel = getLogLevelForProxy(compilerOptions.infrastructureLogging
-                        ? compilerOptions.infrastructureLogging.level
-                        : 'info');
-                }
-                if (typeof item.logProvider === 'undefined') {
-                    item.logProvider = () => this.logger;
-                }
-                return item;
-            });
-        }
         if (typeof options.setupExitSignals === 'undefined') {
             options.setupExitSignals = true;
         }
@@ -974,9 +898,7 @@ class Server {
             typeof this.options.webSocketServer
                 .type === 'string' &&
             // @ts-expect-error
-            (this.options.webSocketServer.type === 'ws' ||
-                this.options.webSocketServer.type ===
-                    'sockjs');
+            this.options.webSocketServer.type === 'ws';
         let clientTransport;
         if (this.options.client) {
             if (typeof this.options.client
@@ -996,12 +918,13 @@ class Server {
         }
         switch (typeof clientTransport) {
             case 'string':
-                // could be 'sockjs', 'ws', or a path that should be required
+                // could be 'ws' or a path that should be required
                 if (clientTransport === 'sockjs') {
-                    clientImplementation = require.resolve('../client/clients/SockJSClient');
+                    throw new Error("SockJS support has been removed. Please set client.webSocketTransport to 'ws' or provide a custom transport implementation path.");
                 }
-                else if (clientTransport === 'ws') {
-                    clientImplementation = require.resolve('../client/clients/WebSocketClient');
+                if (clientTransport === 'ws') {
+                    clientImplementation =
+                        require.resolve('../client/clients/WebSocketClient');
                 }
                 else {
                     try {
@@ -1018,7 +941,7 @@ class Server {
         if (!clientImplementationFound) {
             throw new Error(`${!isKnownWebSocketServerImplementation
                 ? 'When you use custom web socket implementation you must explicitly specify client.webSocketTransport. '
-                : ''}client.webSocketTransport must be a string denoting a default implementation (e.g. 'sockjs', 'ws') or a full path to a JS file via require.resolve(...) which exports a class `);
+                : ''}client.webSocketTransport must be a string denoting a default implementation (e.g. 'ws') or a full path to a JS file via require.resolve(...) which exports a class `);
         }
         return clientImplementation;
     }
@@ -1027,12 +950,12 @@ class Server {
         let implementationFound = true;
         switch (typeof this.options.webSocketServer.type) {
             case 'string':
-                // Could be 'sockjs', in the future 'ws', or a path that should be required
+                // Could be 'ws' or a path that should be required
                 if (this.options.webSocketServer
                     .type === 'sockjs') {
-                    implementation = require('./servers/SockJSServer');
+                    throw new Error("SockJS support has been removed. Please set webSocketServer to 'ws' or provide a custom WebSocket server implementation.");
                 }
-                else if (this.options.webSocketServer
+                if (this.options.webSocketServer
                     .type === 'ws') {
                     implementation = require('./servers/WebsocketServer');
                 }
@@ -1053,7 +976,7 @@ class Server {
                 implementationFound = false;
         }
         if (!implementationFound) {
-            throw new Error("webSocketServer (webSocketServer.type) must be a string denoting a default implementation (e.g. 'ws', 'sockjs'), a full path to " +
+            throw new Error("webSocketServer (webSocketServer.type) must be a string denoting a default implementation (e.g. 'ws'), a full path to " +
                 'a JS file which exports a class extending BaseServer (webpack-dev-server/lib/servers/BaseServer.js) ' +
                 'via require.resolve(...), or the class itself which extends BaseServer');
         }
@@ -1074,24 +997,21 @@ class Server {
         const { ProgressPlugin } = this.compiler.compilers
             ? this.compiler.compilers[0].webpack
             : this.compiler.webpack;
-        new ProgressPlugin((percent, msg, addInfo, pluginName) => {
+        new ProgressPlugin((percent, msg) => {
             const percentValue = Math.floor(percent * 100);
             let msgValue = msg;
             if (percentValue === 100) {
                 msgValue = 'Compilation completed';
             }
-            if (addInfo) {
-                msgValue = `${msgValue} (${addInfo})`;
-            }
+            const payload = {
+                percent: percentValue,
+                msg: msgValue,
+            };
             if (this.webSocketServer) {
-                this.sendMessage(this.webSocketServer.clients, 'progress-update', {
-                    percent: percentValue,
-                    msg: msgValue,
-                    pluginName,
-                });
+                this.sendMessage(this.webSocketServer.clients, 'progress-update', payload);
             }
             if (this.server) {
-                this.server.emit('progress-update', { percent, msg, pluginName });
+                this.server.emit('progress-update', payload);
             }
         }).apply(this.compiler);
     }
@@ -1127,19 +1047,18 @@ class Server {
                     continue;
                 }
                 this.addAdditionalEntries(compiler);
-                const webpack = compiler.webpack || require('webpack');
-                new webpack.ProvidePlugin({
+                const { ProvidePlugin, HotModuleReplacementPlugin } = compiler.rspack;
+                new ProvidePlugin({
                     __webpack_dev_server_client__: this.getClientTransport(),
                 }).apply(compiler);
                 if (this.options.hot) {
-                    const HMRPluginExists = compiler.options.plugins.find((plugin) => plugin &&
-                        plugin.constructor === webpack.HotModuleReplacementPlugin);
+                    const HMRPluginExists = compiler.options.plugins.find((plugin) => plugin && plugin.constructor === HotModuleReplacementPlugin);
                     if (HMRPluginExists) {
                         this.logger.warn('"hot: true" automatically applies HMR plugin, you don\'t have to add it manually to your webpack configuration.');
                     }
                     else {
                         // Apply the HMR plugin
-                        const plugin = new webpack.HotModuleReplacementPlugin();
+                        const plugin = new HotModuleReplacementPlugin();
                         plugin.apply(compiler);
                     }
                 }
@@ -1162,7 +1081,7 @@ class Server {
                         // eslint-disable-next-line n/no-process-exit
                         process.exit();
                     }
-                    this.logger.info('Gracefully shutting down. To force exit, press ^C again. Please wait...');
+                    this.logger.info('Gracefully shutting down. Press ^C again to force exit...');
                     needForceShutdown = true;
                     this.stopCallback(() => {
                         if (typeof this.compiler.close === 'function') {
@@ -1204,12 +1123,12 @@ class Server {
         return statsObj.toJson(stats);
     }
     setupHooks() {
-        this.compiler.hooks.invalid.tap('webpack-dev-server', () => {
+        this.compiler.hooks.invalid.tap('rspack-dev-server', () => {
             if (this.webSocketServer) {
                 this.sendMessage(this.webSocketServer.clients, 'invalid');
             }
         });
-        this.compiler.hooks.done.tap('webpack-dev-server', (stats) => {
+        this.compiler.hooks.done.tap('rspack-dev-server', (stats) => {
             if (this.webSocketServer) {
                 this.sendStats(this.webSocketServer.clients, this.getStats(stats));
             }
@@ -1286,7 +1205,7 @@ class Server {
             });
         }
         // compress is placed last and uses unshift so that it will be the first middleware used
-        if (this.options.compress && !isHTTP2) {
+        if (this.options.compress) {
             const compression = require('compression');
             middlewares.push({ name: 'compression', middleware: compression() });
         }
@@ -1300,42 +1219,9 @@ class Server {
             name: 'webpack-dev-middleware',
             middleware: this.middleware,
         });
-        // Should be after `webpack-dev-middleware`, otherwise other middlewares might rewrite response
         middlewares.push({
-            name: 'webpack-dev-server-sockjs-bundle',
-            path: '/__webpack_dev_server__/sockjs.bundle.js',
-            middleware: (req, res, next) => {
-                if (req.method !== 'GET' && req.method !== 'HEAD') {
-                    next();
-                    return;
-                }
-                const clientPath = path.join(__dirname, '../', 'client/modules/sockjs-client/index.js');
-                // Express send Etag and other headers by default, so let's keep them for compatibility reasons
-                if (typeof res.sendFile === 'function') {
-                    res.sendFile(clientPath);
-                    return;
-                }
-                let stats;
-                try {
-                    // TODO implement `inputFileSystem.createReadStream` in webpack
-                    stats = fs.statSync(clientPath);
-                }
-                catch {
-                    next();
-                    return;
-                }
-                res.setHeader('Content-Type', 'application/javascript; charset=UTF-8');
-                res.setHeader('Content-Length', stats.size);
-                if (req.method === 'HEAD') {
-                    res.end();
-                    return;
-                }
-                fs.createReadStream(clientPath).pipe(res);
-            },
-        });
-        middlewares.push({
-            name: 'webpack-dev-server-invalidate',
-            path: '/webpack-dev-server/invalidate',
+            name: 'rspack-dev-server-invalidate',
+            path: '/rspack-dev-server/invalidate',
             middleware: (req, res, next) => {
                 if (req.method !== 'GET' && req.method !== 'HEAD') {
                     next();
@@ -1346,8 +1232,8 @@ class Server {
             },
         });
         middlewares.push({
-            name: 'webpack-dev-server-open-editor',
-            path: '/webpack-dev-server/open-editor',
+            name: 'rspack-dev-server-open-editor',
+            path: '/rspack-dev-server/open-editor',
             middleware: (req, res, next) => {
                 if (req.method !== 'GET' && req.method !== 'HEAD') {
                     next();
@@ -1368,8 +1254,8 @@ class Server {
             },
         });
         middlewares.push({
-            name: 'webpack-dev-server-assets',
-            path: '/webpack-dev-server',
+            name: 'rspack-dev-server-assets',
+            path: '/rspack-dev-server',
             middleware: (req, res, next) => {
                 if (req.method !== 'GET' && req.method !== 'HEAD') {
                     next();
@@ -1388,9 +1274,11 @@ class Server {
                     }
                     res.write('<!DOCTYPE html><html><head><meta charset="utf-8"/></head><body>');
                     const statsForPrint = typeof stats.stats !== 'undefined'
-                        ? stats.toJson({})
+                        ? stats.toJson({ assets: true })
                             .children
-                        : [stats.toJson()];
+                        : [
+                            stats.toJson({ assets: true }),
+                        ];
                     res.write('<h1>Assets Report:</h1>');
                     for (const [index, item] of statsForPrint?.entries() ?? []) {
                         res.write('<div>');
@@ -1420,19 +1308,18 @@ class Server {
         if (this.options.proxy) {
             const { createProxyMiddleware } = require('http-proxy-middleware');
             const getProxyMiddleware = (proxyConfig) => {
-                // It is possible to use the `bypass` method without a `target` or `router`.
-                // However, the proxy middleware has no use in this case, and will fail to instantiate.
-                if (proxyConfig.target) {
-                    const context = proxyConfig.context || proxyConfig.path;
-                    return createProxyMiddleware(context, proxyConfig);
+                const { context, ...proxyOptions } = proxyConfig;
+                const pathFilter = proxyOptions.pathFilter ?? context;
+                if (typeof pathFilter !== 'undefined') {
+                    proxyOptions.pathFilter = pathFilter;
                 }
-                if (proxyConfig.router) {
-                    return createProxyMiddleware(proxyConfig);
+                if (typeof proxyOptions.logger === 'undefined') {
+                    proxyOptions.logger = this.logger;
                 }
-                // TODO improve me after drop `bypass` to always generate error when configuration is bad
-                if (!proxyConfig.bypass) {
-                    util.deprecate(() => { }, `Invalid proxy configuration:\n\n${JSON.stringify(proxyConfig, null, 2)}\n\nThe use of proxy object notation as proxy routes has been removed.\nPlease use the 'router' or 'context' options. Read more at https://github.com/chimurai/http-proxy-middleware/tree/v2.0.6#http-proxy-middleware-options`, 'DEP_WEBPACK_DEV_SERVER_PROXY_ROUTES_ARGUMENT')();
+                if (proxyOptions.target || proxyOptions.router) {
+                    return createProxyMiddleware(proxyOptions);
                 }
+                util.deprecate(() => { }, `Invalid proxy configuration:\n\n${JSON.stringify(proxyConfig, null, 2)}\n\nThe use of proxy object notation as proxy routes has been removed.\nPlease use the 'router' or 'context' options. Read more at https://github.com/chimurai/http-proxy-middleware`, 'DEP_WEBPACK_DEV_SERVER_PROXY_ROUTES_ARGUMENT')();
             };
             /**
              * @example
@@ -1473,34 +1360,10 @@ class Server {
                             proxyMiddleware = getProxyMiddleware(proxyConfig);
                         }
                     }
-                    // - Check if we have a bypass function defined
-                    // - In case the bypass function is defined we'll retrieve the
-                    // bypassUrl from it otherwise bypassUrl would be null
-                    // TODO remove in the next major in favor `context` and `router` options
-                    const isByPassFuncDefined = typeof proxyConfig.bypass === 'function';
-                    if (isByPassFuncDefined) {
-                        util.deprecate(() => { }, "Using the 'bypass' option is deprecated. Please use the 'router' or 'context' options. Read more at https://github.com/chimurai/http-proxy-middleware/tree/v2.0.6#http-proxy-middleware-options", 'DEP_WEBPACK_DEV_SERVER_PROXY_BYPASS_ARGUMENT')();
-                    }
-                    const bypassUrl = isByPassFuncDefined
-                        ? await proxyConfig.bypass(req, res, proxyConfig)
-                        : null;
-                    if (typeof bypassUrl === 'boolean') {
-                        // skip the proxy
-                        res.statusCode = 404;
-                        req.url = '';
-                        next();
-                    }
-                    else if (typeof bypassUrl === 'string') {
-                        // byPass to that url
-                        req.url = bypassUrl;
-                        next();
-                    }
-                    else if (proxyMiddleware) {
+                    if (proxyMiddleware) {
                         return proxyMiddleware(req, res, next);
                     }
-                    else {
-                        next();
-                    }
+                    next();
                 };
                 middlewares.push({
                     name: 'http-proxy-middleware',
@@ -1659,15 +1522,11 @@ class Server {
         });
     }
     createWebSocketServer() {
-        // @ts-expect-error constructor
         this.webSocketServer = new (this.getServerTransport())(this);
         (this.webSocketServer?.implementation).on('connection', (client, request) => {
             const headers = typeof request !== 'undefined'
                 ? request.headers
-                : typeof client
-                    .headers !== 'undefined'
-                    ? client.headers
-                    : undefined;
+                : undefined;
             if (!headers) {
                 this.logger.warn('webSocketServer implementation must pass headers for the "connection" event');
             }
@@ -1741,56 +1600,7 @@ class Server {
             });
         }));
     }
-    runBonjour() {
-        const { Bonjour } = require('bonjour-service');
-        const type = this.isTlsServer ? 'https' : 'http';
-        this.bonjour = new Bonjour();
-        this.bonjour?.publish({
-            name: `Webpack Dev Server ${os.hostname()}:${this.options.port}`,
-            port: this.options.port,
-            type,
-            subtypes: ['webpack'],
-            ...this.options.bonjour,
-        });
-    }
-    stopBonjour(callback = () => { }) {
-        this.bonjour?.unpublishAll(() => {
-            this.bonjour?.destroy();
-            if (callback) {
-                callback();
-            }
-        });
-    }
     async logStatus() {
-        const { cyan, isColorSupported, red } = require('colorette');
-        const getColorsOption = (compilerOptions) => {
-            let colorsEnabled;
-            if (compilerOptions.stats &&
-                typeof compilerOptions.stats.colors !==
-                    'undefined') {
-                colorsEnabled = compilerOptions.stats
-                    .colors;
-            }
-            else {
-                colorsEnabled = isColorSupported;
-            }
-            return colorsEnabled;
-        };
-        const colors = {
-            info(useColor, msg) {
-                if (useColor) {
-                    return cyan(msg);
-                }
-                return msg;
-            },
-            error(useColor, msg) {
-                if (useColor) {
-                    return red(msg);
-                }
-                return msg;
-            },
-        };
-        const useColor = getColorsOption(this.getCompilerOptions());
         const server = this.server;
         if (this.options.ipc) {
             this.logger.info(`Project is running at: "${server?.address()}"`);
@@ -1803,28 +1613,13 @@ class Server {
             }
             const { address, port } = addressInfo;
             const prettyPrintURL = (newHostname) => url.format({ protocol, hostname: newHostname, port, pathname: '/' });
-            let host;
             let localhost;
             let loopbackIPv4;
             let loopbackIPv6;
             let networkUrlIPv4;
             let networkUrlIPv6;
-            if (this.options.host) {
-                if (this.options.host === 'localhost') {
-                    localhost = prettyPrintURL('localhost');
-                }
-                else {
-                    let isIP;
-                    try {
-                        isIP = ipaddr.parse(this.options.host);
-                    }
-                    catch {
-                        // Ignore
-                    }
-                    if (!isIP) {
-                        host = prettyPrintURL(this.options.host);
-                    }
-                }
+            if (this.options.host === 'localhost') {
+                localhost = prettyPrintURL('localhost');
             }
             const parsedIP = ipaddr.parse(address);
             if (parsedIP.range() === 'unspecified') {
@@ -1856,28 +1651,19 @@ class Server {
                     networkUrlIPv6 = prettyPrintURL(address);
                 }
             }
-            this.logger.info('Project is running at:');
-            if (host) {
-                this.logger.info(`Server: ${colors.info(useColor, host)}`);
-            }
-            if (localhost || loopbackIPv4 || loopbackIPv6) {
-                const loopbacks = [];
-                if (localhost) {
-                    loopbacks.push([colors.info(useColor, localhost)]);
-                }
-                if (loopbackIPv4) {
-                    loopbacks.push([colors.info(useColor, loopbackIPv4)]);
-                }
-                if (loopbackIPv6) {
-                    loopbacks.push([colors.info(useColor, loopbackIPv6)]);
-                }
-                this.logger.info(`Loopback: ${loopbacks.join(', ')}`);
+            const urlLogs = [];
+            const local = localhost || loopbackIPv4 || loopbackIPv6;
+            if (local) {
+                urlLogs.push(`  ${styleText('white', '➜')}  ${styleText(['white', 'dim'], 'Local:')}    ${styleText('cyan', local)}`);
             }
             if (networkUrlIPv4) {
-                this.logger.info(`On Your Network (IPv4): ${colors.info(useColor, networkUrlIPv4)}`);
+                urlLogs.push(`  ${styleText('white', '➜')}  ${styleText(['white', 'dim'], 'Network:')}  ${styleText('cyan', networkUrlIPv4)}`);
+            }
+            else if (networkUrlIPv6) {
+                urlLogs.push(`  ${styleText('white', '➜')}  ${styleText(['white', 'dim'], 'Network:')}  ${styleText('cyan', networkUrlIPv6)}`);
             }
-            if (networkUrlIPv6) {
-                this.logger.info(`On Your Network (IPv6): ${colors.info(useColor, networkUrlIPv6)}`);
+            if (urlLogs.length && this.shouldLogInfrastructureInfo()) {
+                console.log(`${urlLogs.join('\n')}\n`);
             }
             if (this.options.open?.length > 0) {
                 const openTarget = prettyPrintURL(!this.options.host ||
@@ -1888,22 +1674,6 @@ class Server {
                 await this.openBrowser(openTarget);
             }
         }
-        if (this.options.static?.length > 0) {
-            this.logger.info(`Content not from webpack is served from '${colors.info(useColor, this.options.static
-                .map((staticOption) => staticOption.directory)
-                .join(', '))}' directory`);
-        }
-        if (this.options.historyApiFallback) {
-            this.logger.info(`404s will fallback to '${colors.info(useColor, this.options.historyApiFallback
-                .index || '/index.html')}'`);
-        }
-        if (this.options.bonjour) {
-            const bonjourProtocol = this.options.bonjour?.type ||
-                this.isTlsServer
-                ? 'https'
-                : 'http';
-            this.logger.info(`Broadcasting "${bonjourProtocol}" with subtype of "webpack" via ZeroConf DNS (Bonjour)`);
-        }
     }
     setHeaders(req, res, next) {
         let { headers } = this.options;
@@ -1971,12 +1741,7 @@ class Server {
         if (DEFAULT_ALLOWED_PROTOCOLS.test(header)) {
             return true;
         }
-        // use the node url-parser to retrieve the hostname from the host-header.
-        // TODO resolve me in the next major release
-        // eslint-disable-next-line n/no-deprecated-api
-        const { hostname } = url.parse(
-        // if header doesn't have scheme, add // for parsing.
-        /^(.+:)?\/\//.test(header) ? header : `//${header}`, false, true);
+        const hostname = parseHostnameFromHeader(header);
         if (hostname === null) {
             return false;
         }
@@ -1987,8 +1752,8 @@ class Server {
         // A note on IPv6 addresses:
         // header will always contain the brackets denoting
         // an IPv6-address in URLs,
-        // these are removed from the hostname in url.parse(),
-        // so we have the pure IPv6-address in hostname.
+        // these are not removed from `URL#hostname`,
+        // so we normalize to a pure IPv6-address when parsing.
         // For convenience, always allow localhost (hostname === 'localhost')
         // and its subdomains (hostname.endsWith(".localhost")).
         // allow hostname of listening address  (hostname === this.options.host)
@@ -2012,9 +1777,7 @@ class Server {
         if (DEFAULT_ALLOWED_PROTOCOLS.test(originHeader)) {
             return true;
         }
-        // TODO resolve me in the next major release
-        // eslint-disable-next-line n/no-deprecated-api
-        const origin = url.parse(originHeader, false, true).hostname;
+        const origin = parseHostnameFromHeader(originHeader);
         if (origin === null) {
             return false;
         }
@@ -2028,10 +1791,7 @@ class Server {
         if (DEFAULT_ALLOWED_PROTOCOLS.test(hostHeader)) {
             return true;
         }
-        // eslint-disable-next-line n/no-deprecated-api
-        const host = url.parse(
-        // if hostHeader doesn't have scheme, add // for parsing.
-        /^(.+:)?\/\//.test(hostHeader) ? hostHeader : `//${hostHeader}`, false, true).hostname;
+        const host = parseHostnameFromHeader(hostHeader);
         if (host === null) {
             return false;
         }
@@ -2042,8 +1802,7 @@ class Server {
     }
     sendMessage(clients, type, data, params) {
         for (const client of clients) {
-            // `sockjs` uses `1` to indicate client is ready to accept data
-            // `ws` uses `WebSocket.OPEN`, but it is mean `1` too
+            // `ws` uses `WebSocket.OPEN` to indicate client is ready to accept data
             if (client.readyState === 1) {
                 client.send(JSON.stringify({ type, data, params }));
             }
@@ -2147,9 +1906,6 @@ class Server {
         if (this.options.webSocketServer) {
             this.createWebSocketServer();
         }
-        if (this.options.bonjour) {
-            this.runBonjour();
-        }
         await this.logStatus();
         if (typeof this.options.onListening === 'function') {
             this.options.onListening(this);
@@ -2161,13 +1917,6 @@ class Server {
             .catch(callback);
     }
     async stop() {
-        if (this.bonjour) {
-            await new Promise((resolve) => {
-                this.stopBonjour(() => {
-                    resolve();
-                });
-            });
-        }
         this.webSocketProxies = [];
         await Promise.all(this.staticWatchers.map((watcher) => watcher.close()));
         this.staticWatchers = [];