Improve CLI output for errors.

Author: SpaceK33z

bin/webpack-dev-server.js

@@ -22,13 +22,20 @@ function versionInfo() {
 		"webpack " + require("webpack/package.json").version;
 }
 
-function colorize(useColor, msg) {
+function colorInfo(useColor, msg) {
 	if(useColor)
 		// Make text blue and bold, so it *pops*
 		return "\u001b[1m\u001b[34m" + msg + "\u001b[39m\u001b[22m";
 	return msg;
 }
 
+function colorError(useColor, msg) {
+	if(useColor)
+		// Make text red and bold, so it *pops*
+		return "\u001b[1m\u001b[31m" + msg + "\u001b[39m\u001b[22m";
+	return msg;
+}
+
 var yargs = require("yargs")
 	.usage(versionInfo() +
 		"\nUsage: http://webpack.github.io/docs/webpack-dev-server.html");
@@ -320,15 +327,13 @@ function processOptions(wpOpt) {
 	}
 
 	var compiler;
+	// TODO: This is only temporarily, we'll probably make our own ValidationError for WDS errors.
+	var WebpackOptionsValidationError = require("webpack/lib/WebpackOptionsValidationError");
 	try {
 		compiler = webpack(wpOpt);
 	} catch(e) {
-		var WebpackOptionsValidationError = require("webpack/lib/WebpackOptionsValidationError");
 		if(e instanceof WebpackOptionsValidationError) {
-			if(options.stats.colors)
-				console.error("\u001b[1m\u001b[31m" + e.message + "\u001b[39m\u001b[22m");
-			else
-				console.error(e.message);
+			console.error(colorError(options.stats.colors, e.message));
 			process.exit(1); // eslint-disable-line
 		}
 		throw e;
@@ -342,7 +347,16 @@ function processOptions(wpOpt) {
 
 	var uri = domain + (options.inline !== false ? "/" : "/webpack-dev-server/");
 
-	var server = new Server(compiler, options);
+	var server;
+	try {
+		server = new Server(compiler, options);
+	} catch(e) {
+		if(e instanceof WebpackOptionsValidationError) {
+			console.error(colorError(options.stats.colors, e.message));
+			process.exit(1); // eslint-disable-line
+		}
+		throw e;
+	}
 
 	if(options.socket) {
 		server.listeningApp.on("error", function(e) {
@@ -380,18 +394,18 @@ function processOptions(wpOpt) {
 
 function reportReadiness(uri, options) {
 	var useColor = options.stats.colors;
-	var startSentence = "Project is running at " + colorize(useColor, uri)
+	var startSentence = "Project is running at " + colorInfo(useColor, uri)
 	if(options.socket) {
-		startSentence = "Listening to socket at " + colorize(useColor, options.socket);
+		startSentence = "Listening to socket at " + colorInfo(useColor, options.socket);
 	}
 	console.log((argv["progress"] ? "\n" : "") + startSentence);
 
-	console.log("webpack output is served from " + colorize(useColor, options.publicPath));
+	console.log("webpack output is served from " + colorInfo(useColor, options.publicPath));
 	var contentBase = Array.isArray(options.contentBase) ? options.contentBase.join(", ") : options.contentBase;
 	if(contentBase)
-		console.log("Content not from webpack is served from " + colorize(useColor, contentBase));
+		console.log("Content not from webpack is served from " + colorInfo(useColor, contentBase));
 	if(options.historyApiFallback)
-		console.log("404s will fallback to " + colorize(useColor, options.historyApiFallback.index || "/index.html"));
+		console.log("404s will fallback to " + colorInfo(useColor, options.historyApiFallback.index || "/index.html"));
 	if(options.open)
 		open(uri);
 }