Add more examples, part deux

Ref #581
webpack · Sep 3, 2016 · 3bfc026 · 3bfc026
1 parent 3ddf55d
commit 3bfc026
Show file tree

Hide file tree

Showing 22 changed files with 180 additions and 6 deletions.
diff --git a/examples/README.md b/examples/README.md
@@ -1,6 +1,6 @@
 # Examples
 
-Each example showcases a feature. You can use this to learn how to use that feature, but also when making a Pull Request.
+Each example showcases a feature. You can use this to learn how to use that feature, but also use it to test if something still works when making a Pull Request.
 
 An example should be as minimal as possible, and consists of:
 

diff --git a/examples/cli-public/README.md b/examples/cli-public/README.md
@@ -1,4 +1,4 @@
-# https
+# CLI - public
 
 NOTE: replace `<insert local ip>` with your local ip.
 

diff --git a/examples/cli-public/index.html b/examples/cli-public/index.html
@@ -4,6 +4,6 @@
 		<script src="bundle.js" type="text/javascript" charset="utf-8"></script>
 	</head>
 	<body>
-		<h1>Example: CLI public</h1>
+		<h1>Example: CLI - public</h1>
 	</body>
 </html>
diff --git a/examples/cli-stdin/README.md b/examples/cli-stdin/README.md
@@ -1,4 +1,4 @@
-# https
+# CLI - stdin
 
 ```shell
 node ../../bin/webpack-dev-server.js --stdin

diff --git a/examples/hmr/README.md b/examples/hmr/README.md
@@ -0,0 +1,27 @@
+# Hot Module Reloading
+
+```shell
+node ../../bin/webpack-dev-server.js --open --hot
+```
+
+With Hot Module Reloading we want to apply updates to the page without fully refreshing it.
+
+## What should happen
+
+The script should open `http://localhost:8080/`. In the app you should see "Does it work?"
+
+In your editor, go to `example.js`, and change "Does it work?" to "It works!"
+
+Open the devtools for the app, and you should see:
+
+```
+[WDS] App updated. Recompiling...
+[WDS] App hot update...
+[HMR] Checking for updates on the server...
+[HMR] Updated modules:
+[HMR]  - ./example.js
+[HMR]  - ./hmr.js
+[HMR] App is up to date.
+```
+
+Also verify that the text actually in the app actually changed to "It works!"
diff --git a/examples/hmr/app.js b/examples/hmr/app.js
@@ -0,0 +1 @@
+require("./hmr");
diff --git a/examples/hmr/example.js b/examples/hmr/example.js
@@ -0,0 +1,3 @@
+var myText = document.getElementById("mytext");
+
+myText.textContent = "Does it work? yes";
diff --git a/examples/hmr/hmr.js b/examples/hmr/hmr.js
@@ -0,0 +1,9 @@
+require("./example");
+
+if (module.hot) {
+	module.hot.accept(function(err) {
+		if (err) {
+			console.error("Cannot apply hot update", err);
+		}
+	});
+}
diff --git a/examples/hmr/index.html b/examples/hmr/index.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+	<body>
+		<h1>Example: Hot Module Reloading</h1>
+		<div id="mytext"></div>
+		<script src="bundle.js" type="text/javascript" charset="utf-8"></script>
+	</body>
+</html>
diff --git a/examples/hmr/webpack.config.js b/examples/hmr/webpack.config.js
@@ -0,0 +1,9 @@
+var webpack = require("webpack");
+
+module.exports = {
+	context: __dirname,
+	entry: "./app.js",
+	plugins: [
+		new webpack.NamedModulesPlugin(),
+	]
+}
diff --git a/examples/host-port/README.md b/examples/host-port/README.md
@@ -1,4 +1,4 @@
-# https
+# host and port
 
 ```shell
 node ../../bin/webpack-dev-server.js --open --port 5000 --host 0.0.0.0

diff --git a/examples/node-api-middleware/README.md b/examples/node-api-middleware/README.md
@@ -0,0 +1,18 @@
+# Node.js API - Middleware
+
+```shell
+node server.js
+```
+
+Starts a webpack-dev-server setup via the Node API. Open `http://localhost:8080/` to go the app.
+
+## What should happen
+
+In the app you should see "It's working."
+
+In the CLI, you should see this for each refresh in the browser:
+
+```
+Using middleware for /
+Using middleware for /bundle.js
+```
diff --git a/examples/node-api-middleware/app.js b/examples/node-api-middleware/app.js
@@ -0,0 +1,7 @@
+document.write("It's working.");
+
+// This results in a warning:
+if(!window) require("./" + window + "parseable.js");
+
+// This results in an error:
+// if(!window) require("test");
diff --git a/examples/node-api-middleware/index.html b/examples/node-api-middleware/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: Node.js API - Middleware</h1>
+	</body>
+</html>
diff --git a/examples/node-api-middleware/server.js b/examples/node-api-middleware/server.js
@@ -0,0 +1,20 @@
+var Webpack = require('webpack');
+var WebpackDevServer = require("../../lib/Server");
+var webpackConfig = require("./webpack.config");
+
+var compiler = Webpack(webpackConfig);
+var server = new WebpackDevServer(compiler, {
+	stats: {
+		colors: true
+	},
+	setup: function(app) {
+		app.use(function(req, res, next) {
+			console.log("Using middleware for " + req.url);
+			next();
+		});
+	}
+});
+
+server.listen(8080, "127.0.0.1", function() {
+	console.log("Starting server on http://localhost:8080");
+});
diff --git a/examples/node-api-middleware/webpack.config.js b/examples/node-api-middleware/webpack.config.js
@@ -0,0 +1,9 @@
+var path = require('path');
+
+module.exports = {
+	context: __dirname,
+	entry: ["./app.js", "../../client/index.js?http://localhost:8080/"],
+	output: {
+		filename: "bundle.js"
+	}
+}
diff --git a/examples/node-api-simple/README.md b/examples/node-api-simple/README.md
@@ -0,0 +1,15 @@
+# Node.js API - Simple
+
+```shell
+node server.js
+```
+
+Starts a simple webpack-dev-server setup via the Node API. Open `http://localhost:8080/` to go the app.
+
+## What should happen
+
+In the app you should see "It's working."
+
+In `app.js`, uncomment the code that results in an error and save. This error should be visible in the CLI and devtools.
+
+Then, in `app.js`, uncomment the code that results in a warning. This warning should be visible in the CLI and devtools.
diff --git a/examples/node-api-simple/app.js b/examples/node-api-simple/app.js
@@ -0,0 +1,7 @@
+document.write("It's working.");
+
+// This results in a warning:
+if(!window) require("./" + window + "parseable.js");
+
+// This results in an error:
+// if(!window) require("test");
diff --git a/examples/node-api-simple/index.html b/examples/node-api-simple/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: Node.js API - Simple</h1>
+	</body>
+</html>
diff --git a/examples/node-api-simple/server.js b/examples/node-api-simple/server.js
@@ -0,0 +1,14 @@
+var Webpack = require('webpack');
+var WebpackDevServer = require("../../lib/Server");
+var webpackConfig = require("./webpack.config");
+
+var compiler = Webpack(webpackConfig);
+var server = new WebpackDevServer(compiler, {
+	stats: {
+		colors: true
+	}
+});
+
+server.listen(8080, "127.0.0.1", function() {
+	console.log("Starting server on http://localhost:8080");
+});
diff --git a/examples/node-api-simple/webpack.config.js b/examples/node-api-simple/webpack.config.js
@@ -0,0 +1,9 @@
+var path = require('path');
+
+module.exports = {
+	context: __dirname,
+	entry: ["./app.js", "../../client/index.js?http://localhost:8080/"],
+	output: {
+		filename: "bundle.js"
+	}
+}
diff --git a/examples/proxy-advanced/README.md b/examples/proxy-advanced/README.md
@@ -1,4 +1,4 @@
-# Proxy: simple
+# Proxy: advanced
 
 ```shell
 node ../../bin/webpack-dev-server.js --open
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		var myText = document.getElementById("mytext");

		myText.textContent = "Does it work? yes";