Refactor to ES6

Author: SpaceK33z

.eslintrc

@@ -22,8 +22,7 @@
 		"no-process-exit": "warn",
 		"space-in-parens": "error",
 		"no-trailing-spaces": "error",
-		"no-use-before-define": "off",
-		"no-unused-vars": "off",
+		"no-unused-vars": "error",
 		"key-spacing": "error",
 		"space-infix-ops": "error",
 		"no-unsafe-negation": "error",
@@ -44,6 +43,8 @@
 			}
 		}],
 		"no-console": "off",
-		"valid-jsdoc": "error"
+		"valid-jsdoc": "error",
+		"no-useless-computed-key": "error",
+		"prefer-const": "error"
 	}
 }

bin/webpack-dev-server.js

@@ -1,63 +1,64 @@
 #!/usr/bin/env node
+"use strict";
 
-var path = require("path");
-var open = require("opn");
-var fs = require("fs");
-var net = require("net");
-var url = require("url");
-var portfinder = require("portfinder");
+const path = require("path");
+const open = require("opn");
+const fs = require("fs");
+const net = require("net");
+const url = require("url");
+const portfinder = require("portfinder");
 
 // Local version replaces global one
 try {
-	var localWebpackDevServer = require.resolve(path.join(process.cwd(), "node_modules", "webpack-dev-server", "bin", "webpack-dev-server.js"));
+	const localWebpackDevServer = require.resolve(path.join(process.cwd(), "node_modules", "webpack-dev-server", "bin", "webpack-dev-server.js"));
 	if(__filename !== localWebpackDevServer) {
 		return require(localWebpackDevServer);
 	}
 } catch(e) {}
 
-var Server = require("../lib/Server");
-var webpack = require("webpack");
+const Server = require("../lib/Server");
+const webpack = require("webpack");
 
 function versionInfo() {
-	return "webpack-dev-server " + require("../package.json").version + "\n" +
-		"webpack " + require("webpack/package.json").version;
+	return `webpack-dev-server ${require("../package.json").version}\n` +
+		`webpack ${require("webpack/package.json").version}`;
 }
 
 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 `\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 `\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");
+const yargs = require("yargs")
+	.usage(`${versionInfo()
+		}\nUsage: http://webpack.github.io/docs/webpack-dev-server.html`);
 
 require("webpack/bin/config-yargs")(yargs);
 
 // It is important that this is done after the webpack yargs config,
 // so it overrides webpack's version info.
 yargs.version(versionInfo);
 
-var ADVANCED_GROUP = "Advanced options:";
-var DISPLAY_GROUP = "Stats options:";
-var SSL_GROUP = "SSL options:";
-var CONNECTION_GROUP = "Connection options:";
-var RESPONSE_GROUP = "Response options:";
-var BASIC_GROUP = "Basic options:";
+const ADVANCED_GROUP = "Advanced options:";
+const DISPLAY_GROUP = "Stats options:";
+const SSL_GROUP = "SSL options:";
+const CONNECTION_GROUP = "Connection options:";
+const RESPONSE_GROUP = "Response options:";
+const BASIC_GROUP = "Basic options:";
 
 // Taken out of yargs because we must know if
 // it wasn't given by the user, in which case
 // we should use portfinder.
-var DEFAULT_PORT = 8080;
+const DEFAULT_PORT = 8080;
 
 yargs.options({
 	"lazy": {
@@ -185,9 +186,9 @@ yargs.options({
 	}
 });
 
-var argv = yargs.argv;
+const argv = yargs.argv;
 
-var wpOpt = require("webpack/bin/convert-argv")(yargs, argv, {
+const wpOpt = require("webpack/bin/convert-argv")(yargs, argv, {
 	outputFilename: "/bundle.js"
 });
 
@@ -201,9 +202,9 @@ function processOptions(wpOpt) {
 		return;
 	}
 
-	var firstWpOpt = Array.isArray(wpOpt) ? wpOpt[0] : wpOpt;
+	const firstWpOpt = Array.isArray(wpOpt) ? wpOpt[0] : wpOpt;
 
-	var options = wpOpt.devServer || firstWpOpt.devServer || {};
+	const options = wpOpt.devServer || firstWpOpt.devServer || {};
 
 	if(argv.host !== "localhost" || !options.host)
 		options.host = argv.host;
@@ -217,7 +218,7 @@ function processOptions(wpOpt) {
 	if(!options.publicPath) {
 		options.publicPath = firstWpOpt.output && firstWpOpt.output.publicPath || "";
 		if(!/^(https?:)?\/\//.test(options.publicPath) && options.publicPath[0] !== "/")
-			options.publicPath = "/" + options.publicPath;
+			options.publicPath = `/${options.publicPath}`;
 	}
 
 	if(!options.filename)
@@ -326,17 +327,17 @@ function processOptions(wpOpt) {
 }
 
 function startDevServer(wpOpt, options) {
-	var protocol = options.https ? "https" : "http";
+	const protocol = options.https ? "https" : "http";
 
 	// the formatted domain (url without path) of the webpack server
-	var domain = url.format({
+	const domain = url.format({
 		protocol: protocol,
 		hostname: options.host,
 		port: options.socket ? 0 : options.port.toString()
 	});
 
 	if(options.inline !== false) {
-		var devClient = [require.resolve("../client/") + "?" + (options.public ? protocol + "://" + options.public : domain)];
+		const devClient = [`${require.resolve("../client/")}?${options.public ? `${protocol}://${options.public}` : domain}`];
 
 		if(options.hotOnly)
 			devClient.push("webpack/hot/only-dev-server");
@@ -354,7 +355,7 @@ function startDevServer(wpOpt, options) {
 		});
 	}
 
-	var compiler;
+	let compiler;
 	try {
 		compiler = webpack(wpOpt);
 	} catch(e) {
@@ -371,13 +372,13 @@ function startDevServer(wpOpt, options) {
 		}));
 	}
 
-	var uri = domain + (options.inline !== false || options.lazy === true ? "/" : "/webpack-dev-server/");
+	const uri = domain + (options.inline !== false || options.lazy === true ? "/" : "/webpack-dev-server/");
 
-	var server;
+	let server;
 	try {
 		server = new Server(compiler, options);
 	} catch(e) {
-		var OptionsValidationError = require("../lib/OptionsValidationError");
+		const OptionsValidationError = require("../lib/OptionsValidationError");
 		if(e instanceof OptionsValidationError) {
 			console.error(colorError(options.stats.colors, e.message));
 			process.exit(1); // eslint-disable-line
@@ -388,7 +389,7 @@ function startDevServer(wpOpt, options) {
 	if(options.socket) {
 		server.listeningApp.on("error", function(e) {
 			if(e.code === "EADDRINUSE") {
-				var clientSocket = new net.Socket();
+				const clientSocket = new net.Socket();
 				clientSocket.on("error", function(e) {
 					if(e.code === "ECONNREFUSED") {
 						// No other server listening on this socket so it can be safely removed
@@ -405,7 +406,7 @@ function startDevServer(wpOpt, options) {
 		});
 		server.listen(options.socket, options.host, function(err) {
 			if(err) throw err;
-			var READ_WRITE = 438; // chmod 666 (rw rw rw)
+			const READ_WRITE = 438; // chmod 666 (rw rw rw)
 			fs.chmod(options.socket, READ_WRITE, function(err) {
 				if(err) throw err;
 				reportReadiness(uri, options);
@@ -420,19 +421,19 @@ function startDevServer(wpOpt, options) {
 }
 
 function reportReadiness(uri, options) {
-	var useColor = argv.color;
-	var startSentence = "Project is running at " + colorInfo(useColor, uri)
+	const useColor = argv.color;
+	let startSentence = `Project is running at ${colorInfo(useColor, uri)}`
 	if(options.socket) {
-		startSentence = "Listening to socket at " + colorInfo(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 " + colorInfo(useColor, options.publicPath));
-	var contentBase = Array.isArray(options.contentBase) ? options.contentBase.join(", ") : options.contentBase;
+	console.log(`webpack output is served from ${colorInfo(useColor, options.publicPath)}`);
+	const contentBase = Array.isArray(options.contentBase) ? options.contentBase.join(", ") : options.contentBase;
 	if(contentBase)
-		console.log("Content not from webpack is served from " + colorInfo(useColor, contentBase));
+		console.log(`Content not from webpack is served from ${colorInfo(useColor, contentBase)}`);
 	if(options.historyApiFallback)
-		console.log("404s will fallback to " + colorInfo(useColor, options.historyApiFallback.index || "/index.html"));
+		console.log(`404s will fallback to ${colorInfo(useColor, options.historyApiFallback.index || "/index.html")}`);
 	if(options.open)
 		open(uri);
 }

examples/hmr/webpack.config.js

@@ -1,4 +1,6 @@
-var webpack = require("webpack");
+"use strict";
+
+const webpack = require("webpack");
 
 module.exports = {
 	context: __dirname,

examples/listen-socket/check-socket.js

@@ -1,8 +1,8 @@
 "use strict";
 
-var net = require("net");
+const net = require("net");
 
-var client = net.createConnection("./webpack.sock");
+const client = net.createConnection("./webpack.sock");
 client.on("connect", function() {
 	console.log("Successfully connected to socket, exiting");
 	process.exit(1); // eslint-disable-line

examples/node-api-middleware/server.js

@@ -1,15 +1,17 @@
-var Webpack = require("webpack");
-var WebpackDevServer = require("../../lib/Server");
-var webpackConfig = require("./webpack.config");
+"use strict";
 
-var compiler = Webpack(webpackConfig);
-var server = new WebpackDevServer(compiler, {
+const Webpack = require("webpack");
+const WebpackDevServer = require("../../lib/Server");
+const webpackConfig = require("./webpack.config");
+
+const compiler = Webpack(webpackConfig);
+const server = new WebpackDevServer(compiler, {
 	stats: {
 		colors: true
 	},
 	setup: function(app) {
 		app.use(function(req, res, next) {
-			console.log("Using middleware for " + req.url);
+			console.log(`Using middleware for ${req.url}`);
 			next();
 		});
 	}

examples/node-api-simple/server.js

@@ -1,9 +1,11 @@
-var Webpack = require("webpack");
-var WebpackDevServer = require("../../lib/Server");
-var webpackConfig = require("./webpack.config");
+"use strict";
 
-var compiler = Webpack(webpackConfig);
-var server = new WebpackDevServer(compiler, {
+const Webpack = require("webpack");
+const WebpackDevServer = require("../../lib/Server");
+const webpackConfig = require("./webpack.config");
+
+const compiler = Webpack(webpackConfig);
+const server = new WebpackDevServer(compiler, {
 	stats: {
 		colors: true
 	}

examples/proxy-hot-reload/webpack.config.js

@@ -1,7 +1,9 @@
-var fs = require("fs");
+"use strict";
 
-var proxyConfig = require("./proxy-config");
-var proxyOptions = {
+const fs = require("fs");
+
+const proxyConfig = require("./proxy-config");
+let proxyOptions = {
 	context: "/api",
 	target: proxyConfig.target,
 	pathRewrite: proxyConfig.pathRewrite,
@@ -11,7 +13,7 @@ var proxyOptions = {
 fs.watch("./proxy-config.js", function() {
 	delete require.cache[require.resolve("./proxy-config")];
 	try {
-		var newProxyConfig = require("./proxy-config");
+		const newProxyConfig = require("./proxy-config");
 		if(proxyOptions.target !== newProxyConfig.target) {
 			console.log("Proxy target changed:", newProxyConfig.target);
 			proxyOptions = {

examples/webpack-config-array/webpack.config.js

@@ -1,4 +1,6 @@
-var webpack = require("webpack");
+"use strict";
+
+const webpack = require("webpack");
 module.exports = [
 	{
 		context: __dirname,