Merge remote-tracking branch 'upstream/master' into bugfix-hmr-logging

README.md

@@ -52,7 +52,7 @@ We appreciate all help! Check out [CONTRIBUTING.md](CONTRIBUTING.md) for more in
         <img width="150" height="150"
         src="https://avatars.githubusercontent.com/SpaceK33z?v=3">
         <br />
-        <a href="https://github.com/">Kees Kluskens</a>
+        <a href="https://github.com/SpaceK33z">Kees Kluskens</a>
       </td>
     </tr>
   </tbody>

bin/webpack-dev-server.js

@@ -64,6 +64,10 @@ const BASIC_GROUP = "Basic options:";
 const DEFAULT_PORT = 8080;
 
 yargs.options({
+	"bonjour": {
+		type: "boolean",
+		describe: "Broadcasts the server via ZeroConf networking on start"
+	},
 	"lazy": {
 		type: "boolean",
 		describe: "Lazy"
@@ -91,6 +95,10 @@ yargs.options({
 		type: "boolean",
 		describe: "Open default browser"
 	},
+	"useLocalIp": {
+		type: "boolean",
+		describe: "Open default browser with local IP"
+	},
 	"open-page": {
 		type: "string",
 		describe: "Open default browser with the specified page",
@@ -214,6 +222,9 @@ function processOptions(wpOpt) {
 
 	const options = wpOpt.devServer || firstWpOpt.devServer || {};
 
+	if(argv.bonjour)
+		options.bonjour = true;
+
 	if(argv.host !== "localhost" || !options.host)
 		options.host = argv.host;
 
@@ -322,6 +333,9 @@ function processOptions(wpOpt) {
 		options.openPage = argv["open-page"] || "";
 	}
 
+	if(argv["useLocalIp"])
+		options.useLocalIp = true;
+
 	// Kind of weird, but ensures prior behavior isn't broken in cases
 	// that wouldn't throw errors. E.g. both argv.port and options.port
 	// were specified, but since argv.port is 8080, options.port will be
@@ -410,6 +424,7 @@ function startDevServer(wpOpt, options) {
 	} else {
 		server.listen(options.port, options.host, function(err) {
 			if(err) throw err;
+			if(options.bonjour) broadcastZeroconf(options);
 			reportReadiness(uri, options);
 		});
 	}
@@ -434,6 +449,23 @@ function reportReadiness(uri, options) {
 			console.log("Unable to open browser. If you are running in a headless environment, please do not use the open flag.");
 		});
 	}
+	if(options.bonjour)
+		console.log("Broadcasting \"http\" with subtype of \"webpack\" via ZeroConf DNS (Bonjour)");
+}
+
+function broadcastZeroconf(options) {
+	const bonjour = require("bonjour")();
+	bonjour.publish({
+		name: "Webpack Dev Server",
+		port: options.port,
+		type: "http",
+		subtypes: ["webpack"]
+	});
+	process.on("exit", function() {
+		bonjour.unpublishAll(function() {
+			bonjour.destroy();
+		});
+	});
 }
 
 processOptions(wpOpt);

client/index.js

@@ -1,6 +1,7 @@
 /* global __resourceQuery WorkerGlobalScope */
 var url = require("url");
 var stripAnsi = require("strip-ansi");
+var log = require("loglevel")
 var socket = require("./socket");
 var overlay = require("./overlay");
 
@@ -32,18 +33,16 @@ if(typeof __resourceQuery === "string" && __resourceQuery) {
 var hot = false;
 var initial = true;
 var currentHash = "";
-var logLevel = "info";
 var useWarningOverlay = false;
 var useErrorOverlay = false;
 
-function log(level, msg) {
-	if(logLevel === "info" && level === "info")
-		return console.log(msg);
-	if(["info", "warning"].indexOf(logLevel) >= 0 && level === "warning")
-		return console.warn(msg);
-	if(["info", "warning", "error"].indexOf(logLevel) >= 0 && level === "error")
-		return console.error(msg);
-}
+var INFO = "info";
+var WARNING = "warning";
+var ERROR = "error";
+var NONE = "none";
+
+// Set the default log level
+log.setDefaultLevel(INFO);
 
 // Send messages to the outside, so plugins can consume it.
 function sendMsg(type, data) {
@@ -62,31 +61,43 @@ function sendMsg(type, data) {
 var onSocketMsg = {
 	hot: function() {
 		hot = true;
-		log("info", "[WDS] Hot Module Replacement enabled.");
+		log.info("[WDS] Hot Module Replacement enabled.");
 	},
 	invalid: function() {
-		log("info", "[WDS] App updated. Recompiling...");
+		log.info("[WDS] App updated. Recompiling...");
 		sendMsg("Invalid");
 	},
 	hash: function(hash) {
 		currentHash = hash;
 	},
 	"still-ok": function() {
-		log("info", "[WDS] Nothing changed.")
+		log.info("[WDS] Nothing changed.")
 		if(useWarningOverlay || useErrorOverlay) overlay.clear();
 		sendMsg("StillOk");
 	},
 	"log-level": function(level) {
-		logLevel = level;
 		var hotCtx = require.context("webpack/hot", false, /^\.\/log$/);
 		if(hotCtx.keys().length > 0) {
 			hotCtx("./log").setLogLevel(level);
+		switch(level) {
+			case INFO:
+			case ERROR:
+				log.setLevel(level);
+				break;
+			case WARNING:
+				log.setLevel("warn"); // loglevel's warning name is different from webpack's
+				break;
+			case NONE:
+				log.disableAll();
+				break;
+			default:
+				log.error("[WDS] Unknown clientLogLevel '" + level + "'");
 		}
 	},
 	"overlay": function(overlay) {
 		if(typeof document !== "undefined") {
 			if(typeof(overlay) === "boolean") {
-				useWarningOverlay = overlay;
+				useWarningOverlay = false;
 				useErrorOverlay = overlay;
 			} else if(overlay) {
 				useWarningOverlay = overlay.warnings;
@@ -101,37 +112,37 @@ var onSocketMsg = {
 		reloadApp();
 	},
 	"content-changed": function() {
-		log("info", "[WDS] Content base changed. Reloading...")
+		log.info("[WDS] Content base changed. Reloading...")
 		self.location.reload();
 	},
 	warnings: function(warnings) {
-		log("info", "[WDS] Warnings while compiling.");
+		log.warn("[WDS] Warnings while compiling.");
 		var strippedWarnings = warnings.map(function(warning) {
 			return stripAnsi(warning);
 		});
 		sendMsg("Warnings", strippedWarnings);
 		for(var i = 0; i < strippedWarnings.length; i++)
-			console.warn(strippedWarnings[i]);
+			log.warn(strippedWarnings[i]);
 		if(useWarningOverlay) overlay.showMessage(warnings);
 
 		if(initial) return initial = false;
 		reloadApp();
 	},
 	errors: function(errors) {
-		log("info", "[WDS] Errors while compiling. Reload prevented.");
+		log.error("[WDS] Errors while compiling. Reload prevented.");
 		var strippedErrors = errors.map(function(error) {
 			return stripAnsi(error);
 		});
 		sendMsg("Errors", strippedErrors);
 		for(var i = 0; i < strippedErrors.length; i++)
-			console.error(strippedErrors[i]);
+			log.error(strippedErrors[i]);
 		if(useErrorOverlay) overlay.showMessage(errors);
 	},
 	error: function(error) {
-		console.error(error);
+		log.error(error);
 	},
 	close: function() {
-		log("error", "[WDS] Disconnected!");
+		log.error("[WDS] Disconnected!");
 		sendMsg("Close");
 	}
 };
@@ -178,15 +189,15 @@ function reloadApp() {
 		return;
 	}
 	if(hot) {
-		log("info", "[WDS] App hot update...");
+		log.info("[WDS] App hot update...");
 		var hotEmitter = require("webpack/hot/emitter");
 		hotEmitter.emit("webpackHotUpdate", currentHash);
 		if(typeof self !== "undefined" && self.window) {
 			// broadcast update to window
 			self.postMessage("webpackHotUpdate" + currentHash, "*");
 		}
 	} else {
-		log("info", "[WDS] App updated. Reloading...");
+		log.info("[WDS] App updated. Reloading...");
 		self.location.reload();
 	}
 }

examples/bonjour/README.md

@@ -0,0 +1,10 @@
+# host and port
+
+For basic usage
+```shell
+node ../../bin/webpack-dev-server.js --bonjour
+```
+
+## What should happen
+
+It should publish a zeroconf service with a type of `http` and a subtype of `webpack`.

examples/bonjour/app.js

@@ -0,0 +1 @@
+document.write("It's working.");

examples/bonjour/index.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<script src="bundle.js" type="text/javascript" charset="utf-8"></script>
+	</head>
+	<body>
+		<h1>Example: host and port</h1>
+	</body>
+</html>

examples/bonjour/webpack.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+	context: __dirname,
+	entry: "./app.js",
+}

examples/https/README.md

@@ -2,7 +2,7 @@
 
 By default webpack-dev-server will generate a self-signed, 2048 bit, sha256 SSL
 Certificate, which is used to enable https. The certificate will be located in the
-`ssl` directory afte the server is started for the first time. The generated
+`ssl` directory after the server is started for the first time. The generated
 certificate is only good for 30 days, at which point it'll be regenerated.
 
 We highly recommend creating and managing your own certificates. Please see the

lib/optionsSchema.json

@@ -13,6 +13,10 @@
       "description": "Disables watch mode and recompiles bundle only on a request.",
       "type": "boolean"
     },
+    "bonjour": {
+      "description": "Publishes the ZeroConf DNS service",
+      "type": "boolean"
+    },
     "host": {
       "description": "The host the server listens to.",
       "type": "string"
@@ -195,6 +199,10 @@
       "description": "Let the CLI open your browser.",
       "type": "boolean"
     },
+    "useLocalIp": {
+      "description": "Let the browser open with your local IP.",
+      "type": "boolean"
+    },
     "openPage": {
       "description": "Let the CLI open your browser to a specific page on the site.",
       "type": "string"

lib/util/createDomain.js

@@ -1,13 +1,14 @@
 "use strict";
 const url = require("url");
+const internalIp = require("internal-ip");
 
 module.exports = function createDomain(options) {
 	const protocol = options.https ? "https" : "http";
 
 	// the formatted domain (url without path) of the webpack server
 	return options.public ? `${protocol}://${options.public}` : url.format({
 		protocol: protocol,
-		hostname: options.host,
+		hostname: options.useLocalIp ? internalIp.v4() : options.host,
 		port: options.socket ? 0 : options.port.toString()
 	});
 };

package.json

@@ -1,30 +1,32 @@
 {
   "name": "webpack-dev-server",
-  "version": "2.4.5",
+  "version": "2.5.0",
   "author": "Tobias Koppers @sokra",
   "description": "Serves a webpack app. Updates the browser on changes.",
   "peerDependencies": {
-    "webpack": "^2.2.0"
+    "webpack": "^2.2.0 || ^3.0.0"
   },
   "dependencies": {
     "ansi-html": "0.0.7",
+    "bonjour": "^3.5.0",
     "chokidar": "^1.6.0",
     "compression": "^1.5.2",
     "connect-history-api-fallback": "^1.3.0",
     "del": "^3.0.0",
     "express": "^4.13.3",
     "html-entities": "^1.2.0",
     "http-proxy-middleware": "~0.17.4",
+    "internal-ip": "^1.2.0",
     "opn": "4.0.2",
     "portfinder": "^1.0.9",
     "selfsigned": "^1.9.1",
     "serve-index": "^1.7.2",
     "sockjs": "0.3.18",
-    "sockjs-client": "1.1.2",
+    "sockjs-client": "1.1.4",
     "spdy": "^3.4.1",
     "strip-ansi": "^3.0.0",
     "supports-color": "^3.1.1",
-    "webpack-dev-middleware": "^1.10.2",
+    "webpack-dev-middleware": "^1.11.0",
     "yargs": "^6.0.0"
   },
   "devDependencies": {
@@ -36,6 +38,7 @@
     "jquery": "^2.2.0",
     "less": "^2.5.1",
     "less-loader": "~2.2.0",
+    "loglevel": "^1.4.1",
     "mocha": "^3.0.2",
     "mocha-sinon": "^1.1.6",
     "pug": "^2.0.0-beta5",
@@ -45,7 +48,7 @@
     "style-loader": "~0.13.0",
     "supertest": "^2.0.1",
     "url-loader": "~0.5.6",
-    "webpack": "^2.2.0",
+    "webpack": "^3.0.0",
     "ws": "^1.1.1"
   },
   "license": "MIT",

test/Validation.test.js

@@ -48,9 +48,9 @@ describe("Validation", function() {
 		config: { asdf: true },
 		message: [
 			" - configuration has an unknown property 'asdf'. These properties are valid:",
-			"   object { hot?, hotOnly?, lazy?, host?, allowedHosts?, filename?, publicPath?, port?, socket?, " +
+			"   object { hot?, hotOnly?, lazy?, bonjour?, host?, allowedHosts?, filename?, publicPath?, port?, socket?, " +
 			"watchOptions?, headers?, clientLogLevel?, overlay?, key?, cert?, ca?, pfx?, pfxPassphrase?, " +
-			"inline?, disableHostCheck?, public?, https?, contentBase?, watchContentBase?, open?, openPage?, features?, " +
+			"inline?, disableHostCheck?, public?, https?, contentBase?, watchContentBase?, open?, useLocalIp?, openPage?, features?, " +
 			"compress?, proxy?, historyApiFallback?, staticOptions?, setup?, stats?, reporter?, " +
 			"noInfo?, quiet?, serverSideRender?, index?, log?, warn? }"
 		]