Add watch-content-base option (#649)

charlespwd · SpaceK33z · commit b1abc23d9f41 · 2016-10-11T20:33:16.000+02:00
Fixes #350
diff --git a/bin/webpack-dev-server.js b/bin/webpack-dev-server.js
@@ -110,6 +110,11 @@ yargs.options({
 		describe: "A directory or URL to serve HTML content from.",
 		group: RESPONSE_GROUP
 	},
+	"watch-content-base": {
+		type: "boolean",
+		describe: "Enable live-reloading of the content-base.",
+		group: RESPONSE_GROUP
+	},
 	"history-api-fallback": {
 		type: "boolean",
 		describe: "Fallback to /index.html for Single Page Applications.",
@@ -213,6 +218,9 @@ function processOptions(wpOpt) {
 		}
 	}
 
+	if(argv["watch-content-base"])
+		options.watchContentBase = true;
+
 	if(!options.stats) {
 		options.stats = {
 			cached: false,
diff --git a/client/index.js b/client/index.js
@@ -63,6 +63,10 @@ var onSocketMsg = {
 		if(initial) return initial = false;
 		reloadApp();
 	},
+	"content-changed": function() {
+		log("info", "[WDS] Content base changed. Reloading...")
+		self.location.reload();
+	},
 	warnings: function(warnings) {
 		log("info", "[WDS] Warnings while compiling.");
 		for(var i = 0; i < warnings.length; i++)
diff --git a/examples/watch-content-base/README.md b/examples/watch-content-base/README.md
@@ -0,0 +1,41 @@
+# Watch Content Base
+
+## Watching a single directory
+
+```shell
+node ../../bin/webpack-dev-server.js --content-base assets --watch-content-base
+```
+
+### What should happen
+
+The script should open `http://localhost:8080/`. In the app you should see "Does it work?"
+
+In your editor, edit `assets/index.html`, and save your changes. The app should reload.
+
+
+## Watching an array of directories
+
+```javascript
+// webpack.conf.js
+module.exports = {
+	/* ... */
+	devServer: {
+		contentBase: [
+			"assets",
+			"css",
+		]
+	}
+}
+```
+
+```shell
+node ../../bin/webpack-dev-server.js --watch-content-base
+```
+
+### What should happen
+
+The script should open `http://localhost:8080/`. In the app you should see "Does it work?"
+
+In your editor, edit `assets/index.html`, and save your changes. The app should reload.
+
+In your editor, edit `css/styles.csss`, and save your changes. The app should reload.
diff --git a/examples/watch-content-base/app.js b/examples/watch-content-base/app.js
@@ -0,0 +1,2 @@
+var myText = document.getElementById("mytext");
+myText.textContent = "Does it work? yes";
diff --git a/examples/watch-content-base/assets/index.html b/examples/watch-content-base/assets/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<link rel="stylesheet" href="styles.css" type="text/css" charset="utf-8">
+	</head>
+	<body>
+		<h1>Watch content base</h1>
+		<div id="mytext"></div>
+		<script src="bundle.js" type="text/javascript" charset="utf-8"></script>
+	</body>
+</html>
diff --git a/examples/watch-content-base/css/styles.css b/examples/watch-content-base/css/styles.css
@@ -0,0 +1,3 @@
+h1 {
+	color: blue;
+}
diff --git a/examples/watch-content-base/webpack.config.js b/examples/watch-content-base/webpack.config.js
@@ -0,0 +1,10 @@
+module.exports = {
+	context: __dirname,
+	entry: "./app.js",
+	devServer: {
+		contentBase: [
+			"assets",
+			"css",
+		]
+	}
+}
diff --git a/lib/Server.js b/lib/Server.js
@@ -1,4 +1,5 @@
 var fs = require("fs");
+var chokidar = require("chokidar");
 var path = require("path");
 var webpackDevMiddleware = require("webpack-dev-middleware");
 var express = require("express");
@@ -22,6 +23,7 @@ function Server(compiler, options) {
 	this.headers = options.headers;
 	this.clientLogLevel = options.clientLogLevel;
 	this.sockets = [];
+	this.contentBaseWatchers = [];
 
 	// Listening for events
 	var invalidPlugin = function() {
@@ -269,6 +271,18 @@ function Server(compiler, options) {
 			}
 		},
 
+		watchContentBase: function() {
+			if(/^(https?:)?\/\//.test(contentBase) || typeof contentBase === "number") {
+				throw new Error("Watching remote files is not supported.");
+			} else if(Array.isArray(contentBase)) {
+				contentBase.forEach(function(item) {
+					this._watch(item);
+				}.bind(this));
+			} else {
+				this._watch(contentBase);
+			}
+		}.bind(this),
+
 		middleware: function() {
 			// include our middleware to ensure it is able to handle '/index.html' request after redirect
 			app.use(this.middleware);
@@ -293,6 +307,8 @@ function Server(compiler, options) {
 		defaultFeatures.push("proxy", "middleware");
 	if(contentBase !== false)
 		defaultFeatures.push("contentBaseFiles");
+	if(options.watchContentBase)
+		defaultFeatures.push("watchContentBase");
 	if(options.historyApiFallback)
 		defaultFeatures.push("historyApiFallback", "middleware");
 	defaultFeatures.push("magicHtml");
@@ -396,6 +412,11 @@ Server.prototype.close = function(callback) {
 	this.listeningApp.close(function() {
 		this.middleware.close(callback);
 	}.bind(this));
+
+	this.contentBaseWatchers.forEach(function(watcher) {
+		watcher.close();
+	});
+	this.contentBaseWatchers = [];
 }
 
 Server.prototype.sockWrite = function(sockets, type, data) {
@@ -445,6 +466,14 @@ Server.prototype._sendStats = function(sockets, stats, force) {
 		this.sockWrite(sockets, "ok");
 }
 
+Server.prototype._watch = function(path) {
+	var watcher = chokidar.watch(path).on("change", function() {
+		this.sockWrite(this.sockets, "content-changed");
+	}.bind(this))
+
+	this.contentBaseWatchers.push(watcher);
+}
+
 Server.prototype.invalidate = function() {
 	if(this.middleware) this.middleware.invalidate();
 }
diff --git a/package.json b/package.json
@@ -7,6 +7,7 @@
     "webpack": "^2.1.0-beta"
   },
   "dependencies": {
+    "chokidar": "^1.6.0",
     "compression": "^1.5.2",
     "connect-history-api-fallback": "^1.3.0",
     "express": "^4.13.3",

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+var myText = document.getElementById("mytext");`
	`2`	`+myText.textContent = "Does it work? yes";`