support inlined dev-server

fixes webpack#13, fixes webpack#11

.gitignore

@@ -1,2 +1,3 @@
 node_modules
-/client/live.bundle.js
+/client/live.bundle.js
+/client/index.bundle.js

README.md

@@ -4,58 +4,20 @@
 
 **DO NOT USE IT IN PRODUCTION!**
 
-## What is it?
+It's a live reloading server for [webpack](http://webpack.github.io).
 
-It's a little server using [webpack-dev-middleware](/webpack/webpack-dev-middleware) to serve a webpack app.
-
-It also uses socket.io to update the browser if the bundle has changed (and to display compilation errors).
-
-You need to pass webpack's options, and you can also pass a html page to display and webpack options.
+# [Documentation](http://webpack.github.io/docs/webpack-dev-server.html)
 
 ## Inspiration
 
 This project is heavily inspirated by [peerigon/nof5](/peerigon/nof5).
 
-## Usage (command line)
-
-Like webpack, but you omit the output filename.
-
-Additional options:
-
-`--port <number>` Change the port (default: 8080)
-
-`--content-base` Serve HTML content from this directory or URL (default: current directory)
-
-`--noinfo` Less console output
-
-`--quiet` No console output
-
-## Usage (javascript)
-
-``` javascript
-var Server = require("webpack-dev-server");
-var options = {
-	contentBase: __dirname + "/directory",
-	// A directory, file or URL
-	// It will be served as content
-
-	hot: true,
-	// Enable special support for Hot Module Replacement
-	// Page is no longer updated, but a "webpackHotUpdate" message is send to the content
-
-	// ...
-	// webpack-dev-middleware options
-	// you can use all options of the middleware
-};
-new Server(webpack(/*... webpack options ...*/), options).listen(port[, host]);
-```
-
 ## Contributing
 
 The client scripts are build with `npm run-script prepublish`.
 
 ## Lisence
 
-Copyright 2012-2013 Tobias Koppers
+Copyright 2012-2014 Tobias Koppers
 
 [MIT](http://www.opensource.org/licenses/mit-license.php)

client/index.js

@@ -0,0 +1,52 @@
+var io = require("socket.io");
+var scriptElements = document.getElementsByTagName("script");
+io = io.connect(typeof __resourceQuery === "string" ?
+	__resourceQuery :
+	scriptElements[scriptElements.length-1].getAttribute("src").replace(/\/[^\/]+$/, "")
+);
+
+var hot = false;
+var initial = true;
+
+io.on("hot", function() {
+	console.log("webpack-dev-server: Hot Module Replacement enabled.");
+});
+
+io.on("invalid", function() {
+	console.log("webpack-dev-server: App updated. Recompiling...");
+});
+
+io.on("ok", function() {
+	if(initial) return initial = false;
+	reloadApp();
+});
+
+io.on("warnings", function(warnings) {
+	console.log("webpack-dev-server: Warnings while compiling.");
+	for(var i = 0; i < warnings.length; i++)
+		console.warn(warnings[i]);
+	if(initial) return initial = false;
+	reloadApp();
+});
+
+io.on("errors", function(errors) {
+	console.log("webpack-dev-server: Errors while compiling.");
+	for(var i = 0; i < errors.length; i++)
+		console.error(errors[i]);
+	if(initial) return initial = false;
+	reloadApp();
+});
+
+io.on("disconnect", function() {
+	console.error("webpack-dev-server: Disconnected!");
+});
+
+function reloadApp() {
+	if(hot) {
+		console.log("webpack-dev-server: App hot update...");
+		window.postMessage("webpackHotUpdate", "*");
+	} else {
+		console.log("webpack-dev-server: App updated. Reloading...");
+		window.location.reload();
+	}
+}

example/README.md

@@ -27,6 +27,29 @@ http://localhost:8080/webpack-dev-server/index.html
 
 The app should be minimized and the image is included with a Data Url.
 
+## Inlined mode
+
+``` text
+webpack-dev-server --colors --config inlined.config.js
+http://localhost:8080/index.html
+```
+
+The app without a webpack-dev-server frame. Console displays status messages.
+
+The webpack-dev-server client is added to the entry point.
+
+
+``` text
+webpack-dev-server --colors
+http://localhost:8080/inlined.html
+```
+
+The app without a webpack-dev-server frame. Console displays status messages.
+
+The webpack-dev-server client is added as script tag to the html page.
+
+
+
 
 ## Reloading
 

example/app.js

@@ -3,7 +3,7 @@ require("./style.less");
 document.write("It's working.");
 
 // This results in a warning:
-// var r = require;
+// if(!window) require.abc();
 
 // This results in an error:
-// require("test");
+// if(!window) require("test");

example/index.html

@@ -4,6 +4,7 @@
 		<script src="bundle.js" type="text/javascript" charset="utf-8"></script>
 	</head>
 	<body>
-        <img src="svg.svg" style="width: 200px;">
+		<br>
+		<img src="svg.svg" style="width: 200px;">
 	</body>
 </html>

example/inlined.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+	context: __dirname,
+	entry: ["../client?http://localhost:8080", "./app.js"],
+	module: {
+		loaders: [
+			{ test: /\.less$/, loader: "style!css!less" },
+			{ test: /\.png$/, loader: "file" }
+		]
+	}
+}

example/inlined.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<script src="/webpack-dev-server.js" type="text/javascript" charset="utf-8"></script>
+		<script src="bundle.js" type="text/javascript" charset="utf-8"></script>
+	</head>
+	<body>
+		<br>
+		<img src="svg.svg" style="width: 200px;">
+	</body>
+</html>

lib/Server.js

@@ -33,6 +33,10 @@ function Server(compiler, options) {
 	var liveJs = new StreamCache();
 	fs.createReadStream(path.join(__dirname, "..", "client", "live.bundle.js")).pipe(liveJs);
 
+	// Prepare the inlined js file
+	var inlinedJs = new StreamCache();
+	fs.createReadStream(path.join(__dirname, "..", "client", "index.bundle.js")).pipe(inlinedJs);
+
 	// Init express server
 	var app = this.app = new express();
 
@@ -45,6 +49,10 @@ function Server(compiler, options) {
 		liveJs.pipe(res);
 	});
 
+	app.get("/webpack-dev-server.js", function(req, res) {
+		inlinedJs.pipe(res);
+	});
+
 	app.get("/webpack-dev-server/*", function(req, res) {
 		this.livePage.pipe(res);
 	}.bind(this));

package.json

@@ -33,6 +33,6 @@
 	"main": "lib/Server.js",
 	"bin": "bin/webpack-dev-server.js",
 	"scripts": {
-		"prepublish": "webpack ./client/live.js client/live.bundle.js --colors --config client/webpack.config.js -p"
+		"prepublish": "webpack ./client/live.js client/live.bundle.js --colors --config client/webpack.config.js -p && webpack ./client/index.js client/index.bundle.js --colors --config client/webpack.config.js -p"
 	}
 }