3594 lines
102 KiB
JavaScript
3594 lines
102 KiB
JavaScript
"use strict";
|
|
|
|
const os = require("os");
|
|
const path = require("path");
|
|
const url = require("url");
|
|
const util = require("util");
|
|
const fs = require("graceful-fs");
|
|
const ipaddr = require("ipaddr.js");
|
|
const { validate } = require("schema-utils");
|
|
const schema = require("./options.json");
|
|
|
|
/** @typedef {import("schema-utils/declarations/validate").Schema} Schema */
|
|
/** @typedef {import("webpack").Compiler} Compiler */
|
|
/** @typedef {import("webpack").MultiCompiler} MultiCompiler */
|
|
/** @typedef {import("webpack").Configuration} WebpackConfiguration */
|
|
/** @typedef {import("webpack").StatsOptions} StatsOptions */
|
|
/** @typedef {import("webpack").StatsCompilation} StatsCompilation */
|
|
/** @typedef {import("webpack").Stats} Stats */
|
|
/** @typedef {import("webpack").MultiStats} MultiStats */
|
|
/** @typedef {import("os").NetworkInterfaceInfo} NetworkInterfaceInfo */
|
|
/** @typedef {import("express").Request} Request */
|
|
/** @typedef {import("express").Response} Response */
|
|
/** @typedef {import("express").NextFunction} NextFunction */
|
|
/** @typedef {import("express").RequestHandler} ExpressRequestHandler */
|
|
/** @typedef {import("express").ErrorRequestHandler} ExpressErrorRequestHandler */
|
|
/** @typedef {import("chokidar").WatchOptions} WatchOptions */
|
|
/** @typedef {import("chokidar").FSWatcher} FSWatcher */
|
|
/** @typedef {import("connect-history-api-fallback").Options} ConnectHistoryApiFallbackOptions */
|
|
/** @typedef {import("bonjour-service").Bonjour} Bonjour */
|
|
/** @typedef {import("bonjour-service").Service} BonjourOptions */
|
|
/** @typedef {import("http-proxy-middleware").RequestHandler} RequestHandler */
|
|
/** @typedef {import("http-proxy-middleware").Options} HttpProxyMiddlewareOptions */
|
|
/** @typedef {import("http-proxy-middleware").Filter} HttpProxyMiddlewareOptionsFilter */
|
|
/** @typedef {import("serve-index").Options} ServeIndexOptions */
|
|
/** @typedef {import("serve-static").ServeStaticOptions} ServeStaticOptions */
|
|
/** @typedef {import("ipaddr.js").IPv4} IPv4 */
|
|
/** @typedef {import("ipaddr.js").IPv6} IPv6 */
|
|
/** @typedef {import("net").Socket} Socket */
|
|
/** @typedef {import("http").IncomingMessage} IncomingMessage */
|
|
/** @typedef {import("open").Options} OpenOptions */
|
|
|
|
/** @typedef {import("https").ServerOptions & { spdy?: { plain?: boolean | undefined, ssl?: boolean | undefined, 'x-forwarded-for'?: string | undefined, protocol?: string | undefined, protocols?: string[] | undefined }}} ServerOptions */
|
|
|
|
/**
|
|
* @template Request, Response
|
|
* @typedef {import("webpack-dev-middleware").Options<Request, Response>} DevMiddlewareOptions
|
|
*/
|
|
|
|
/**
|
|
* @template Request, Response
|
|
* @typedef {import("webpack-dev-middleware").Context<Request, Response>} DevMiddlewareContext
|
|
*/
|
|
|
|
/**
|
|
* @typedef {"local-ip" | "local-ipv4" | "local-ipv6" | string} Host
|
|
*/
|
|
|
|
/**
|
|
* @typedef {number | string | "auto"} Port
|
|
*/
|
|
|
|
/**
|
|
* @typedef {Object} WatchFiles
|
|
* @property {string | string[]} paths
|
|
* @property {WatchOptions & { aggregateTimeout?: number, ignored?: WatchOptions["ignored"], poll?: number | boolean }} [options]
|
|
*/
|
|
|
|
/**
|
|
* @typedef {Object} Static
|
|
* @property {string} [directory]
|
|
* @property {string | string[]} [publicPath]
|
|
* @property {boolean | ServeIndexOptions} [serveIndex]
|
|
* @property {ServeStaticOptions} [staticOptions]
|
|
* @property {boolean | WatchOptions & { aggregateTimeout?: number, ignored?: WatchOptions["ignored"], poll?: number | boolean }} [watch]
|
|
*/
|
|
|
|
/**
|
|
* @typedef {Object} NormalizedStatic
|
|
* @property {string} directory
|
|
* @property {string[]} publicPath
|
|
* @property {false | ServeIndexOptions} serveIndex
|
|
* @property {ServeStaticOptions} staticOptions
|
|
* @property {false | WatchOptions} watch
|
|
*/
|
|
|
|
/**
|
|
* @typedef {Object} ServerConfiguration
|
|
* @property {"http" | "https" | "spdy" | string} [type]
|
|
* @property {ServerOptions} [options]
|
|
*/
|
|
|
|
/**
|
|
* @typedef {Object} WebSocketServerConfiguration
|
|
* @property {"sockjs" | "ws" | string | Function} [type]
|
|
* @property {Record<string, any>} [options]
|
|
*/
|
|
|
|
/**
|
|
* @typedef {(import("ws").WebSocket | import("sockjs").Connection & { send: import("ws").WebSocket["send"], terminate: import("ws").WebSocket["terminate"], ping: import("ws").WebSocket["ping"] }) & { isAlive?: boolean }} ClientConnection
|
|
*/
|
|
|
|
/**
|
|
* @typedef {import("ws").WebSocketServer | import("sockjs").Server & { close: import("ws").WebSocketServer["close"] }} WebSocketServer
|
|
*/
|
|
|
|
/**
|
|
* @typedef {{ implementation: WebSocketServer, clients: ClientConnection[] }} WebSocketServerImplementation
|
|
*/
|
|
|
|
/**
|
|
* @callback ByPass
|
|
* @param {Request} req
|
|
* @param {Response} res
|
|
* @param {ProxyConfigArrayItem} proxyConfig
|
|
*/
|
|
|
|
/**
|
|
* @typedef {{ path?: HttpProxyMiddlewareOptionsFilter | undefined, context?: HttpProxyMiddlewareOptionsFilter | undefined } & { bypass?: ByPass } & HttpProxyMiddlewareOptions } ProxyConfigArrayItem
|
|
*/
|
|
|
|
/**
|
|
* @typedef {(ProxyConfigArrayItem | ((req?: Request | undefined, res?: Response | undefined, next?: NextFunction | undefined) => ProxyConfigArrayItem))[]} ProxyConfigArray
|
|
*/
|
|
|
|
/**
|
|
* @typedef {{ [url: string]: string | ProxyConfigArrayItem }} ProxyConfigMap
|
|
*/
|
|
|
|
/**
|
|
* @typedef {Object} OpenApp
|
|
* @property {string} [name]
|
|
* @property {string[]} [arguments]
|
|
*/
|
|
|
|
/**
|
|
* @typedef {Object} Open
|
|
* @property {string | string[] | OpenApp} [app]
|
|
* @property {string | string[]} [target]
|
|
*/
|
|
|
|
/**
|
|
* @typedef {Object} NormalizedOpen
|
|
* @property {string} target
|
|
* @property {import("open").Options} options
|
|
*/
|
|
|
|
/**
|
|
* @typedef {Object} WebSocketURL
|
|
* @property {string} [hostname]
|
|
* @property {string} [password]
|
|
* @property {string} [pathname]
|
|
* @property {number | string} [port]
|
|
* @property {string} [protocol]
|
|
* @property {string} [username]
|
|
*/
|
|
|
|
/**
|
|
* @typedef {boolean | ((error: Error) => void)} OverlayMessageOptions
|
|
*/
|
|
|
|
/**
|
|
* @typedef {Object} ClientConfiguration
|
|
* @property {"log" | "info" | "warn" | "error" | "none" | "verbose"} [logging]
|
|
* @property {boolean | { warnings?: OverlayMessageOptions, errors?: OverlayMessageOptions, runtimeErrors?: OverlayMessageOptions }} [overlay]
|
|
* @property {boolean} [progress]
|
|
* @property {boolean | number} [reconnect]
|
|
* @property {"ws" | "sockjs" | string} [webSocketTransport]
|
|
* @property {string | WebSocketURL} [webSocketURL]
|
|
*/
|
|
|
|
/**
|
|
* @typedef {Array<{ key: string; value: string }> | Record<string, string | string[]>} Headers
|
|
*/
|
|
|
|
/**
|
|
* @typedef {{ name?: string, path?: string, middleware: ExpressRequestHandler | ExpressErrorRequestHandler } | ExpressRequestHandler | ExpressErrorRequestHandler} Middleware
|
|
*/
|
|
|
|
/**
|
|
* @typedef {Object} Configuration
|
|
* @property {boolean | string} [ipc]
|
|
* @property {Host} [host]
|
|
* @property {Port} [port]
|
|
* @property {boolean | "only"} [hot]
|
|
* @property {boolean} [liveReload]
|
|
* @property {DevMiddlewareOptions<Request, Response>} [devMiddleware]
|
|
* @property {boolean} [compress]
|
|
* @property {boolean} [magicHtml]
|
|
* @property {"auto" | "all" | string | string[]} [allowedHosts]
|
|
* @property {boolean | ConnectHistoryApiFallbackOptions} [historyApiFallback]
|
|
* @property {boolean | Record<string, never> | BonjourOptions} [bonjour]
|
|
* @property {string | string[] | WatchFiles | Array<string | WatchFiles>} [watchFiles]
|
|
* @property {boolean | string | Static | Array<string | Static>} [static]
|
|
* @property {boolean | ServerOptions} [https]
|
|
* @property {boolean} [http2]
|
|
* @property {"http" | "https" | "spdy" | string | ServerConfiguration} [server]
|
|
* @property {boolean | "sockjs" | "ws" | string | WebSocketServerConfiguration} [webSocketServer]
|
|
* @property {ProxyConfigMap | ProxyConfigArrayItem | ProxyConfigArray} [proxy]
|
|
* @property {boolean | string | Open | Array<string | Open>} [open]
|
|
* @property {boolean} [setupExitSignals]
|
|
* @property {boolean | ClientConfiguration} [client]
|
|
* @property {Headers | ((req: Request, res: Response, context: DevMiddlewareContext<Request, Response>) => Headers)} [headers]
|
|
* @property {(devServer: Server) => void} [onAfterSetupMiddleware]
|
|
* @property {(devServer: Server) => void} [onBeforeSetupMiddleware]
|
|
* @property {(devServer: Server) => void} [onListening]
|
|
* @property {(middlewares: Middleware[], devServer: Server) => Middleware[]} [setupMiddlewares]
|
|
*/
|
|
|
|
if (!process.env.WEBPACK_SERVE) {
|
|
// TODO fix me in the next major release
|
|
// @ts-ignore
|
|
process.env.WEBPACK_SERVE = true;
|
|
}
|
|
|
|
/**
|
|
* @template T
|
|
* @param fn {(function(): any) | undefined}
|
|
* @returns {function(): T}
|
|
*/
|
|
const memoize = (fn) => {
|
|
let cache = false;
|
|
/** @type {T} */
|
|
let result;
|
|
|
|
return () => {
|
|
if (cache) {
|
|
return result;
|
|
}
|
|
|
|
result = /** @type {function(): any} */ (fn)();
|
|
cache = true;
|
|
// Allow to clean up memory for fn
|
|
// and all dependent resources
|
|
// eslint-disable-next-line no-undefined
|
|
fn = undefined;
|
|
|
|
return result;
|
|
};
|
|
};
|
|
|
|
const getExpress = memoize(() => require("express"));
|
|
|
|
/**
|
|
*
|
|
* @param {OverlayMessageOptions} [setting]
|
|
* @returns
|
|
*/
|
|
const encodeOverlaySettings = (setting) =>
|
|
typeof setting === "function"
|
|
? encodeURIComponent(setting.toString())
|
|
: setting;
|
|
|
|
class Server {
|
|
/**
|
|
* @param {Configuration | Compiler | MultiCompiler} options
|
|
* @param {Compiler | MultiCompiler | Configuration} compiler
|
|
*/
|
|
constructor(options = {}, compiler) {
|
|
// TODO: remove this after plugin support is published
|
|
if (/** @type {Compiler | MultiCompiler} */ (options).hooks) {
|
|
util.deprecate(
|
|
() => {},
|
|
"Using 'compiler' as the first argument is deprecated. Please use 'options' as the first argument and 'compiler' as the second argument.",
|
|
"DEP_WEBPACK_DEV_SERVER_CONSTRUCTOR"
|
|
)();
|
|
|
|
[options = {}, compiler] = [compiler, options];
|
|
}
|
|
|
|
validate(/** @type {Schema} */ (schema), options, {
|
|
name: "Dev Server",
|
|
baseDataPath: "options",
|
|
});
|
|
|
|
this.compiler = /** @type {Compiler | MultiCompiler} */ (compiler);
|
|
/**
|
|
* @type {ReturnType<Compiler["getInfrastructureLogger"]>}
|
|
* */
|
|
this.logger = this.compiler.getInfrastructureLogger("webpack-dev-server");
|
|
this.options = /** @type {Configuration} */ (options);
|
|
/**
|
|
* @type {FSWatcher[]}
|
|
*/
|
|
this.staticWatchers = [];
|
|
/**
|
|
* @private
|
|
* @type {{ name: string | symbol, listener: (...args: any[]) => void}[] }}
|
|
*/
|
|
this.listeners = [];
|
|
// Keep track of websocket proxies for external websocket upgrade.
|
|
/**
|
|
* @private
|
|
* @type {RequestHandler[]}
|
|
*/
|
|
this.webSocketProxies = [];
|
|
/**
|
|
* @type {Socket[]}
|
|
*/
|
|
this.sockets = [];
|
|
/**
|
|
* @private
|
|
* @type {string | undefined}
|
|
*/
|
|
// eslint-disable-next-line no-undefined
|
|
this.currentHash = undefined;
|
|
}
|
|
|
|
// TODO compatibility with webpack v4, remove it after drop
|
|
static get cli() {
|
|
return {
|
|
get getArguments() {
|
|
return () => require("../bin/cli-flags");
|
|
},
|
|
get processArguments() {
|
|
return require("../bin/process-arguments");
|
|
},
|
|
};
|
|
}
|
|
|
|
static get schema() {
|
|
return schema;
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
* @returns {StatsOptions}
|
|
* @constructor
|
|
*/
|
|
static get DEFAULT_STATS() {
|
|
return {
|
|
all: false,
|
|
hash: true,
|
|
warnings: true,
|
|
errors: true,
|
|
errorDetails: false,
|
|
};
|
|
}
|
|
|
|
/**
|
|
* @param {string} URL
|
|
* @returns {boolean}
|
|
*/
|
|
static isAbsoluteURL(URL) {
|
|
// Don't match Windows paths `c:\`
|
|
if (/^[a-zA-Z]:\\/.test(URL)) {
|
|
return false;
|
|
}
|
|
|
|
// Scheme: https://tools.ietf.org/html/rfc3986#section-3.1
|
|
// Absolute URL: https://tools.ietf.org/html/rfc3986#section-4.3
|
|
return /^[a-zA-Z][a-zA-Z\d+\-.]*:/.test(URL);
|
|
}
|
|
|
|
/**
|
|
* @param {string} gateway
|
|
* @returns {string | undefined}
|
|
*/
|
|
static findIp(gateway) {
|
|
const gatewayIp = ipaddr.parse(gateway);
|
|
|
|
// Look for the matching interface in all local interfaces.
|
|
for (const addresses of Object.values(os.networkInterfaces())) {
|
|
for (const { cidr } of /** @type {NetworkInterfaceInfo[]} */ (
|
|
addresses
|
|
)) {
|
|
const net = ipaddr.parseCIDR(/** @type {string} */ (cidr));
|
|
|
|
if (
|
|
net[0] &&
|
|
net[0].kind() === gatewayIp.kind() &&
|
|
gatewayIp.match(net)
|
|
) {
|
|
return net[0].toString();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @param {"v4" | "v6"} family
|
|
* @returns {Promise<string | undefined>}
|
|
*/
|
|
static async internalIP(family) {
|
|
try {
|
|
const { gateway } = await require("default-gateway")[family]();
|
|
return Server.findIp(gateway);
|
|
} catch {
|
|
// ignore
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @param {"v4" | "v6"} family
|
|
* @returns {string | undefined}
|
|
*/
|
|
static internalIPSync(family) {
|
|
try {
|
|
const { gateway } = require("default-gateway")[family].sync();
|
|
return Server.findIp(gateway);
|
|
} catch {
|
|
// ignore
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @param {Host} hostname
|
|
* @returns {Promise<string>}
|
|
*/
|
|
static async getHostname(hostname) {
|
|
if (hostname === "local-ip") {
|
|
return (
|
|
(await Server.internalIP("v4")) ||
|
|
(await Server.internalIP("v6")) ||
|
|
"0.0.0.0"
|
|
);
|
|
} else if (hostname === "local-ipv4") {
|
|
return (await Server.internalIP("v4")) || "0.0.0.0";
|
|
} else if (hostname === "local-ipv6") {
|
|
return (await Server.internalIP("v6")) || "::";
|
|
}
|
|
|
|
return hostname;
|
|
}
|
|
|
|
/**
|
|
* @param {Port} port
|
|
* @param {string} host
|
|
* @returns {Promise<number | string>}
|
|
*/
|
|
static async getFreePort(port, host) {
|
|
if (typeof port !== "undefined" && port !== null && port !== "auto") {
|
|
return port;
|
|
}
|
|
|
|
const pRetry = require("p-retry");
|
|
const getPort = require("./getPort");
|
|
const basePort =
|
|
typeof process.env.WEBPACK_DEV_SERVER_BASE_PORT !== "undefined"
|
|
? parseInt(process.env.WEBPACK_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"
|
|
? parseInt(process.env.WEBPACK_DEV_SERVER_PORT_RETRY, 10)
|
|
: 3;
|
|
|
|
return pRetry(() => getPort(basePort, host), {
|
|
retries: defaultPortRetry,
|
|
});
|
|
}
|
|
|
|
/**
|
|
* @returns {string}
|
|
*/
|
|
static findCacheDir() {
|
|
const cwd = process.cwd();
|
|
|
|
/**
|
|
* @type {string | undefined}
|
|
*/
|
|
let dir = cwd;
|
|
|
|
for (;;) {
|
|
try {
|
|
if (fs.statSync(path.join(dir, "package.json")).isFile()) break;
|
|
// eslint-disable-next-line no-empty
|
|
} catch (e) {}
|
|
|
|
const parent = path.dirname(dir);
|
|
|
|
if (dir === parent) {
|
|
// eslint-disable-next-line no-undefined
|
|
dir = undefined;
|
|
break;
|
|
}
|
|
|
|
dir = parent;
|
|
}
|
|
|
|
if (!dir) {
|
|
return path.resolve(cwd, ".cache/webpack-dev-server");
|
|
} else if (process.versions.pnp === "1") {
|
|
return path.resolve(dir, ".pnp/.cache/webpack-dev-server");
|
|
} else if (process.versions.pnp === "3") {
|
|
return path.resolve(dir, ".yarn/.cache/webpack-dev-server");
|
|
}
|
|
|
|
return path.resolve(dir, "node_modules/.cache/webpack-dev-server");
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
* @param {Compiler} compiler
|
|
* @returns bool
|
|
*/
|
|
static isWebTarget(compiler) {
|
|
// TODO improve for the next major version - we should store `web` and other targets in `compiler.options.environment`
|
|
if (
|
|
compiler.options.externalsPresets &&
|
|
compiler.options.externalsPresets.web
|
|
) {
|
|
return true;
|
|
}
|
|
|
|
if (
|
|
compiler.options.resolve.conditionNames &&
|
|
compiler.options.resolve.conditionNames.includes("browser")
|
|
) {
|
|
return true;
|
|
}
|
|
|
|
const webTargets = [
|
|
"web",
|
|
"webworker",
|
|
"electron-preload",
|
|
"electron-renderer",
|
|
"node-webkit",
|
|
// eslint-disable-next-line no-undefined
|
|
undefined,
|
|
null,
|
|
];
|
|
|
|
if (Array.isArray(compiler.options.target)) {
|
|
return compiler.options.target.some((r) => webTargets.includes(r));
|
|
}
|
|
|
|
return webTargets.includes(/** @type {string} */ (compiler.options.target));
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
* @param {Compiler} compiler
|
|
*/
|
|
addAdditionalEntries(compiler) {
|
|
/**
|
|
* @type {string[]}
|
|
*/
|
|
const additionalEntries = [];
|
|
const isWebTarget = Server.isWebTarget(compiler);
|
|
|
|
// TODO maybe empty client
|
|
if (this.options.client && isWebTarget) {
|
|
let webSocketURLStr = "";
|
|
|
|
if (this.options.webSocketServer) {
|
|
const webSocketURL =
|
|
/** @type {WebSocketURL} */
|
|
(
|
|
/** @type {ClientConfiguration} */
|
|
(this.options.client).webSocketURL
|
|
);
|
|
const webSocketServer =
|
|
/** @type {{ type: WebSocketServerConfiguration["type"], options: NonNullable<WebSocketServerConfiguration["options"]> }} */
|
|
(this.options.webSocketServer);
|
|
const searchParams = new URLSearchParams();
|
|
|
|
/** @type {string} */
|
|
let protocol;
|
|
|
|
// We are proxying dev server and need to specify custom `hostname`
|
|
if (typeof webSocketURL.protocol !== "undefined") {
|
|
protocol = webSocketURL.protocol;
|
|
} else {
|
|
protocol =
|
|
/** @type {ServerConfiguration} */
|
|
(this.options.server).type === "http" ? "ws:" : "wss:";
|
|
}
|
|
|
|
searchParams.set("protocol", protocol);
|
|
|
|
if (typeof webSocketURL.username !== "undefined") {
|
|
searchParams.set("username", webSocketURL.username);
|
|
}
|
|
|
|
if (typeof webSocketURL.password !== "undefined") {
|
|
searchParams.set("password", webSocketURL.password);
|
|
}
|
|
|
|
/** @type {string} */
|
|
let hostname;
|
|
|
|
// SockJS is not supported server mode, so `hostname` and `port` can't specified, let's ignore them
|
|
// TODO show warning about this
|
|
const isSockJSType = webSocketServer.type === "sockjs";
|
|
|
|
// 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 (
|
|
typeof webSocketServer.options.host !== "undefined" &&
|
|
!isSockJSType
|
|
) {
|
|
hostname = webSocketServer.options.host;
|
|
}
|
|
// The `host` option is specified
|
|
else if (typeof this.options.host !== "undefined") {
|
|
hostname = this.options.host;
|
|
}
|
|
// The `port` option is not specified
|
|
else {
|
|
hostname = "0.0.0.0";
|
|
}
|
|
|
|
searchParams.set("hostname", hostname);
|
|
|
|
/** @type {number | string} */
|
|
let port;
|
|
|
|
// We are proxying dev server and need to specify custom `port`
|
|
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 (
|
|
typeof webSocketServer.options.port !== "undefined" &&
|
|
!isSockJSType
|
|
) {
|
|
port = webSocketServer.options.port;
|
|
}
|
|
// The `port` option is specified
|
|
else if (typeof this.options.port === "number") {
|
|
port = this.options.port;
|
|
}
|
|
// The `port` option is specified using `string`
|
|
else if (
|
|
typeof this.options.port === "string" &&
|
|
this.options.port !== "auto"
|
|
) {
|
|
port = Number(this.options.port);
|
|
}
|
|
// The `port` option is not specified or set to `auto`
|
|
else {
|
|
port = "0";
|
|
}
|
|
|
|
searchParams.set("port", String(port));
|
|
|
|
/** @type {string} */
|
|
let pathname = "";
|
|
|
|
// We are proxying dev server and need to specify custom `pathname`
|
|
if (typeof webSocketURL.pathname !== "undefined") {
|
|
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;
|
|
}
|
|
|
|
searchParams.set("pathname", pathname);
|
|
|
|
const client = /** @type {ClientConfiguration} */ (this.options.client);
|
|
|
|
if (typeof client.logging !== "undefined") {
|
|
searchParams.set("logging", client.logging);
|
|
}
|
|
|
|
if (typeof client.progress !== "undefined") {
|
|
searchParams.set("progress", String(client.progress));
|
|
}
|
|
|
|
if (typeof client.overlay !== "undefined") {
|
|
const overlayString =
|
|
typeof client.overlay === "boolean"
|
|
? String(client.overlay)
|
|
: JSON.stringify({
|
|
...client.overlay,
|
|
errors: encodeOverlaySettings(client.overlay.errors),
|
|
warnings: encodeOverlaySettings(client.overlay.warnings),
|
|
runtimeErrors: encodeOverlaySettings(
|
|
client.overlay.runtimeErrors
|
|
),
|
|
});
|
|
|
|
searchParams.set("overlay", overlayString);
|
|
}
|
|
|
|
if (typeof client.reconnect !== "undefined") {
|
|
searchParams.set(
|
|
"reconnect",
|
|
typeof client.reconnect === "number"
|
|
? String(client.reconnect)
|
|
: "10"
|
|
);
|
|
}
|
|
|
|
if (typeof this.options.hot !== "undefined") {
|
|
searchParams.set("hot", String(this.options.hot));
|
|
}
|
|
|
|
if (typeof this.options.liveReload !== "undefined") {
|
|
searchParams.set("live-reload", String(this.options.liveReload));
|
|
}
|
|
|
|
webSocketURLStr = searchParams.toString();
|
|
}
|
|
|
|
additionalEntries.push(
|
|
`${require.resolve("../client/index.js")}?${webSocketURLStr}`
|
|
);
|
|
}
|
|
|
|
if (this.options.hot === "only") {
|
|
additionalEntries.push(require.resolve("webpack/hot/only-dev-server"));
|
|
} else if (this.options.hot) {
|
|
additionalEntries.push(require.resolve("webpack/hot/dev-server"));
|
|
}
|
|
|
|
const webpack = compiler.webpack || require("webpack");
|
|
|
|
// use a hook to add entries if available
|
|
if (typeof webpack.EntryPlugin !== "undefined") {
|
|
for (const additionalEntry of additionalEntries) {
|
|
new webpack.EntryPlugin(compiler.context, additionalEntry, {
|
|
// eslint-disable-next-line no-undefined
|
|
name: undefined,
|
|
}).apply(compiler);
|
|
}
|
|
}
|
|
// TODO remove after drop webpack v4 support
|
|
else {
|
|
/**
|
|
* prependEntry Method for webpack 4
|
|
* @param {any} originalEntry
|
|
* @param {any} newAdditionalEntries
|
|
* @returns {any}
|
|
*/
|
|
const prependEntry = (originalEntry, newAdditionalEntries) => {
|
|
if (typeof originalEntry === "function") {
|
|
return () =>
|
|
Promise.resolve(originalEntry()).then((entry) =>
|
|
prependEntry(entry, newAdditionalEntries)
|
|
);
|
|
}
|
|
|
|
if (
|
|
typeof originalEntry === "object" &&
|
|
!Array.isArray(originalEntry)
|
|
) {
|
|
/** @type {Object<string,string>} */
|
|
const clone = {};
|
|
|
|
Object.keys(originalEntry).forEach((key) => {
|
|
// entry[key] should be a string here
|
|
const entryDescription = originalEntry[key];
|
|
|
|
clone[key] = prependEntry(entryDescription, newAdditionalEntries);
|
|
});
|
|
|
|
return clone;
|
|
}
|
|
|
|
// in this case, entry is a string or an array.
|
|
// make sure that we do not add duplicates.
|
|
/** @type {any} */
|
|
const entriesClone = additionalEntries.slice(0);
|
|
|
|
[].concat(originalEntry).forEach((newEntry) => {
|
|
if (!entriesClone.includes(newEntry)) {
|
|
entriesClone.push(newEntry);
|
|
}
|
|
});
|
|
|
|
return entriesClone;
|
|
};
|
|
|
|
compiler.options.entry = prependEntry(
|
|
compiler.options.entry || "./src",
|
|
additionalEntries
|
|
);
|
|
compiler.hooks.entryOption.call(
|
|
/** @type {string} */ (compiler.options.context),
|
|
compiler.options.entry
|
|
);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
* @returns {Compiler["options"]}
|
|
*/
|
|
getCompilerOptions() {
|
|
if (
|
|
typeof (/** @type {MultiCompiler} */ (this.compiler).compilers) !==
|
|
"undefined"
|
|
) {
|
|
if (/** @type {MultiCompiler} */ (this.compiler).compilers.length === 1) {
|
|
return (
|
|
/** @type {MultiCompiler} */
|
|
(this.compiler).compilers[0].options
|
|
);
|
|
}
|
|
|
|
// Configuration with the `devServer` options
|
|
const compilerWithDevServer =
|
|
/** @type {MultiCompiler} */
|
|
(this.compiler).compilers.find((config) => config.options.devServer);
|
|
|
|
if (compilerWithDevServer) {
|
|
return compilerWithDevServer.options;
|
|
}
|
|
|
|
// Configuration with `web` preset
|
|
const compilerWithWebPreset =
|
|
/** @type {MultiCompiler} */
|
|
(this.compiler).compilers.find(
|
|
(config) =>
|
|
(config.options.externalsPresets &&
|
|
config.options.externalsPresets.web) ||
|
|
[
|
|
"web",
|
|
"webworker",
|
|
"electron-preload",
|
|
"electron-renderer",
|
|
"node-webkit",
|
|
// eslint-disable-next-line no-undefined
|
|
undefined,
|
|
null,
|
|
].includes(/** @type {string} */ (config.options.target))
|
|
);
|
|
|
|
if (compilerWithWebPreset) {
|
|
return compilerWithWebPreset.options;
|
|
}
|
|
|
|
// Fallback
|
|
return /** @type {MultiCompiler} */ (this.compiler).compilers[0].options;
|
|
}
|
|
|
|
return /** @type {Compiler} */ (this.compiler).options;
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
* @returns {Promise<void>}
|
|
*/
|
|
async normalizeOptions() {
|
|
const { options } = this;
|
|
const compilerOptions = this.getCompilerOptions();
|
|
// TODO remove `{}` after drop webpack v4 support
|
|
const compilerWatchOptions = compilerOptions.watchOptions || {};
|
|
/**
|
|
* @param {WatchOptions & { aggregateTimeout?: number, ignored?: WatchOptions["ignored"], poll?: number | boolean }} watchOptions
|
|
* @returns {WatchOptions}
|
|
*/
|
|
const getWatchOptions = (watchOptions = {}) => {
|
|
const getPolling = () => {
|
|
if (typeof watchOptions.usePolling !== "undefined") {
|
|
return watchOptions.usePolling;
|
|
}
|
|
|
|
if (typeof watchOptions.poll !== "undefined") {
|
|
return Boolean(watchOptions.poll);
|
|
}
|
|
|
|
if (typeof compilerWatchOptions.poll !== "undefined") {
|
|
return Boolean(compilerWatchOptions.poll);
|
|
}
|
|
|
|
return false;
|
|
};
|
|
const getInterval = () => {
|
|
if (typeof watchOptions.interval !== "undefined") {
|
|
return watchOptions.interval;
|
|
}
|
|
|
|
if (typeof watchOptions.poll === "number") {
|
|
return watchOptions.poll;
|
|
}
|
|
|
|
if (typeof compilerWatchOptions.poll === "number") {
|
|
return compilerWatchOptions.poll;
|
|
}
|
|
};
|
|
|
|
const usePolling = getPolling();
|
|
const interval = getInterval();
|
|
const { poll, ...rest } = watchOptions;
|
|
|
|
return {
|
|
ignoreInitial: true,
|
|
persistent: true,
|
|
followSymlinks: false,
|
|
atomic: false,
|
|
alwaysStat: true,
|
|
ignorePermissionErrors: true,
|
|
// Respect options from compiler watchOptions
|
|
usePolling,
|
|
interval,
|
|
ignored: watchOptions.ignored,
|
|
// TODO: we respect these options for all watch options and allow developers to pass them to chokidar, but chokidar doesn't have these options maybe we need revisit that in future
|
|
...rest,
|
|
};
|
|
};
|
|
/**
|
|
* @param {string | Static | undefined} [optionsForStatic]
|
|
* @returns {NormalizedStatic}
|
|
*/
|
|
const getStaticItem = (optionsForStatic) => {
|
|
const getDefaultStaticOptions = () => {
|
|
return {
|
|
directory: path.join(process.cwd(), "public"),
|
|
staticOptions: {},
|
|
publicPath: ["/"],
|
|
serveIndex: { icons: true },
|
|
watch: getWatchOptions(),
|
|
};
|
|
};
|
|
|
|
/** @type {NormalizedStatic} */
|
|
let item;
|
|
|
|
if (typeof optionsForStatic === "undefined") {
|
|
item = getDefaultStaticOptions();
|
|
} else if (typeof optionsForStatic === "string") {
|
|
item = {
|
|
...getDefaultStaticOptions(),
|
|
directory: optionsForStatic,
|
|
};
|
|
} else {
|
|
const def = getDefaultStaticOptions();
|
|
|
|
item = {
|
|
directory:
|
|
typeof optionsForStatic.directory !== "undefined"
|
|
? optionsForStatic.directory
|
|
: def.directory,
|
|
// TODO: do merge in the next major release
|
|
staticOptions:
|
|
typeof optionsForStatic.staticOptions !== "undefined"
|
|
? optionsForStatic.staticOptions
|
|
: def.staticOptions,
|
|
publicPath:
|
|
// eslint-disable-next-line no-nested-ternary
|
|
typeof optionsForStatic.publicPath !== "undefined"
|
|
? Array.isArray(optionsForStatic.publicPath)
|
|
? optionsForStatic.publicPath
|
|
: [optionsForStatic.publicPath]
|
|
: def.publicPath,
|
|
// TODO: do merge in the next major release
|
|
serveIndex:
|
|
// eslint-disable-next-line no-nested-ternary
|
|
typeof optionsForStatic.serveIndex !== "undefined"
|
|
? typeof optionsForStatic.serveIndex === "boolean" &&
|
|
optionsForStatic.serveIndex
|
|
? def.serveIndex
|
|
: optionsForStatic.serveIndex
|
|
: def.serveIndex,
|
|
watch:
|
|
// eslint-disable-next-line no-nested-ternary
|
|
typeof optionsForStatic.watch !== "undefined"
|
|
? // eslint-disable-next-line no-nested-ternary
|
|
typeof optionsForStatic.watch === "boolean"
|
|
? optionsForStatic.watch
|
|
? def.watch
|
|
: false
|
|
: getWatchOptions(optionsForStatic.watch)
|
|
: def.watch,
|
|
};
|
|
}
|
|
|
|
if (Server.isAbsoluteURL(item.directory)) {
|
|
throw new Error("Using a URL as static.directory is not supported");
|
|
}
|
|
|
|
return item;
|
|
};
|
|
|
|
if (typeof options.allowedHosts === "undefined") {
|
|
// AllowedHosts allows some default hosts picked from `options.host` or `webSocketURL.hostname` and `localhost`
|
|
options.allowedHosts = "auto";
|
|
}
|
|
// We store allowedHosts as array when supplied as string
|
|
else if (
|
|
typeof options.allowedHosts === "string" &&
|
|
options.allowedHosts !== "auto" &&
|
|
options.allowedHosts !== "all"
|
|
) {
|
|
options.allowedHosts = [options.allowedHosts];
|
|
}
|
|
// CLI pass options as array, we should normalize them
|
|
else if (
|
|
Array.isArray(options.allowedHosts) &&
|
|
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) {
|
|
options.client = {};
|
|
}
|
|
|
|
if (typeof options.client.webSocketURL === "undefined") {
|
|
options.client.webSocketURL = {};
|
|
} else if (typeof options.client.webSocketURL === "string") {
|
|
const parsedURL = new URL(options.client.webSocketURL);
|
|
|
|
options.client.webSocketURL = {
|
|
protocol: parsedURL.protocol,
|
|
hostname: parsedURL.hostname,
|
|
port: parsedURL.port.length > 0 ? Number(parsedURL.port) : "",
|
|
pathname: parsedURL.pathname,
|
|
username: parsedURL.username,
|
|
password: parsedURL.password,
|
|
};
|
|
} else if (typeof options.client.webSocketURL.port === "string") {
|
|
options.client.webSocketURL.port = Number(
|
|
options.client.webSocketURL.port
|
|
);
|
|
}
|
|
|
|
// Enable client overlay by default
|
|
if (typeof options.client.overlay === "undefined") {
|
|
options.client.overlay = true;
|
|
} else if (typeof options.client.overlay !== "boolean") {
|
|
options.client.overlay = {
|
|
errors: true,
|
|
warnings: true,
|
|
...options.client.overlay,
|
|
};
|
|
}
|
|
|
|
if (typeof options.client.reconnect === "undefined") {
|
|
options.client.reconnect = 10;
|
|
} else if (options.client.reconnect === true) {
|
|
options.client.reconnect = Infinity;
|
|
} else if (options.client.reconnect === false) {
|
|
options.client.reconnect = 0;
|
|
}
|
|
|
|
// Respect infrastructureLogging.level
|
|
if (typeof options.client.logging === "undefined") {
|
|
options.client.logging = compilerOptions.infrastructureLogging
|
|
? compilerOptions.infrastructureLogging.level
|
|
: "info";
|
|
}
|
|
}
|
|
|
|
if (typeof options.compress === "undefined") {
|
|
options.compress = true;
|
|
}
|
|
|
|
if (typeof options.devMiddleware === "undefined") {
|
|
options.devMiddleware = {};
|
|
}
|
|
|
|
// No need to normalize `headers`
|
|
|
|
if (typeof options.historyApiFallback === "undefined") {
|
|
options.historyApiFallback = false;
|
|
} else if (
|
|
typeof options.historyApiFallback === "boolean" &&
|
|
options.historyApiFallback
|
|
) {
|
|
options.historyApiFallback = {};
|
|
}
|
|
|
|
// No need to normalize `host`
|
|
|
|
options.hot =
|
|
typeof options.hot === "boolean" || options.hot === "only"
|
|
? options.hot
|
|
: true;
|
|
|
|
const isHTTPs = Boolean(options.https);
|
|
const isSPDY = Boolean(options.http2);
|
|
|
|
if (isHTTPs) {
|
|
// TODO: remove in the next major release
|
|
util.deprecate(
|
|
() => {},
|
|
"'https' option is deprecated. Please use the 'server' option.",
|
|
"DEP_WEBPACK_DEV_SERVER_HTTPS"
|
|
)();
|
|
}
|
|
|
|
if (isSPDY) {
|
|
// TODO: remove in the next major release
|
|
util.deprecate(
|
|
() => {},
|
|
"'http2' option is deprecated. Please use the 'server' option.",
|
|
"DEP_WEBPACK_DEV_SERVER_HTTP2"
|
|
)();
|
|
}
|
|
|
|
options.server = {
|
|
type:
|
|
// eslint-disable-next-line no-nested-ternary
|
|
typeof options.server === "string"
|
|
? options.server
|
|
: // eslint-disable-next-line no-nested-ternary
|
|
typeof (options.server || {}).type === "string"
|
|
? /** @type {ServerConfiguration} */ (options.server).type || "http"
|
|
: // eslint-disable-next-line no-nested-ternary
|
|
isSPDY
|
|
? "spdy"
|
|
: isHTTPs
|
|
? "https"
|
|
: "http",
|
|
options: {
|
|
.../** @type {ServerOptions} */ (options.https),
|
|
.../** @type {ServerConfiguration} */ (options.server || {}).options,
|
|
},
|
|
};
|
|
|
|
if (
|
|
options.server.type === "spdy" &&
|
|
typeof (/** @type {ServerOptions} */ (options.server.options).spdy) ===
|
|
"undefined"
|
|
) {
|
|
/** @type {ServerOptions} */
|
|
(options.server.options).spdy = {
|
|
protocols: ["h2", "http/1.1"],
|
|
};
|
|
}
|
|
|
|
if (options.server.type === "https" || options.server.type === "spdy") {
|
|
if (
|
|
typeof (
|
|
/** @type {ServerOptions} */ (options.server.options).requestCert
|
|
) === "undefined"
|
|
) {
|
|
/** @type {ServerOptions} */
|
|
(options.server.options).requestCert = false;
|
|
}
|
|
|
|
const httpsProperties =
|
|
/** @type {Array<keyof ServerOptions>} */
|
|
(["cacert", "ca", "cert", "crl", "key", "pfx"]);
|
|
|
|
for (const property of httpsProperties) {
|
|
if (
|
|
typeof (
|
|
/** @type {ServerOptions} */ (options.server.options)[property]
|
|
) === "undefined"
|
|
) {
|
|
// eslint-disable-next-line no-continue
|
|
continue;
|
|
}
|
|
|
|
// @ts-ignore
|
|
if (property === "cacert") {
|
|
// TODO remove the `cacert` option in favor `ca` in the next major release
|
|
util.deprecate(
|
|
() => {},
|
|
"The 'cacert' option is deprecated. Please use the 'ca' option.",
|
|
"DEP_WEBPACK_DEV_SERVER_CACERT"
|
|
)();
|
|
}
|
|
|
|
/** @type {any} */
|
|
const value =
|
|
/** @type {ServerOptions} */
|
|
(options.server.options)[property];
|
|
/**
|
|
* @param {string | Buffer | undefined} item
|
|
* @returns {string | Buffer | undefined}
|
|
*/
|
|
const readFile = (item) => {
|
|
if (
|
|
Buffer.isBuffer(item) ||
|
|
(typeof item === "object" && item !== null && !Array.isArray(item))
|
|
) {
|
|
return item;
|
|
}
|
|
|
|
if (item) {
|
|
let stats = null;
|
|
|
|
try {
|
|
stats = fs.lstatSync(fs.realpathSync(item)).isFile();
|
|
} catch (error) {
|
|
// Ignore error
|
|
}
|
|
|
|
// It is a file
|
|
return stats ? fs.readFileSync(item) : item;
|
|
}
|
|
};
|
|
|
|
/** @type {any} */
|
|
(options.server.options)[property] = Array.isArray(value)
|
|
? value.map((item) => readFile(item))
|
|
: readFile(value);
|
|
}
|
|
|
|
let fakeCert;
|
|
|
|
if (
|
|
!(/** @type {ServerOptions} */ (options.server.options).key) ||
|
|
!(/** @type {ServerOptions} */ (options.server.options).cert)
|
|
) {
|
|
const certificateDir = Server.findCacheDir();
|
|
const certificatePath = path.join(certificateDir, "server.pem");
|
|
let certificateExists;
|
|
|
|
try {
|
|
const certificate = await fs.promises.stat(certificatePath);
|
|
certificateExists = certificate.isFile();
|
|
} catch {
|
|
certificateExists = false;
|
|
}
|
|
|
|
if (certificateExists) {
|
|
const certificateTtl = 1000 * 60 * 60 * 24;
|
|
const certificateStat = await fs.promises.stat(certificatePath);
|
|
const now = Number(new Date());
|
|
|
|
// cert is more than 30 days old, kill it with fire
|
|
if ((now - Number(certificateStat.ctime)) / certificateTtl > 30) {
|
|
const { promisify } = require("util");
|
|
const rimraf = require("rimraf");
|
|
const del = promisify(rimraf);
|
|
|
|
this.logger.info(
|
|
"SSL certificate is more than 30 days old. Removing..."
|
|
);
|
|
|
|
await del(certificatePath);
|
|
|
|
certificateExists = false;
|
|
}
|
|
}
|
|
|
|
if (!certificateExists) {
|
|
this.logger.info("Generating SSL certificate...");
|
|
|
|
// @ts-ignore
|
|
const selfsigned = require("selfsigned");
|
|
const attributes = [{ name: "commonName", value: "localhost" }];
|
|
const pems = selfsigned.generate(attributes, {
|
|
algorithm: "sha256",
|
|
days: 30,
|
|
keySize: 2048,
|
|
extensions: [
|
|
{
|
|
name: "basicConstraints",
|
|
cA: true,
|
|
},
|
|
{
|
|
name: "keyUsage",
|
|
keyCertSign: true,
|
|
digitalSignature: true,
|
|
nonRepudiation: true,
|
|
keyEncipherment: true,
|
|
dataEncipherment: true,
|
|
},
|
|
{
|
|
name: "extKeyUsage",
|
|
serverAuth: true,
|
|
clientAuth: true,
|
|
codeSigning: true,
|
|
timeStamping: true,
|
|
},
|
|
{
|
|
name: "subjectAltName",
|
|
altNames: [
|
|
{
|
|
// type 2 is DNS
|
|
type: 2,
|
|
value: "localhost",
|
|
},
|
|
{
|
|
type: 2,
|
|
value: "localhost.localdomain",
|
|
},
|
|
{
|
|
type: 2,
|
|
value: "lvh.me",
|
|
},
|
|
{
|
|
type: 2,
|
|
value: "*.lvh.me",
|
|
},
|
|
{
|
|
type: 2,
|
|
value: "[::1]",
|
|
},
|
|
{
|
|
// type 7 is IP
|
|
type: 7,
|
|
ip: "127.0.0.1",
|
|
},
|
|
{
|
|
type: 7,
|
|
ip: "fe80::1",
|
|
},
|
|
],
|
|
},
|
|
],
|
|
});
|
|
|
|
await fs.promises.mkdir(certificateDir, { recursive: true });
|
|
|
|
await fs.promises.writeFile(
|
|
certificatePath,
|
|
pems.private + pems.cert,
|
|
{
|
|
encoding: "utf8",
|
|
}
|
|
);
|
|
}
|
|
|
|
fakeCert = await fs.promises.readFile(certificatePath);
|
|
|
|
this.logger.info(`SSL certificate: ${certificatePath}`);
|
|
}
|
|
|
|
if (
|
|
/** @type {ServerOptions & { cacert?: ServerOptions["ca"] }} */ (
|
|
options.server.options
|
|
).cacert
|
|
) {
|
|
if (/** @type {ServerOptions} */ (options.server.options).ca) {
|
|
this.logger.warn(
|
|
"Do not specify 'ca' and 'cacert' options together, the 'ca' option will be used."
|
|
);
|
|
} else {
|
|
/** @type {ServerOptions} */
|
|
(options.server.options).ca =
|
|
/** @type {ServerOptions & { cacert?: ServerOptions["ca"] }} */
|
|
(options.server.options).cacert;
|
|
}
|
|
|
|
delete (
|
|
/** @type {ServerOptions & { cacert?: ServerOptions["ca"] }} */ (
|
|
options.server.options
|
|
).cacert
|
|
);
|
|
}
|
|
|
|
/** @type {ServerOptions} */
|
|
(options.server.options).key =
|
|
/** @type {ServerOptions} */
|
|
(options.server.options).key || fakeCert;
|
|
/** @type {ServerOptions} */
|
|
(options.server.options).cert =
|
|
/** @type {ServerOptions} */
|
|
(options.server.options).cert || fakeCert;
|
|
}
|
|
|
|
if (typeof options.ipc === "boolean") {
|
|
const isWindows = process.platform === "win32";
|
|
const pipePrefix = isWindows ? "\\\\.\\pipe\\" : os.tmpdir();
|
|
const pipeName = "webpack-dev-server.sock";
|
|
|
|
options.ipc = path.join(pipePrefix, pipeName);
|
|
}
|
|
|
|
options.liveReload =
|
|
typeof options.liveReload !== "undefined" ? options.liveReload : true;
|
|
|
|
options.magicHtml =
|
|
typeof options.magicHtml !== "undefined" ? options.magicHtml : true;
|
|
|
|
// https://github.com/webpack/webpack-dev-server/issues/1990
|
|
const defaultOpenOptions = { wait: false };
|
|
/**
|
|
* @param {any} target
|
|
* @returns {NormalizedOpen[]}
|
|
*/
|
|
// TODO: remove --open-app in favor of --open-app-name
|
|
const getOpenItemsFromObject = ({ target, ...rest }) => {
|
|
const normalizedOptions = { ...defaultOpenOptions, ...rest };
|
|
|
|
if (typeof normalizedOptions.app === "string") {
|
|
normalizedOptions.app = {
|
|
name: normalizedOptions.app,
|
|
};
|
|
}
|
|
|
|
const normalizedTarget = typeof target === "undefined" ? "<url>" : target;
|
|
|
|
if (Array.isArray(normalizedTarget)) {
|
|
return normalizedTarget.map((singleTarget) => {
|
|
return { target: singleTarget, options: normalizedOptions };
|
|
});
|
|
}
|
|
|
|
return [{ target: normalizedTarget, options: normalizedOptions }];
|
|
};
|
|
|
|
if (typeof options.open === "undefined") {
|
|
/** @type {NormalizedOpen[]} */
|
|
(options.open) = [];
|
|
} else if (typeof options.open === "boolean") {
|
|
/** @type {NormalizedOpen[]} */
|
|
(options.open) = options.open
|
|
? [
|
|
{
|
|
target: "<url>",
|
|
options: /** @type {OpenOptions} */ (defaultOpenOptions),
|
|
},
|
|
]
|
|
: [];
|
|
} else if (typeof options.open === "string") {
|
|
/** @type {NormalizedOpen[]} */
|
|
(options.open) = [{ target: options.open, options: defaultOpenOptions }];
|
|
} else if (Array.isArray(options.open)) {
|
|
/**
|
|
* @type {NormalizedOpen[]}
|
|
*/
|
|
const result = [];
|
|
|
|
options.open.forEach((item) => {
|
|
if (typeof item === "string") {
|
|
result.push({ target: item, options: defaultOpenOptions });
|
|
|
|
return;
|
|
}
|
|
|
|
result.push(...getOpenItemsFromObject(item));
|
|
});
|
|
|
|
/** @type {NormalizedOpen[]} */
|
|
(options.open) = result;
|
|
} else {
|
|
/** @type {NormalizedOpen[]} */
|
|
(options.open) = [...getOpenItemsFromObject(options.open)];
|
|
}
|
|
|
|
if (options.onAfterSetupMiddleware) {
|
|
// TODO: remove in the next major release
|
|
util.deprecate(
|
|
() => {},
|
|
"'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.",
|
|
`DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE`
|
|
)();
|
|
}
|
|
|
|
if (options.onBeforeSetupMiddleware) {
|
|
// TODO: remove in the next major release
|
|
util.deprecate(
|
|
() => {},
|
|
"'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.",
|
|
`DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE`
|
|
)();
|
|
}
|
|
|
|
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") {
|
|
// TODO remove in the next major release, only accept `Array`
|
|
if (!Array.isArray(options.proxy)) {
|
|
if (
|
|
Object.prototype.hasOwnProperty.call(options.proxy, "target") ||
|
|
Object.prototype.hasOwnProperty.call(options.proxy, "router")
|
|
) {
|
|
/** @type {ProxyConfigArray} */
|
|
(options.proxy) = [/** @type {ProxyConfigMap} */ (options.proxy)];
|
|
} else {
|
|
/** @type {ProxyConfigArray} */
|
|
(options.proxy) = Object.keys(options.proxy).map(
|
|
/**
|
|
* @param {string} context
|
|
* @returns {HttpProxyMiddlewareOptions}
|
|
*/
|
|
(context) => {
|
|
let proxyOptions;
|
|
// For backwards compatibility reasons.
|
|
const correctedContext = context
|
|
.replace(/^\*$/, "**")
|
|
.replace(/\/\*$/, "");
|
|
|
|
if (
|
|
typeof (
|
|
/** @type {ProxyConfigMap} */ (options.proxy)[context]
|
|
) === "string"
|
|
) {
|
|
proxyOptions = {
|
|
context: correctedContext,
|
|
target:
|
|
/** @type {ProxyConfigMap} */
|
|
(options.proxy)[context],
|
|
};
|
|
} else {
|
|
proxyOptions = {
|
|
// @ts-ignore
|
|
.../** @type {ProxyConfigMap} */ (options.proxy)[context],
|
|
};
|
|
proxyOptions.context = correctedContext;
|
|
}
|
|
|
|
return proxyOptions;
|
|
}
|
|
);
|
|
}
|
|
}
|
|
|
|
/** @type {ProxyConfigArray} */
|
|
(options.proxy) =
|
|
/** @type {ProxyConfigArray} */
|
|
(options.proxy).map((item) => {
|
|
if (typeof item === "function") {
|
|
return item;
|
|
}
|
|
|
|
/**
|
|
* @param {"info" | "warn" | "error" | "debug" | "silent" | undefined | "none" | "log" | "verbose"} level
|
|
* @returns {"info" | "warn" | "error" | "debug" | "silent" | undefined}
|
|
*/
|
|
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;
|
|
}
|
|
|
|
if (typeof options.static === "undefined") {
|
|
options.static = [getStaticItem()];
|
|
} else if (typeof options.static === "boolean") {
|
|
options.static = options.static ? [getStaticItem()] : false;
|
|
} else if (typeof options.static === "string") {
|
|
options.static = [getStaticItem(options.static)];
|
|
} else if (Array.isArray(options.static)) {
|
|
options.static = options.static.map((item) => getStaticItem(item));
|
|
} else {
|
|
options.static = [getStaticItem(options.static)];
|
|
}
|
|
|
|
if (typeof options.watchFiles === "string") {
|
|
options.watchFiles = [
|
|
{ paths: options.watchFiles, options: getWatchOptions() },
|
|
];
|
|
} else if (
|
|
typeof options.watchFiles === "object" &&
|
|
options.watchFiles !== null &&
|
|
!Array.isArray(options.watchFiles)
|
|
) {
|
|
options.watchFiles = [
|
|
{
|
|
paths: options.watchFiles.paths,
|
|
options: getWatchOptions(options.watchFiles.options || {}),
|
|
},
|
|
];
|
|
} else if (Array.isArray(options.watchFiles)) {
|
|
options.watchFiles = options.watchFiles.map((item) => {
|
|
if (typeof item === "string") {
|
|
return { paths: item, options: getWatchOptions() };
|
|
}
|
|
|
|
return {
|
|
paths: item.paths,
|
|
options: getWatchOptions(item.options || {}),
|
|
};
|
|
});
|
|
} else {
|
|
options.watchFiles = [];
|
|
}
|
|
|
|
const defaultWebSocketServerType = "ws";
|
|
const defaultWebSocketServerOptions = { path: "/ws" };
|
|
|
|
if (typeof options.webSocketServer === "undefined") {
|
|
options.webSocketServer = {
|
|
type: defaultWebSocketServerType,
|
|
options: defaultWebSocketServerOptions,
|
|
};
|
|
} else if (
|
|
typeof options.webSocketServer === "boolean" &&
|
|
!options.webSocketServer
|
|
) {
|
|
options.webSocketServer = false;
|
|
} else if (
|
|
typeof options.webSocketServer === "string" ||
|
|
typeof options.webSocketServer === "function"
|
|
) {
|
|
options.webSocketServer = {
|
|
type: options.webSocketServer,
|
|
options: defaultWebSocketServerOptions,
|
|
};
|
|
} else {
|
|
options.webSocketServer = {
|
|
type:
|
|
/** @type {WebSocketServerConfiguration} */
|
|
(options.webSocketServer).type || defaultWebSocketServerType,
|
|
options: {
|
|
...defaultWebSocketServerOptions,
|
|
.../** @type {WebSocketServerConfiguration} */
|
|
(options.webSocketServer).options,
|
|
},
|
|
};
|
|
|
|
const webSocketServer =
|
|
/** @type {{ type: WebSocketServerConfiguration["type"], options: NonNullable<WebSocketServerConfiguration["options"]> }} */
|
|
(options.webSocketServer);
|
|
|
|
if (typeof webSocketServer.options.port === "string") {
|
|
webSocketServer.options.port = Number(webSocketServer.options.port);
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
* @returns {string}
|
|
*/
|
|
getClientTransport() {
|
|
let clientImplementation;
|
|
let clientImplementationFound = true;
|
|
|
|
const isKnownWebSocketServerImplementation =
|
|
this.options.webSocketServer &&
|
|
typeof (
|
|
/** @type {WebSocketServerConfiguration} */
|
|
(this.options.webSocketServer).type
|
|
) === "string" &&
|
|
// @ts-ignore
|
|
(this.options.webSocketServer.type === "ws" ||
|
|
/** @type {WebSocketServerConfiguration} */
|
|
(this.options.webSocketServer).type === "sockjs");
|
|
|
|
let clientTransport;
|
|
|
|
if (this.options.client) {
|
|
if (
|
|
typeof (
|
|
/** @type {ClientConfiguration} */
|
|
(this.options.client).webSocketTransport
|
|
) !== "undefined"
|
|
) {
|
|
clientTransport =
|
|
/** @type {ClientConfiguration} */
|
|
(this.options.client).webSocketTransport;
|
|
} else if (isKnownWebSocketServerImplementation) {
|
|
clientTransport =
|
|
/** @type {WebSocketServerConfiguration} */
|
|
(this.options.webSocketServer).type;
|
|
} else {
|
|
clientTransport = "ws";
|
|
}
|
|
} else {
|
|
clientTransport = "ws";
|
|
}
|
|
|
|
switch (typeof clientTransport) {
|
|
case "string":
|
|
// could be 'sockjs', 'ws', or a path that should be required
|
|
if (clientTransport === "sockjs") {
|
|
clientImplementation = require.resolve(
|
|
"../client/clients/SockJSClient"
|
|
);
|
|
} else if (clientTransport === "ws") {
|
|
clientImplementation = require.resolve(
|
|
"../client/clients/WebSocketClient"
|
|
);
|
|
} else {
|
|
try {
|
|
clientImplementation = require.resolve(clientTransport);
|
|
} catch (e) {
|
|
clientImplementationFound = false;
|
|
}
|
|
}
|
|
break;
|
|
default:
|
|
clientImplementationFound = false;
|
|
}
|
|
|
|
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 `
|
|
);
|
|
}
|
|
|
|
return /** @type {string} */ (clientImplementation);
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
* @returns {string}
|
|
*/
|
|
getServerTransport() {
|
|
let implementation;
|
|
let implementationFound = true;
|
|
|
|
switch (
|
|
typeof (
|
|
/** @type {WebSocketServerConfiguration} */
|
|
(this.options.webSocketServer).type
|
|
)
|
|
) {
|
|
case "string":
|
|
// Could be 'sockjs', in the future 'ws', or a path that should be required
|
|
if (
|
|
/** @type {WebSocketServerConfiguration} */ (
|
|
this.options.webSocketServer
|
|
).type === "sockjs"
|
|
) {
|
|
implementation = require("./servers/SockJSServer");
|
|
} else if (
|
|
/** @type {WebSocketServerConfiguration} */ (
|
|
this.options.webSocketServer
|
|
).type === "ws"
|
|
) {
|
|
implementation = require("./servers/WebsocketServer");
|
|
} else {
|
|
try {
|
|
// eslint-disable-next-line import/no-dynamic-require
|
|
implementation = require(/** @type {WebSocketServerConfiguration} */ (
|
|
this.options.webSocketServer
|
|
).type);
|
|
} catch (error) {
|
|
implementationFound = false;
|
|
}
|
|
}
|
|
break;
|
|
case "function":
|
|
implementation = /** @type {WebSocketServerConfiguration} */ (
|
|
this.options.webSocketServer
|
|
).type;
|
|
break;
|
|
default:
|
|
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 " +
|
|
"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"
|
|
);
|
|
}
|
|
|
|
return implementation;
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
* @returns {void}
|
|
*/
|
|
setupProgressPlugin() {
|
|
const { ProgressPlugin } =
|
|
/** @type {MultiCompiler}*/
|
|
(this.compiler).compilers
|
|
? /** @type {MultiCompiler}*/ (this.compiler).compilers[0].webpack
|
|
: /** @type {Compiler}*/ (this.compiler).webpack ||
|
|
// TODO remove me after drop webpack v4
|
|
require("webpack");
|
|
|
|
new ProgressPlugin(
|
|
/**
|
|
* @param {number} percent
|
|
* @param {string} msg
|
|
* @param {string} addInfo
|
|
* @param {string} pluginName
|
|
*/
|
|
(percent, msg, addInfo, pluginName) => {
|
|
percent = Math.floor(percent * 100);
|
|
|
|
if (percent === 100) {
|
|
msg = "Compilation completed";
|
|
}
|
|
|
|
if (addInfo) {
|
|
msg = `${msg} (${addInfo})`;
|
|
}
|
|
|
|
if (this.webSocketServer) {
|
|
this.sendMessage(this.webSocketServer.clients, "progress-update", {
|
|
percent,
|
|
msg,
|
|
pluginName,
|
|
});
|
|
}
|
|
|
|
if (this.server) {
|
|
this.server.emit("progress-update", { percent, msg, pluginName });
|
|
}
|
|
}
|
|
).apply(this.compiler);
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
* @returns {Promise<void>}
|
|
*/
|
|
async initialize() {
|
|
if (this.options.webSocketServer) {
|
|
const compilers =
|
|
/** @type {MultiCompiler} */
|
|
(this.compiler).compilers || [this.compiler];
|
|
|
|
compilers.forEach((compiler) => {
|
|
this.addAdditionalEntries(compiler);
|
|
|
|
const webpack = compiler.webpack || require("webpack");
|
|
|
|
new webpack.ProvidePlugin({
|
|
__webpack_dev_server_client__: this.getClientTransport(),
|
|
}).apply(compiler);
|
|
|
|
// TODO remove after drop webpack v4 support
|
|
compiler.options.plugins = compiler.options.plugins || [];
|
|
|
|
if (this.options.hot) {
|
|
const HMRPluginExists = compiler.options.plugins.find(
|
|
(p) => p.constructor === webpack.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();
|
|
|
|
plugin.apply(compiler);
|
|
}
|
|
}
|
|
});
|
|
|
|
if (
|
|
this.options.client &&
|
|
/** @type {ClientConfiguration} */ (this.options.client).progress
|
|
) {
|
|
this.setupProgressPlugin();
|
|
}
|
|
}
|
|
|
|
this.setupHooks();
|
|
this.setupApp();
|
|
this.setupHostHeaderCheck();
|
|
this.setupDevMiddleware();
|
|
// Should be after `webpack-dev-middleware`, otherwise other middlewares might rewrite response
|
|
this.setupBuiltInRoutes();
|
|
this.setupWatchFiles();
|
|
this.setupWatchStaticFiles();
|
|
this.setupMiddlewares();
|
|
this.createServer();
|
|
|
|
if (this.options.setupExitSignals) {
|
|
const signals = ["SIGINT", "SIGTERM"];
|
|
|
|
let needForceShutdown = false;
|
|
|
|
signals.forEach((signal) => {
|
|
const listener = () => {
|
|
if (needForceShutdown) {
|
|
process.exit();
|
|
}
|
|
|
|
this.logger.info(
|
|
"Gracefully shutting down. To force exit, press ^C again. Please wait..."
|
|
);
|
|
|
|
needForceShutdown = true;
|
|
|
|
this.stopCallback(() => {
|
|
if (typeof this.compiler.close === "function") {
|
|
this.compiler.close(() => {
|
|
process.exit();
|
|
});
|
|
} else {
|
|
process.exit();
|
|
}
|
|
});
|
|
};
|
|
|
|
this.listeners.push({ name: signal, listener });
|
|
|
|
process.on(signal, listener);
|
|
});
|
|
}
|
|
|
|
// Proxy WebSocket without the initial http request
|
|
// https://github.com/chimurai/http-proxy-middleware#external-websocket-upgrade
|
|
/** @type {RequestHandler[]} */
|
|
(this.webSocketProxies).forEach((webSocketProxy) => {
|
|
/** @type {import("http").Server} */
|
|
(this.server).on(
|
|
"upgrade",
|
|
/** @type {RequestHandler & { upgrade: NonNullable<RequestHandler["upgrade"]> }} */
|
|
(webSocketProxy).upgrade
|
|
);
|
|
}, this);
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
* @returns {void}
|
|
*/
|
|
setupApp() {
|
|
/** @type {import("express").Application | undefined}*/
|
|
this.app = new /** @type {any} */ (getExpress())();
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
* @param {Stats | MultiStats} statsObj
|
|
* @returns {StatsCompilation}
|
|
*/
|
|
getStats(statsObj) {
|
|
const stats = Server.DEFAULT_STATS;
|
|
const compilerOptions = this.getCompilerOptions();
|
|
|
|
// @ts-ignore
|
|
if (compilerOptions.stats && compilerOptions.stats.warningsFilter) {
|
|
// @ts-ignore
|
|
stats.warningsFilter = compilerOptions.stats.warningsFilter;
|
|
}
|
|
|
|
return statsObj.toJson(stats);
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
* @returns {void}
|
|
*/
|
|
setupHooks() {
|
|
this.compiler.hooks.invalid.tap("webpack-dev-server", () => {
|
|
if (this.webSocketServer) {
|
|
this.sendMessage(this.webSocketServer.clients, "invalid");
|
|
}
|
|
});
|
|
this.compiler.hooks.done.tap(
|
|
"webpack-dev-server",
|
|
/**
|
|
* @param {Stats | MultiStats} stats
|
|
*/
|
|
(stats) => {
|
|
if (this.webSocketServer) {
|
|
this.sendStats(this.webSocketServer.clients, this.getStats(stats));
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
* @type {Stats | MultiStats}
|
|
*/
|
|
this.stats = stats;
|
|
}
|
|
);
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
* @returns {void}
|
|
*/
|
|
setupHostHeaderCheck() {
|
|
/** @type {import("express").Application} */
|
|
(this.app).all(
|
|
"*",
|
|
/**
|
|
* @param {Request} req
|
|
* @param {Response} res
|
|
* @param {NextFunction} next
|
|
* @returns {void}
|
|
*/
|
|
(req, res, next) => {
|
|
if (
|
|
this.checkHeader(
|
|
/** @type {{ [key: string]: string | undefined }} */
|
|
(req.headers),
|
|
"host"
|
|
)
|
|
) {
|
|
return next();
|
|
}
|
|
|
|
res.send("Invalid Host header");
|
|
}
|
|
);
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
* @returns {void}
|
|
*/
|
|
setupDevMiddleware() {
|
|
const webpackDevMiddleware = require("webpack-dev-middleware");
|
|
|
|
// middleware for serving webpack bundle
|
|
this.middleware = webpackDevMiddleware(
|
|
this.compiler,
|
|
this.options.devMiddleware
|
|
);
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
* @returns {void}
|
|
*/
|
|
setupBuiltInRoutes() {
|
|
const { app, middleware } = this;
|
|
|
|
/** @type {import("express").Application} */
|
|
(app).get(
|
|
"/__webpack_dev_server__/sockjs.bundle.js",
|
|
/**
|
|
* @param {Request} req
|
|
* @param {Response} res
|
|
* @returns {void}
|
|
*/
|
|
(req, res) => {
|
|
res.setHeader("Content-Type", "application/javascript");
|
|
|
|
const clientPath = path.join(__dirname, "..", "client");
|
|
|
|
res.sendFile(path.join(clientPath, "modules/sockjs-client/index.js"));
|
|
}
|
|
);
|
|
|
|
/** @type {import("express").Application} */
|
|
(app).get(
|
|
"/webpack-dev-server/invalidate",
|
|
/**
|
|
* @param {Request} _req
|
|
* @param {Response} res
|
|
* @returns {void}
|
|
*/
|
|
(_req, res) => {
|
|
this.invalidate();
|
|
|
|
res.end();
|
|
}
|
|
);
|
|
|
|
/** @type {import("express").Application} */
|
|
(app).get("/webpack-dev-server/open-editor", (req, res) => {
|
|
const fileName = req.query.fileName;
|
|
|
|
if (typeof fileName === "string") {
|
|
// @ts-ignore
|
|
const launchEditor = require("launch-editor");
|
|
launchEditor(fileName);
|
|
}
|
|
|
|
res.end();
|
|
});
|
|
|
|
/** @type {import("express").Application} */
|
|
(app).get(
|
|
"/webpack-dev-server",
|
|
/**
|
|
* @param {Request} req
|
|
* @param {Response} res
|
|
* @returns {void}
|
|
*/
|
|
(req, res) => {
|
|
/** @type {import("webpack-dev-middleware").API<Request, Response>}*/
|
|
(middleware).waitUntilValid((stats) => {
|
|
res.setHeader("Content-Type", "text/html");
|
|
res.write(
|
|
'<!DOCTYPE html><html><head><meta charset="utf-8"/></head><body>'
|
|
);
|
|
|
|
const statsForPrint =
|
|
typeof (/** @type {MultiStats} */ (stats).stats) !== "undefined"
|
|
? /** @type {MultiStats} */ (stats).toJson().children
|
|
: [/** @type {Stats} */ (stats).toJson()];
|
|
|
|
res.write(`<h1>Assets Report:</h1>`);
|
|
|
|
/**
|
|
* @type {StatsCompilation[]}
|
|
*/
|
|
(statsForPrint).forEach((item, index) => {
|
|
res.write("<div>");
|
|
|
|
const name =
|
|
// eslint-disable-next-line no-nested-ternary
|
|
typeof item.name !== "undefined"
|
|
? item.name
|
|
: /** @type {MultiStats} */ (stats).stats
|
|
? `unnamed[${index}]`
|
|
: "unnamed";
|
|
|
|
res.write(`<h2>Compilation: ${name}</h2>`);
|
|
res.write("<ul>");
|
|
|
|
const publicPath =
|
|
item.publicPath === "auto" ? "" : item.publicPath;
|
|
|
|
for (const asset of /** @type {NonNullable<StatsCompilation["assets"]>} */ (
|
|
item.assets
|
|
)) {
|
|
const assetName = asset.name;
|
|
const assetURL = `${publicPath}${assetName}`;
|
|
|
|
res.write(
|
|
`<li>
|
|
<strong><a href="${assetURL}" target="_blank">${assetName}</a></strong>
|
|
</li>`
|
|
);
|
|
}
|
|
|
|
res.write("</ul>");
|
|
res.write("</div>");
|
|
});
|
|
|
|
res.end("</body></html>");
|
|
});
|
|
}
|
|
);
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
* @returns {void}
|
|
*/
|
|
setupWatchStaticFiles() {
|
|
if (/** @type {NormalizedStatic[]} */ (this.options.static).length > 0) {
|
|
/** @type {NormalizedStatic[]} */
|
|
(this.options.static).forEach((staticOption) => {
|
|
if (staticOption.watch) {
|
|
this.watchFiles(staticOption.directory, staticOption.watch);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
* @returns {void}
|
|
*/
|
|
setupWatchFiles() {
|
|
const { watchFiles } = this.options;
|
|
|
|
if (/** @type {WatchFiles[]} */ (watchFiles).length > 0) {
|
|
/** @type {WatchFiles[]} */
|
|
(watchFiles).forEach((item) => {
|
|
this.watchFiles(item.paths, item.options);
|
|
});
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
* @returns {void}
|
|
*/
|
|
setupMiddlewares() {
|
|
/**
|
|
* @type {Array<Middleware>}
|
|
*/
|
|
let middlewares = [];
|
|
|
|
// compress is placed last and uses unshift so that it will be the first middleware used
|
|
if (this.options.compress) {
|
|
const compression = require("compression");
|
|
|
|
middlewares.push({ name: "compression", middleware: compression() });
|
|
}
|
|
|
|
if (typeof this.options.onBeforeSetupMiddleware === "function") {
|
|
this.options.onBeforeSetupMiddleware(this);
|
|
}
|
|
|
|
if (typeof this.options.headers !== "undefined") {
|
|
middlewares.push({
|
|
name: "set-headers",
|
|
path: "*",
|
|
middleware: this.setHeaders.bind(this),
|
|
});
|
|
}
|
|
|
|
middlewares.push({
|
|
name: "webpack-dev-middleware",
|
|
middleware:
|
|
/** @type {import("webpack-dev-middleware").Middleware<Request, Response>}*/
|
|
(this.middleware),
|
|
});
|
|
|
|
if (this.options.proxy) {
|
|
const { createProxyMiddleware } = require("http-proxy-middleware");
|
|
|
|
/**
|
|
* @param {ProxyConfigArrayItem} proxyConfig
|
|
* @returns {RequestHandler | undefined}
|
|
*/
|
|
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(
|
|
/** @type {string} */ (context),
|
|
proxyConfig
|
|
);
|
|
}
|
|
|
|
if (proxyConfig.router) {
|
|
return createProxyMiddleware(proxyConfig);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Assume a proxy configuration specified as:
|
|
* proxy: [
|
|
* {
|
|
* context: "value",
|
|
* ...options,
|
|
* },
|
|
* // or:
|
|
* function() {
|
|
* return {
|
|
* context: "context",
|
|
* ...options,
|
|
* };
|
|
* }
|
|
* ]
|
|
*/
|
|
/** @type {ProxyConfigArray} */
|
|
(this.options.proxy).forEach((proxyConfigOrCallback) => {
|
|
/**
|
|
* @type {RequestHandler}
|
|
*/
|
|
let proxyMiddleware;
|
|
|
|
let proxyConfig =
|
|
typeof proxyConfigOrCallback === "function"
|
|
? proxyConfigOrCallback()
|
|
: proxyConfigOrCallback;
|
|
|
|
proxyMiddleware =
|
|
/** @type {RequestHandler} */
|
|
(getProxyMiddleware(proxyConfig));
|
|
|
|
if (proxyConfig.ws) {
|
|
this.webSocketProxies.push(proxyMiddleware);
|
|
}
|
|
|
|
/**
|
|
* @param {Request} req
|
|
* @param {Response} res
|
|
* @param {NextFunction} next
|
|
* @returns {Promise<void>}
|
|
*/
|
|
const handler = async (req, res, next) => {
|
|
if (typeof proxyConfigOrCallback === "function") {
|
|
const newProxyConfig = proxyConfigOrCallback(req, res, next);
|
|
|
|
if (newProxyConfig !== proxyConfig) {
|
|
proxyConfig = newProxyConfig;
|
|
proxyMiddleware =
|
|
/** @type {RequestHandler} */
|
|
(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";
|
|
const bypassUrl = isByPassFuncDefined
|
|
? await /** @type {ByPass} */ (proxyConfig.bypass)(
|
|
req,
|
|
res,
|
|
proxyConfig
|
|
)
|
|
: null;
|
|
|
|
if (typeof bypassUrl === "boolean") {
|
|
// skip the proxy
|
|
// @ts-ignore
|
|
req.url = null;
|
|
next();
|
|
} else if (typeof bypassUrl === "string") {
|
|
// byPass to that url
|
|
req.url = bypassUrl;
|
|
next();
|
|
} else if (proxyMiddleware) {
|
|
return proxyMiddleware(req, res, next);
|
|
} else {
|
|
next();
|
|
}
|
|
};
|
|
|
|
middlewares.push({
|
|
name: "http-proxy-middleware",
|
|
middleware: handler,
|
|
});
|
|
// Also forward error requests to the proxy so it can handle them.
|
|
middlewares.push({
|
|
name: "http-proxy-middleware-error-handler",
|
|
middleware:
|
|
/**
|
|
* @param {Error} error
|
|
* @param {Request} req
|
|
* @param {Response} res
|
|
* @param {NextFunction} next
|
|
* @returns {any}
|
|
*/
|
|
(error, req, res, next) => handler(req, res, next),
|
|
});
|
|
});
|
|
|
|
middlewares.push({
|
|
name: "webpack-dev-middleware",
|
|
middleware:
|
|
/** @type {import("webpack-dev-middleware").Middleware<Request, Response>}*/
|
|
(this.middleware),
|
|
});
|
|
}
|
|
|
|
if (/** @type {NormalizedStatic[]} */ (this.options.static).length > 0) {
|
|
/** @type {NormalizedStatic[]} */
|
|
(this.options.static).forEach((staticOption) => {
|
|
staticOption.publicPath.forEach((publicPath) => {
|
|
middlewares.push({
|
|
name: "express-static",
|
|
path: publicPath,
|
|
middleware: getExpress().static(
|
|
staticOption.directory,
|
|
staticOption.staticOptions
|
|
),
|
|
});
|
|
});
|
|
});
|
|
}
|
|
|
|
if (this.options.historyApiFallback) {
|
|
const connectHistoryApiFallback = require("connect-history-api-fallback");
|
|
const { historyApiFallback } = this.options;
|
|
|
|
if (
|
|
typeof (
|
|
/** @type {ConnectHistoryApiFallbackOptions} */
|
|
(historyApiFallback).logger
|
|
) === "undefined" &&
|
|
!(
|
|
/** @type {ConnectHistoryApiFallbackOptions} */
|
|
(historyApiFallback).verbose
|
|
)
|
|
) {
|
|
// @ts-ignore
|
|
historyApiFallback.logger = this.logger.log.bind(
|
|
this.logger,
|
|
"[connect-history-api-fallback]"
|
|
);
|
|
}
|
|
|
|
// Fall back to /index.html if nothing else matches.
|
|
middlewares.push({
|
|
name: "connect-history-api-fallback",
|
|
middleware: connectHistoryApiFallback(
|
|
/** @type {ConnectHistoryApiFallbackOptions} */
|
|
(historyApiFallback)
|
|
),
|
|
});
|
|
|
|
// include our middleware to ensure
|
|
// it is able to handle '/index.html' request after redirect
|
|
middlewares.push({
|
|
name: "webpack-dev-middleware",
|
|
middleware:
|
|
/** @type {import("webpack-dev-middleware").Middleware<Request, Response>}*/
|
|
(this.middleware),
|
|
});
|
|
|
|
if (/** @type {NormalizedStatic[]} */ (this.options.static).length > 0) {
|
|
/** @type {NormalizedStatic[]} */
|
|
(this.options.static).forEach((staticOption) => {
|
|
staticOption.publicPath.forEach((publicPath) => {
|
|
middlewares.push({
|
|
name: "express-static",
|
|
path: publicPath,
|
|
middleware: getExpress().static(
|
|
staticOption.directory,
|
|
staticOption.staticOptions
|
|
),
|
|
});
|
|
});
|
|
});
|
|
}
|
|
}
|
|
|
|
if (/** @type {NormalizedStatic[]} */ (this.options.static).length > 0) {
|
|
const serveIndex = require("serve-index");
|
|
|
|
/** @type {NormalizedStatic[]} */
|
|
(this.options.static).forEach((staticOption) => {
|
|
staticOption.publicPath.forEach((publicPath) => {
|
|
if (staticOption.serveIndex) {
|
|
middlewares.push({
|
|
name: "serve-index",
|
|
path: publicPath,
|
|
/**
|
|
* @param {Request} req
|
|
* @param {Response} res
|
|
* @param {NextFunction} next
|
|
* @returns {void}
|
|
*/
|
|
middleware: (req, res, next) => {
|
|
// serve-index doesn't fallthrough non-get/head request to next middleware
|
|
if (req.method !== "GET" && req.method !== "HEAD") {
|
|
return next();
|
|
}
|
|
|
|
serveIndex(
|
|
staticOption.directory,
|
|
/** @type {ServeIndexOptions} */
|
|
(staticOption.serveIndex)
|
|
)(req, res, next);
|
|
},
|
|
});
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
if (this.options.magicHtml) {
|
|
middlewares.push({
|
|
name: "serve-magic-html",
|
|
middleware: this.serveMagicHtml.bind(this),
|
|
});
|
|
}
|
|
|
|
// Register this middleware always as the last one so that it's only used as a
|
|
// fallback when no other middleware responses.
|
|
middlewares.push({
|
|
name: "options-middleware",
|
|
path: "*",
|
|
/**
|
|
* @param {Request} req
|
|
* @param {Response} res
|
|
* @param {NextFunction} next
|
|
* @returns {void}
|
|
*/
|
|
middleware: (req, res, next) => {
|
|
if (req.method === "OPTIONS") {
|
|
res.statusCode = 204;
|
|
res.setHeader("Content-Length", "0");
|
|
res.end();
|
|
return;
|
|
}
|
|
next();
|
|
},
|
|
});
|
|
|
|
if (typeof this.options.setupMiddlewares === "function") {
|
|
middlewares = this.options.setupMiddlewares(middlewares, this);
|
|
}
|
|
|
|
middlewares.forEach((middleware) => {
|
|
if (typeof middleware === "function") {
|
|
/** @type {import("express").Application} */
|
|
(this.app).use(middleware);
|
|
} else if (typeof middleware.path !== "undefined") {
|
|
/** @type {import("express").Application} */
|
|
(this.app).use(middleware.path, middleware.middleware);
|
|
} else {
|
|
/** @type {import("express").Application} */
|
|
(this.app).use(middleware.middleware);
|
|
}
|
|
});
|
|
|
|
if (typeof this.options.onAfterSetupMiddleware === "function") {
|
|
this.options.onAfterSetupMiddleware(this);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
* @returns {void}
|
|
*/
|
|
createServer() {
|
|
const { type, options } = /** @type {ServerConfiguration} */ (
|
|
this.options.server
|
|
);
|
|
|
|
/** @type {import("http").Server | undefined | null} */
|
|
// eslint-disable-next-line import/no-dynamic-require
|
|
this.server = require(/** @type {string} */ (type)).createServer(
|
|
options,
|
|
this.app
|
|
);
|
|
|
|
/** @type {import("http").Server} */
|
|
(this.server).on(
|
|
"connection",
|
|
/**
|
|
* @param {Socket} socket
|
|
*/
|
|
(socket) => {
|
|
// Add socket to list
|
|
this.sockets.push(socket);
|
|
|
|
socket.once("close", () => {
|
|
// Remove socket from list
|
|
this.sockets.splice(this.sockets.indexOf(socket), 1);
|
|
});
|
|
}
|
|
);
|
|
|
|
/** @type {import("http").Server} */
|
|
(this.server).on(
|
|
"error",
|
|
/**
|
|
* @param {Error} error
|
|
*/
|
|
(error) => {
|
|
throw error;
|
|
}
|
|
);
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
* @returns {void}
|
|
*/
|
|
// TODO: remove `--web-socket-server` in favor of `--web-socket-server-type`
|
|
createWebSocketServer() {
|
|
/** @type {WebSocketServerImplementation | undefined | null} */
|
|
this.webSocketServer = new /** @type {any} */ (this.getServerTransport())(
|
|
this
|
|
);
|
|
/** @type {WebSocketServerImplementation} */
|
|
(this.webSocketServer).implementation.on(
|
|
"connection",
|
|
/**
|
|
* @param {ClientConnection} client
|
|
* @param {IncomingMessage} request
|
|
*/
|
|
(client, request) => {
|
|
/** @type {{ [key: string]: string | undefined } | undefined} */
|
|
const headers =
|
|
// eslint-disable-next-line no-nested-ternary
|
|
typeof request !== "undefined"
|
|
? /** @type {{ [key: string]: string | undefined }} */
|
|
(request.headers)
|
|
: typeof (
|
|
/** @type {import("sockjs").Connection} */ (client).headers
|
|
) !== "undefined"
|
|
? /** @type {import("sockjs").Connection} */ (client).headers
|
|
: // eslint-disable-next-line no-undefined
|
|
undefined;
|
|
|
|
if (!headers) {
|
|
this.logger.warn(
|
|
'webSocketServer implementation must pass headers for the "connection" event'
|
|
);
|
|
}
|
|
|
|
if (
|
|
!headers ||
|
|
!this.checkHeader(headers, "host") ||
|
|
!this.checkHeader(headers, "origin")
|
|
) {
|
|
this.sendMessage([client], "error", "Invalid Host/Origin header");
|
|
|
|
// With https enabled, the sendMessage above is encrypted asynchronously so not yet sent
|
|
// Terminate would prevent it sending, so use close to allow it to be sent
|
|
client.close();
|
|
|
|
return;
|
|
}
|
|
|
|
if (this.options.hot === true || this.options.hot === "only") {
|
|
this.sendMessage([client], "hot");
|
|
}
|
|
|
|
if (this.options.liveReload) {
|
|
this.sendMessage([client], "liveReload");
|
|
}
|
|
|
|
if (
|
|
this.options.client &&
|
|
/** @type {ClientConfiguration} */
|
|
(this.options.client).progress
|
|
) {
|
|
this.sendMessage(
|
|
[client],
|
|
"progress",
|
|
/** @type {ClientConfiguration} */
|
|
(this.options.client).progress
|
|
);
|
|
}
|
|
|
|
if (
|
|
this.options.client &&
|
|
/** @type {ClientConfiguration} */ (this.options.client).reconnect
|
|
) {
|
|
this.sendMessage(
|
|
[client],
|
|
"reconnect",
|
|
/** @type {ClientConfiguration} */
|
|
(this.options.client).reconnect
|
|
);
|
|
}
|
|
|
|
if (
|
|
this.options.client &&
|
|
/** @type {ClientConfiguration} */
|
|
(this.options.client).overlay
|
|
) {
|
|
const overlayConfig = /** @type {ClientConfiguration} */ (
|
|
this.options.client
|
|
).overlay;
|
|
|
|
this.sendMessage(
|
|
[client],
|
|
"overlay",
|
|
typeof overlayConfig === "object"
|
|
? {
|
|
...overlayConfig,
|
|
errors:
|
|
overlayConfig.errors &&
|
|
encodeOverlaySettings(overlayConfig.errors),
|
|
warnings:
|
|
overlayConfig.warnings &&
|
|
encodeOverlaySettings(overlayConfig.warnings),
|
|
runtimeErrors:
|
|
overlayConfig.runtimeErrors &&
|
|
encodeOverlaySettings(overlayConfig.runtimeErrors),
|
|
}
|
|
: overlayConfig
|
|
);
|
|
}
|
|
|
|
if (!this.stats) {
|
|
return;
|
|
}
|
|
|
|
this.sendStats([client], this.getStats(this.stats), true);
|
|
}
|
|
);
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
* @param {string} defaultOpenTarget
|
|
* @returns {void}
|
|
*/
|
|
openBrowser(defaultOpenTarget) {
|
|
const open = require("open");
|
|
|
|
Promise.all(
|
|
/** @type {NormalizedOpen[]} */
|
|
(this.options.open).map((item) => {
|
|
/**
|
|
* @type {string}
|
|
*/
|
|
let openTarget;
|
|
|
|
if (item.target === "<url>") {
|
|
openTarget = defaultOpenTarget;
|
|
} else {
|
|
openTarget = Server.isAbsoluteURL(item.target)
|
|
? item.target
|
|
: new URL(item.target, defaultOpenTarget).toString();
|
|
}
|
|
|
|
return open(openTarget, item.options).catch(() => {
|
|
this.logger.warn(
|
|
`Unable to open "${openTarget}" page${
|
|
item.options.app
|
|
? ` in "${
|
|
/** @type {import("open").App} */
|
|
(item.options.app).name
|
|
}" app${
|
|
/** @type {import("open").App} */
|
|
(item.options.app).arguments
|
|
? ` with "${
|
|
/** @type {import("open").App} */
|
|
(item.options.app).arguments.join(" ")
|
|
}" arguments`
|
|
: ""
|
|
}`
|
|
: ""
|
|
}. If you are running in a headless environment, please do not use the "open" option or related flags like "--open", "--open-target", and "--open-app".`
|
|
);
|
|
});
|
|
})
|
|
);
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
* @returns {void}
|
|
*/
|
|
runBonjour() {
|
|
const { Bonjour } = require("bonjour-service");
|
|
/**
|
|
* @private
|
|
* @type {Bonjour | undefined}
|
|
*/
|
|
this.bonjour = new Bonjour();
|
|
this.bonjour.publish({
|
|
// @ts-expect-error
|
|
name: `Webpack Dev Server ${os.hostname()}:${this.options.port}`,
|
|
// @ts-expect-error
|
|
port: /** @type {number} */ (this.options.port),
|
|
// @ts-expect-error
|
|
type:
|
|
/** @type {ServerConfiguration} */
|
|
(this.options.server).type === "http" ? "http" : "https",
|
|
subtypes: ["webpack"],
|
|
.../** @type {BonjourOptions} */ (this.options.bonjour),
|
|
});
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
* @returns {void}
|
|
*/
|
|
stopBonjour(callback = () => {}) {
|
|
/** @type {Bonjour} */
|
|
(this.bonjour).unpublishAll(() => {
|
|
/** @type {Bonjour} */
|
|
(this.bonjour).destroy();
|
|
|
|
if (callback) {
|
|
callback();
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
* @returns {void}
|
|
*/
|
|
logStatus() {
|
|
const { isColorSupported, cyan, red } = require("colorette");
|
|
|
|
/**
|
|
* @param {Compiler["options"]} compilerOptions
|
|
* @returns {boolean}
|
|
*/
|
|
const getColorsOption = (compilerOptions) => {
|
|
/**
|
|
* @type {boolean}
|
|
*/
|
|
let colorsEnabled;
|
|
|
|
if (
|
|
compilerOptions.stats &&
|
|
typeof (/** @type {StatsOptions} */ (compilerOptions.stats).colors) !==
|
|
"undefined"
|
|
) {
|
|
colorsEnabled =
|
|
/** @type {boolean} */
|
|
(/** @type {StatsOptions} */ (compilerOptions.stats).colors);
|
|
} else {
|
|
colorsEnabled = isColorSupported;
|
|
}
|
|
|
|
return colorsEnabled;
|
|
};
|
|
|
|
const colors = {
|
|
/**
|
|
* @param {boolean} useColor
|
|
* @param {string} msg
|
|
* @returns {string}
|
|
*/
|
|
info(useColor, msg) {
|
|
if (useColor) {
|
|
return cyan(msg);
|
|
}
|
|
|
|
return msg;
|
|
},
|
|
/**
|
|
* @param {boolean} useColor
|
|
* @param {string} msg
|
|
* @returns {string}
|
|
*/
|
|
error(useColor, msg) {
|
|
if (useColor) {
|
|
return red(msg);
|
|
}
|
|
|
|
return msg;
|
|
},
|
|
};
|
|
const useColor = getColorsOption(this.getCompilerOptions());
|
|
|
|
if (this.options.ipc) {
|
|
this.logger.info(
|
|
`Project is running at: "${
|
|
/** @type {import("http").Server} */
|
|
(this.server).address()
|
|
}"`
|
|
);
|
|
} else {
|
|
const protocol =
|
|
/** @type {ServerConfiguration} */
|
|
(this.options.server).type === "http" ? "http" : "https";
|
|
const { address, port } =
|
|
/** @type {import("net").AddressInfo} */
|
|
(
|
|
/** @type {import("http").Server} */
|
|
(this.server).address()
|
|
);
|
|
/**
|
|
* @param {string} newHostname
|
|
* @returns {string}
|
|
*/
|
|
const prettyPrintURL = (newHostname) =>
|
|
url.format({ protocol, hostname: newHostname, port, pathname: "/" });
|
|
|
|
let server;
|
|
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 (error) {
|
|
// Ignore
|
|
}
|
|
|
|
if (!isIP) {
|
|
server = prettyPrintURL(this.options.host);
|
|
}
|
|
}
|
|
}
|
|
|
|
const parsedIP = ipaddr.parse(address);
|
|
|
|
if (parsedIP.range() === "unspecified") {
|
|
localhost = prettyPrintURL("localhost");
|
|
|
|
const networkIPv4 = Server.internalIPSync("v4");
|
|
|
|
if (networkIPv4) {
|
|
networkUrlIPv4 = prettyPrintURL(networkIPv4);
|
|
}
|
|
|
|
const networkIPv6 = Server.internalIPSync("v6");
|
|
|
|
if (networkIPv6) {
|
|
networkUrlIPv6 = prettyPrintURL(networkIPv6);
|
|
}
|
|
} else if (parsedIP.range() === "loopback") {
|
|
if (parsedIP.kind() === "ipv4") {
|
|
loopbackIPv4 = prettyPrintURL(parsedIP.toString());
|
|
} else if (parsedIP.kind() === "ipv6") {
|
|
loopbackIPv6 = prettyPrintURL(parsedIP.toString());
|
|
}
|
|
} else {
|
|
networkUrlIPv4 =
|
|
parsedIP.kind() === "ipv6" &&
|
|
/** @type {IPv6} */
|
|
(parsedIP).isIPv4MappedAddress()
|
|
? prettyPrintURL(
|
|
/** @type {IPv6} */
|
|
(parsedIP).toIPv4Address().toString()
|
|
)
|
|
: prettyPrintURL(address);
|
|
|
|
if (parsedIP.kind() === "ipv6") {
|
|
networkUrlIPv6 = prettyPrintURL(address);
|
|
}
|
|
}
|
|
|
|
this.logger.info("Project is running at:");
|
|
|
|
if (server) {
|
|
this.logger.info(`Server: ${colors.info(useColor, server)}`);
|
|
}
|
|
|
|
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(", ")}`);
|
|
}
|
|
|
|
if (networkUrlIPv4) {
|
|
this.logger.info(
|
|
`On Your Network (IPv4): ${colors.info(useColor, networkUrlIPv4)}`
|
|
);
|
|
}
|
|
|
|
if (networkUrlIPv6) {
|
|
this.logger.info(
|
|
`On Your Network (IPv6): ${colors.info(useColor, networkUrlIPv6)}`
|
|
);
|
|
}
|
|
|
|
if (/** @type {NormalizedOpen[]} */ (this.options.open).length > 0) {
|
|
const openTarget = prettyPrintURL(
|
|
!this.options.host ||
|
|
this.options.host === "0.0.0.0" ||
|
|
this.options.host === "::"
|
|
? "localhost"
|
|
: this.options.host
|
|
);
|
|
|
|
this.openBrowser(openTarget);
|
|
}
|
|
}
|
|
|
|
if (/** @type {NormalizedStatic[]} */ (this.options.static).length > 0) {
|
|
this.logger.info(
|
|
`Content not from webpack is served from '${colors.info(
|
|
useColor,
|
|
/** @type {NormalizedStatic[]} */
|
|
(this.options.static)
|
|
.map((staticOption) => staticOption.directory)
|
|
.join(", ")
|
|
)}' directory`
|
|
);
|
|
}
|
|
|
|
if (this.options.historyApiFallback) {
|
|
this.logger.info(
|
|
`404s will fallback to '${colors.info(
|
|
useColor,
|
|
/** @type {ConnectHistoryApiFallbackOptions} */ (
|
|
this.options.historyApiFallback
|
|
).index || "/index.html"
|
|
)}'`
|
|
);
|
|
}
|
|
|
|
if (this.options.bonjour) {
|
|
const bonjourProtocol =
|
|
/** @type {BonjourOptions} */
|
|
(this.options.bonjour).type ||
|
|
/** @type {ServerConfiguration} */
|
|
(this.options.server).type === "http"
|
|
? "http"
|
|
: "https";
|
|
|
|
this.logger.info(
|
|
`Broadcasting "${bonjourProtocol}" with subtype of "webpack" via ZeroConf DNS (Bonjour)`
|
|
);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
* @param {Request} req
|
|
* @param {Response} res
|
|
* @param {NextFunction} next
|
|
*/
|
|
setHeaders(req, res, next) {
|
|
let { headers } = this.options;
|
|
|
|
if (headers) {
|
|
if (typeof headers === "function") {
|
|
headers = headers(
|
|
req,
|
|
res,
|
|
/** @type {import("webpack-dev-middleware").API<Request, Response>}*/
|
|
(this.middleware).context
|
|
);
|
|
}
|
|
|
|
/**
|
|
* @type {{key: string, value: string}[]}
|
|
*/
|
|
const allHeaders = [];
|
|
|
|
if (!Array.isArray(headers)) {
|
|
// eslint-disable-next-line guard-for-in
|
|
for (const name in headers) {
|
|
// @ts-ignore
|
|
allHeaders.push({ key: name, value: headers[name] });
|
|
}
|
|
|
|
headers = allHeaders;
|
|
}
|
|
|
|
headers.forEach(
|
|
/**
|
|
* @param {{key: string, value: any}} header
|
|
*/
|
|
(header) => {
|
|
res.setHeader(header.key, header.value);
|
|
}
|
|
);
|
|
}
|
|
|
|
next();
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
* @param {{ [key: string]: string | undefined }} headers
|
|
* @param {string} headerToCheck
|
|
* @returns {boolean}
|
|
*/
|
|
checkHeader(headers, headerToCheck) {
|
|
// allow user to opt out of this security check, at their own risk
|
|
// by explicitly enabling allowedHosts
|
|
if (this.options.allowedHosts === "all") {
|
|
return true;
|
|
}
|
|
|
|
// get the Host header and extract hostname
|
|
// we don't care about port not matching
|
|
const hostHeader = headers[headerToCheck];
|
|
|
|
if (!hostHeader) {
|
|
return false;
|
|
}
|
|
|
|
if (/^(file|.+-extension):/i.test(hostHeader)) {
|
|
return true;
|
|
}
|
|
|
|
// use the node url-parser to retrieve the hostname from the host-header.
|
|
const hostname = url.parse(
|
|
// if hostHeader doesn't have scheme, add // for parsing.
|
|
/^(.+:)?\/\//.test(hostHeader) ? hostHeader : `//${hostHeader}`,
|
|
false,
|
|
true
|
|
).hostname;
|
|
|
|
// always allow requests with explicit IPv4 or IPv6-address.
|
|
// A note on IPv6 addresses:
|
|
// hostHeader 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.
|
|
// For convenience, always allow localhost (hostname === 'localhost')
|
|
// and its subdomains (hostname.endsWith(".localhost")).
|
|
// allow hostname of listening address (hostname === this.options.host)
|
|
const isValidHostname =
|
|
(hostname !== null && ipaddr.IPv4.isValid(hostname)) ||
|
|
(hostname !== null && ipaddr.IPv6.isValid(hostname)) ||
|
|
hostname === "localhost" ||
|
|
(hostname !== null && hostname.endsWith(".localhost")) ||
|
|
hostname === this.options.host;
|
|
|
|
if (isValidHostname) {
|
|
return true;
|
|
}
|
|
|
|
const { allowedHosts } = this.options;
|
|
|
|
// always allow localhost host, for convenience
|
|
// allow if hostname is in allowedHosts
|
|
if (Array.isArray(allowedHosts) && allowedHosts.length > 0) {
|
|
for (let hostIdx = 0; hostIdx < allowedHosts.length; hostIdx++) {
|
|
const allowedHost = allowedHosts[hostIdx];
|
|
|
|
if (allowedHost === hostname) {
|
|
return true;
|
|
}
|
|
|
|
// support "." as a subdomain wildcard
|
|
// e.g. ".example.com" will allow "example.com", "www.example.com", "subdomain.example.com", etc
|
|
if (allowedHost[0] === ".") {
|
|
// "example.com" (hostname === allowedHost.substring(1))
|
|
// "*.example.com" (hostname.endsWith(allowedHost))
|
|
if (
|
|
hostname === allowedHost.substring(1) ||
|
|
/** @type {string} */ (hostname).endsWith(allowedHost)
|
|
) {
|
|
return true;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Also allow if `client.webSocketURL.hostname` provided
|
|
if (
|
|
this.options.client &&
|
|
typeof (
|
|
/** @type {ClientConfiguration} */ (this.options.client).webSocketURL
|
|
) !== "undefined"
|
|
) {
|
|
return (
|
|
/** @type {WebSocketURL} */
|
|
(/** @type {ClientConfiguration} */ (this.options.client).webSocketURL)
|
|
.hostname === hostname
|
|
);
|
|
}
|
|
|
|
// disallow
|
|
return false;
|
|
}
|
|
|
|
/**
|
|
* @param {ClientConnection[]} clients
|
|
* @param {string} type
|
|
* @param {any} [data]
|
|
* @param {any} [params]
|
|
*/
|
|
// eslint-disable-next-line class-methods-use-this
|
|
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
|
|
if (client.readyState === 1) {
|
|
client.send(JSON.stringify({ type, data, params }));
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
* @param {Request} req
|
|
* @param {Response} res
|
|
* @param {NextFunction} next
|
|
* @returns {void}
|
|
*/
|
|
serveMagicHtml(req, res, next) {
|
|
if (req.method !== "GET" && req.method !== "HEAD") {
|
|
return next();
|
|
}
|
|
|
|
/** @type {import("webpack-dev-middleware").API<Request, Response>}*/
|
|
(this.middleware).waitUntilValid(() => {
|
|
const _path = req.path;
|
|
|
|
try {
|
|
const filename =
|
|
/** @type {import("webpack-dev-middleware").API<Request, Response>}*/
|
|
(this.middleware).getFilenameFromUrl(`${_path}.js`);
|
|
const isFile =
|
|
/** @type {Compiler["outputFileSystem"] & { statSync: import("fs").StatSyncFn }}*/
|
|
(
|
|
/** @type {import("webpack-dev-middleware").API<Request, Response>}*/
|
|
(this.middleware).context.outputFileSystem
|
|
)
|
|
.statSync(/** @type {import("fs").PathLike} */ (filename))
|
|
.isFile();
|
|
|
|
if (!isFile) {
|
|
return next();
|
|
}
|
|
|
|
// Serve a page that executes the javascript
|
|
// @ts-ignore
|
|
const queries = req._parsedUrl.search || "";
|
|
const responsePage = `<!DOCTYPE html><html><head><meta charset="utf-8"/></head><body><script type="text/javascript" charset="utf-8" src="${_path}.js${queries}"></script></body></html>`;
|
|
|
|
res.send(responsePage);
|
|
} catch (error) {
|
|
return next();
|
|
}
|
|
});
|
|
}
|
|
|
|
// Send stats to a socket or multiple sockets
|
|
/**
|
|
* @private
|
|
* @param {ClientConnection[]} clients
|
|
* @param {StatsCompilation} stats
|
|
* @param {boolean} [force]
|
|
*/
|
|
sendStats(clients, stats, force) {
|
|
const shouldEmit =
|
|
!force &&
|
|
stats &&
|
|
(!stats.errors || stats.errors.length === 0) &&
|
|
(!stats.warnings || stats.warnings.length === 0) &&
|
|
this.currentHash === stats.hash;
|
|
|
|
if (shouldEmit) {
|
|
this.sendMessage(clients, "still-ok");
|
|
|
|
return;
|
|
}
|
|
|
|
this.currentHash = stats.hash;
|
|
this.sendMessage(clients, "hash", stats.hash);
|
|
|
|
if (
|
|
/** @type {NonNullable<StatsCompilation["errors"]>} */
|
|
(stats.errors).length > 0 ||
|
|
/** @type {NonNullable<StatsCompilation["warnings"]>} */
|
|
(stats.warnings).length > 0
|
|
) {
|
|
const hasErrors =
|
|
/** @type {NonNullable<StatsCompilation["errors"]>} */
|
|
(stats.errors).length > 0;
|
|
|
|
if (
|
|
/** @type {NonNullable<StatsCompilation["warnings"]>} */
|
|
(stats.warnings).length > 0
|
|
) {
|
|
let params;
|
|
|
|
if (hasErrors) {
|
|
params = { preventReloading: true };
|
|
}
|
|
|
|
this.sendMessage(clients, "warnings", stats.warnings, params);
|
|
}
|
|
|
|
if (
|
|
/** @type {NonNullable<StatsCompilation["errors"]>} */ (stats.errors)
|
|
.length > 0
|
|
) {
|
|
this.sendMessage(clients, "errors", stats.errors);
|
|
}
|
|
} else {
|
|
this.sendMessage(clients, "ok");
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @param {string | string[]} watchPath
|
|
* @param {WatchOptions} [watchOptions]
|
|
*/
|
|
watchFiles(watchPath, watchOptions) {
|
|
const chokidar = require("chokidar");
|
|
const watcher = chokidar.watch(watchPath, watchOptions);
|
|
|
|
// disabling refreshing on changing the content
|
|
if (this.options.liveReload) {
|
|
watcher.on("change", (item) => {
|
|
if (this.webSocketServer) {
|
|
this.sendMessage(
|
|
this.webSocketServer.clients,
|
|
"static-changed",
|
|
item
|
|
);
|
|
}
|
|
});
|
|
}
|
|
|
|
this.staticWatchers.push(watcher);
|
|
}
|
|
|
|
/**
|
|
* @param {import("webpack-dev-middleware").Callback} [callback]
|
|
*/
|
|
invalidate(callback = () => {}) {
|
|
if (this.middleware) {
|
|
this.middleware.invalidate(callback);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @returns {Promise<void>}
|
|
*/
|
|
async start() {
|
|
await this.normalizeOptions();
|
|
|
|
if (this.options.ipc) {
|
|
await /** @type {Promise<void>} */ (
|
|
new Promise((resolve, reject) => {
|
|
const net = require("net");
|
|
const socket = new net.Socket();
|
|
|
|
socket.on(
|
|
"error",
|
|
/**
|
|
* @param {Error & { code?: string }} error
|
|
*/
|
|
(error) => {
|
|
if (error.code === "ECONNREFUSED") {
|
|
// No other server listening on this socket, so it can be safely removed
|
|
fs.unlinkSync(/** @type {string} */ (this.options.ipc));
|
|
|
|
resolve();
|
|
|
|
return;
|
|
} else if (error.code === "ENOENT") {
|
|
resolve();
|
|
|
|
return;
|
|
}
|
|
|
|
reject(error);
|
|
}
|
|
);
|
|
|
|
socket.connect(
|
|
{ path: /** @type {string} */ (this.options.ipc) },
|
|
() => {
|
|
throw new Error(`IPC "${this.options.ipc}" is already used`);
|
|
}
|
|
);
|
|
})
|
|
);
|
|
} else {
|
|
this.options.host = await Server.getHostname(
|
|
/** @type {Host} */ (this.options.host)
|
|
);
|
|
this.options.port = await Server.getFreePort(
|
|
/** @type {Port} */ (this.options.port),
|
|
this.options.host
|
|
);
|
|
}
|
|
|
|
await this.initialize();
|
|
|
|
const listenOptions = this.options.ipc
|
|
? { path: this.options.ipc }
|
|
: { host: this.options.host, port: this.options.port };
|
|
|
|
await /** @type {Promise<void>} */ (
|
|
new Promise((resolve) => {
|
|
/** @type {import("http").Server} */
|
|
(this.server).listen(listenOptions, () => {
|
|
resolve();
|
|
});
|
|
})
|
|
);
|
|
|
|
if (this.options.ipc) {
|
|
// chmod 666 (rw rw rw)
|
|
const READ_WRITE = 438;
|
|
|
|
await fs.promises.chmod(
|
|
/** @type {string} */ (this.options.ipc),
|
|
READ_WRITE
|
|
);
|
|
}
|
|
|
|
if (this.options.webSocketServer) {
|
|
this.createWebSocketServer();
|
|
}
|
|
|
|
if (this.options.bonjour) {
|
|
this.runBonjour();
|
|
}
|
|
|
|
this.logStatus();
|
|
|
|
if (typeof this.options.onListening === "function") {
|
|
this.options.onListening(this);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @param {(err?: Error) => void} [callback]
|
|
*/
|
|
startCallback(callback = () => {}) {
|
|
this.start()
|
|
.then(() => callback(), callback)
|
|
.catch(callback);
|
|
}
|
|
|
|
/**
|
|
* @returns {Promise<void>}
|
|
*/
|
|
async stop() {
|
|
if (this.bonjour) {
|
|
await /** @type {Promise<void>} */ (
|
|
new Promise((resolve) => {
|
|
this.stopBonjour(() => {
|
|
resolve();
|
|
});
|
|
})
|
|
);
|
|
}
|
|
|
|
this.webSocketProxies = [];
|
|
|
|
await Promise.all(this.staticWatchers.map((watcher) => watcher.close()));
|
|
|
|
this.staticWatchers = [];
|
|
|
|
if (this.webSocketServer) {
|
|
await /** @type {Promise<void>} */ (
|
|
new Promise((resolve) => {
|
|
/** @type {WebSocketServerImplementation} */
|
|
(this.webSocketServer).implementation.close(() => {
|
|
this.webSocketServer = null;
|
|
|
|
resolve();
|
|
});
|
|
|
|
for (const client of /** @type {WebSocketServerImplementation} */ (
|
|
this.webSocketServer
|
|
).clients) {
|
|
client.terminate();
|
|
}
|
|
|
|
/** @type {WebSocketServerImplementation} */
|
|
(this.webSocketServer).clients = [];
|
|
})
|
|
);
|
|
}
|
|
|
|
if (this.server) {
|
|
await /** @type {Promise<void>} */ (
|
|
new Promise((resolve) => {
|
|
/** @type {import("http").Server} */
|
|
(this.server).close(() => {
|
|
this.server = null;
|
|
|
|
resolve();
|
|
});
|
|
|
|
for (const socket of this.sockets) {
|
|
socket.destroy();
|
|
}
|
|
|
|
this.sockets = [];
|
|
})
|
|
);
|
|
|
|
if (this.middleware) {
|
|
await /** @type {Promise<void>} */ (
|
|
new Promise((resolve, reject) => {
|
|
/** @type {import("webpack-dev-middleware").API<Request, Response>}*/
|
|
(this.middleware).close((error) => {
|
|
if (error) {
|
|
reject(error);
|
|
|
|
return;
|
|
}
|
|
|
|
resolve();
|
|
});
|
|
})
|
|
);
|
|
|
|
this.middleware = null;
|
|
}
|
|
}
|
|
|
|
// We add listeners to signals when creating a new Server instance
|
|
// So ensure they are removed to prevent EventEmitter memory leak warnings
|
|
for (const item of this.listeners) {
|
|
process.removeListener(item.name, item.listener);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @param {(err?: Error) => void} [callback]
|
|
*/
|
|
stopCallback(callback = () => {}) {
|
|
this.stop()
|
|
.then(() => callback(), callback)
|
|
.catch(callback);
|
|
}
|
|
|
|
// TODO remove in the next major release
|
|
/**
|
|
* @param {Port} port
|
|
* @param {Host} hostname
|
|
* @param {(err?: Error) => void} fn
|
|
* @returns {void}
|
|
*/
|
|
listen(port, hostname, fn) {
|
|
util.deprecate(
|
|
() => {},
|
|
"'listen' is deprecated. Please use the async 'start' or 'startCallback' method.",
|
|
"DEP_WEBPACK_DEV_SERVER_LISTEN"
|
|
)();
|
|
|
|
if (typeof port === "function") {
|
|
fn = port;
|
|
}
|
|
|
|
if (
|
|
typeof port !== "undefined" &&
|
|
typeof this.options.port !== "undefined" &&
|
|
port !== this.options.port
|
|
) {
|
|
this.options.port = port;
|
|
|
|
this.logger.warn(
|
|
'The "port" specified in options is different from the port passed as an argument. Will be used from arguments.'
|
|
);
|
|
}
|
|
|
|
if (!this.options.port) {
|
|
this.options.port = port;
|
|
}
|
|
|
|
if (
|
|
typeof hostname !== "undefined" &&
|
|
typeof this.options.host !== "undefined" &&
|
|
hostname !== this.options.host
|
|
) {
|
|
this.options.host = hostname;
|
|
|
|
this.logger.warn(
|
|
'The "host" specified in options is different from the host passed as an argument. Will be used from arguments.'
|
|
);
|
|
}
|
|
|
|
if (!this.options.host) {
|
|
this.options.host = hostname;
|
|
}
|
|
|
|
this.start()
|
|
.then(() => {
|
|
if (fn) {
|
|
fn.call(this.server);
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
// Nothing
|
|
if (fn) {
|
|
fn.call(this.server, error);
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* @param {(err?: Error) => void} [callback]
|
|
* @returns {void}
|
|
*/
|
|
// TODO remove in the next major release
|
|
close(callback) {
|
|
util.deprecate(
|
|
() => {},
|
|
"'close' is deprecated. Please use the async 'stop' or 'stopCallback' method.",
|
|
"DEP_WEBPACK_DEV_SERVER_CLOSE"
|
|
)();
|
|
|
|
this.stop()
|
|
.then(() => {
|
|
if (callback) {
|
|
callback();
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
if (callback) {
|
|
callback(error);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
module.exports = Server;
|