Start with examples

SpaceK33z · SpaceK33z · commit 6d064d9a88fb · 2016-09-03T10:42:11.000+02:00
Ref #581
diff --git a/.editorconfig b/.editorconfig
@@ -1,5 +1,5 @@
 root = true
 
-[*.js]
+[*.{js,html,less}]
 indent_style=tab
 trim_trailing_whitespace=true
diff --git a/README.md b/README.md
@@ -16,6 +16,8 @@ This project is heavily inspired by [peerigon/nof5](https://github.com/peerigon/
 
 The client scripts are built with `npm run-script prepublish`.
 
+Run the relevant [examples](https://github.com/webpack/webpack-dev-server/tree/master/examples) to see if all functionality still works.
+
 When making a PR, keep these goals in mind:
 
 - The communication library (Sock.js) should not be exposed to the user.
diff --git a/example/README.md b/example/README.md
diff --git a/example/alternative.config.js b/example/alternative.config.js
diff --git a/examples/README.md b/examples/README.md
@@ -0,0 +1,9 @@
+# Examples
+
+Each example showcases a feature. You can use this to learn how to use that feature, but also when making a Pull Request.
+
+An example should be as minimal as possible, and consists of:
+
+- The code that is necessary
+- Instructions on how to run
+- A description of what should happen
diff --git a/examples/https/README.md b/examples/https/README.md
@@ -0,0 +1,11 @@
+# https
+
+```shell
+node ../../bin/webpack-dev-server.js --open --https
+```
+
+A fake certificate is used to enable https.
+
+## What should happen
+
+The script should open `https://localhost:8080/`. Your browser will probably give you a warning about using an invalid certificate. After ignoring this warning, you should see "It's working."
diff --git a/examples/https/app.js b/examples/https/app.js
@@ -0,0 +1 @@
+document.write("It's working.");
diff --git a/examples/https/index.html b/examples/https/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: https</h1>
+	</body>
+</html>
diff --git a/examples/https/webpack.config.js b/examples/https/webpack.config.js
@@ -0,0 +1,4 @@
+module.exports = {
+	context: __dirname,
+	entry: "./app.js",
+}
diff --git a/examples/modus-iframe/README.md b/examples/modus-iframe/README.md
@@ -0,0 +1,15 @@
+# Modus: iframe
+
+```shell
+node ../../bin/webpack-dev-server.js --no-inline --open
+```
+
+The app is started in an iframe. The page contains the client script to connect to webpack-dev-server.
+
+## What should happen
+
+It should open `http://localhost:8080/webpack-dev-server/`. In the bar at the top, the text should say `App ready.`
+
+In `app.js`, uncomment the code that results in an error and save. The bar at the top should display `Errors while compiling. App updated with errors. No reload!` with a stack trace underneath it.
+
+Then, in `app.js`, uncomment the code that results in a warning. The bar at the top should display `Warnings while compiling.`.
diff --git a/examples/modus-iframe/app.js b/examples/modus-iframe/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/modus-iframe/index.html b/examples/modus-iframe/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: iframe</h1>
+	</body>
+</html>
diff --git a/examples/modus-iframe/webpack.config.js b/examples/modus-iframe/webpack.config.js
@@ -0,0 +1,4 @@
+module.exports = {
+	context: __dirname,
+	entry: "./app.js",
+}
diff --git a/examples/modus-inline/README.md b/examples/modus-inline/README.md
@@ -0,0 +1,23 @@
+# Modus: inline
+
+```shell
+node ../../bin/webpack-dev-server.js --open
+```
+
+This opens the app in `inline` modus (which is the default).
+
+```shell
+node ../../bin/webpack-dev-server.js --open --config alternative.config.js
+```
+
+This also opens the app in `inline` modus, but with a custom config.
+
+## What should happen
+
+The script should open `http://localhost:8080/`. It should display "It's working" with a dotted background.
+
+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.
+
+Also try to change something in `style.less`. The browser should refresh, and the change should be visible in the app.
diff --git a/examples/modus-inline/app.js b/examples/modus-inline/app.js
diff --git a/examples/modus-inline/index.html b/examples/modus-inline/index.html
@@ -4,6 +4,7 @@
 		<script src="/bundle.js" type="text/javascript" charset="utf-8"></script>
 	</head>
 	<body>
+		<h1>Example: inline</h1>
 		<br>
 		<img src="/svg.svg" style="width: 200px;">
 	</body>
diff --git a/examples/modus-inline/pixels.png b/examples/modus-inline/pixels.png
diff --git a/examples/modus-inline/style.less b/examples/modus-inline/style.less
diff --git a/examples/modus-inline/svg.svg b/examples/modus-inline/svg.svg
diff --git a/examples/modus-inline/unparseable.js b/examples/modus-inline/unparseable.js
diff --git a/examples/modus-inline/webpack.config.js b/examples/modus-inline/webpack.config.js
diff --git a/examples/modus-lazy/README.md b/examples/modus-lazy/README.md
@@ -0,0 +1,15 @@
+# Modus: lazy
+
+```shell
+node ../../bin/webpack-dev-server.js --open --lazy
+```
+
+With the `lazy` modus, webpack-dev-server does *not* watch the files, automatically recompiles them and refresh the browser. Instead, it only compiles after you manually refresh the page.
+
+## What should happen
+
+The script should open `http://localhost:8080/`. You should see "It's working."
+
+Change something in `app.js` and save. Check that in the CLI, nothing changed. Also check that in the browser, the old content is still displayed.
+
+Now refresh the app. The CLI should now compile. In the app you should now see the new content.
diff --git a/examples/modus-lazy/app.js b/examples/modus-lazy/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/modus-lazy/index.html b/examples/modus-lazy/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: lazy</h1>
+	</body>
+</html>
diff --git a/examples/modus-lazy/webpack.config.js b/examples/modus-lazy/webpack.config.js
@@ -0,0 +1,4 @@
+module.exports = {
+	context: __dirname,
+	entry: "./app.js",
+}
diff --git a/examples/modus-manual-script/README.md b/examples/modus-manual-script/README.md
@@ -0,0 +1,13 @@
+# Modus: manual script
+
+```shell
+node ../../bin/webpack-dev-server.js --open
+```
+
+The webpack-dev-server client is added as script tag to the html page.
+
+## What should happen
+
+Try to update app.js by uncommenting some lines. The browser should reflect your changes.
+
+If there is a compilation error or warning, this should be displayed in the CLI and devtools.
diff --git a/examples/modus-manual-script/app.js b/examples/modus-manual-script/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/modus-manual-script/index.html b/examples/modus-manual-script/index.html
@@ -5,7 +5,6 @@
 		<script src="bundle.js" type="text/javascript" charset="utf-8"></script>
 	</head>
 	<body>
-		<br>
-		<img src="svg.svg" style="width: 200px;">
+		<h1>Example: manual script</h1>
 	</body>
 </html>
diff --git a/examples/modus-manual-script/webpack.config.js b/examples/modus-manual-script/webpack.config.js
@@ -0,0 +1,4 @@
+module.exports = {
+	context: __dirname,
+	entry: "./app.js",
+}
diff --git a/examples/webpack-config-array/README.md b/examples/webpack-config-array/README.md
@@ -0,0 +1,13 @@
+# Webpack config array
+
+```shell
+node ../../bin/webpack-dev-server.js --open
+```
+
+This opens the app with two webpack configs.
+
+## What should happen
+
+The script should open `http://localhost:8080/`. It should display "It's working" with a dotted background.
+
+Browsing to `http://localhost:8080/bundle2.js` should show a minified JS bundle.
diff --git a/examples/webpack-config-array/app.js b/examples/webpack-config-array/app.js
@@ -0,0 +1,9 @@
+require("./style.less");
+
+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/webpack-config-array/index.html b/examples/webpack-config-array/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: webpack config array</h1>
+	</body>
+</html>
diff --git a/examples/webpack-config-array/pixels.png b/examples/webpack-config-array/pixels.png
diff --git a/examples/webpack-config-array/style.less b/examples/webpack-config-array/style.less
@@ -0,0 +1,3 @@
+body {
+	background: url(pixels.png);
+}
diff --git a/examples/webpack-config-array/svg.svg b/examples/webpack-config-array/svg.svg
@@ -0,0 +1,33 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 100 100">
+  <title>SVG Logo</title>
+  <a xlink:href="http://www.w3.org/Graphics/SVG/" target="_parent" xlink:title="W3C SVG Working Group home page">
+    <rect id="background" fill="#FF9900" width="100" height="100" rx="4" ry="4"/>
+    <rect id="top-left" fill="#FFB13B" width="50" height="50" rx="4" ry="4"/>
+    <rect id="bottom-right" x="50" y="50" fill="#DE8500" width="50" height="50" rx="4" ry="4"/>
+    <g id="circles" fill="#FF9900">
+      <circle id="n" cx="50" cy="18.4" r="18.4"/>
+      <circle id="ne" cx="72.4" cy="27.6" r="18.4"/>
+      <circle id="e" cx="81.6" cy="50" r="18.4"/>
+      <circle id="se" cx="72.4" cy="72.4" r="18.4"/>
+      <circle id="s" cx="50" cy="81.6" r="18.4"/>
+      <circle id="sw" cx="27.6" cy="72.4" r="18.4"/>
+      <circle id="w" cx="18.4" cy="50" r="18.4"/>
+      <circle id="nw" cx="27.6" cy="27.6" r="18.4"/>
+    </g>
+    <g id="stars">
+      <path id="black-star" d="M63.086,18.385c0-7.227-5.859-13.086-13.1-13.086c-7.235,0-13.096,5.859-13.096,13.086   c-5.1-5.11-13.395-5.11-18.497,0c-5.119,5.12-5.119,13.408,0,18.524c-7.234,0-13.103,5.859-13.103,13.085   c0,7.23,5.87,13.098,13.103,13.098c-5.119,5.11-5.119,13.395,0,18.515c5.102,5.104,13.397,5.104,18.497,0   c0,7.228,5.86,13.083,13.096,13.083c7.24,0,13.1-5.855,13.1-13.083c5.118,5.104,13.416,5.104,18.513,0   c5.101-5.12,5.101-13.41,0-18.515c7.216,0,13.081-5.869,13.081-13.098c0-7.227-5.865-13.085-13.081-13.085   c5.101-5.119,5.101-13.406,0-18.524C76.502,13.275,68.206,13.275,63.086,18.385z"/>
+      <path id="white-star" fill="#FFFFFF" d="M55.003,23.405v14.488L65.26,27.64c0-1.812,0.691-3.618,2.066-5.005   c2.78-2.771,7.275-2.771,10.024,0c2.771,2.766,2.771,7.255,0,10.027c-1.377,1.375-3.195,2.072-5.015,2.072L62.101,44.982H76.59   c1.29-1.28,3.054-2.076,5.011-2.076c3.9,0,7.078,3.179,7.078,7.087c0,3.906-3.178,7.088-7.078,7.088   c-1.957,0-3.721-0.798-5.011-2.072H62.1l10.229,10.244c1.824,0,3.642,0.694,5.015,2.086c2.774,2.759,2.774,7.25,0,10.01   c-2.75,2.774-7.239,2.774-10.025,0c-1.372-1.372-2.064-3.192-2.064-5.003L55,62.094v14.499c1.271,1.276,2.084,3.054,2.084,5.013   c0,3.906-3.177,7.077-7.098,7.077c-3.919,0-7.094-3.167-7.094-7.077c0-1.959,0.811-3.732,2.081-5.013V62.094L34.738,72.346   c0,1.812-0.705,3.627-2.084,5.003c-2.769,2.772-7.251,2.772-10.024,0c-2.775-2.764-2.775-7.253,0-10.012   c1.377-1.39,3.214-2.086,5.012-2.086l10.257-10.242H23.414c-1.289,1.276-3.072,2.072-5.015,2.072c-3.917,0-7.096-3.18-7.096-7.088   s3.177-7.087,7.096-7.087c1.94,0,3.725,0.796,5.015,2.076h14.488L27.646,34.736c-1.797,0-3.632-0.697-5.012-2.071   c-2.775-2.772-2.775-7.26,0-10.027c2.773-2.771,7.256-2.771,10.027,0c1.375,1.386,2.083,3.195,2.083,5.005l10.235,10.252V23.407   c-1.27-1.287-2.082-3.053-2.082-5.023c0-3.908,3.175-7.079,7.096-7.079c3.919,0,7.097,3.168,7.097,7.079   C57.088,20.356,56.274,22.119,55.003,23.405z"/>
+    </g>
+
+    <g id="svg-textbox">
+      <path id="text-backdrop" fill="black" d="M5.3,50 H94.68 V90 Q94.68,95 89.68,95 H10.3 Q5.3,95 5.3,90 Z"/>
+      <path id="shine" fill="#3F3F3F" d="M14.657,54.211h71.394c2.908,0,5.312,2.385,5.312,5.315v17.91     c-27.584-3.403-54.926-8.125-82.011-7.683V59.526C9.353,56.596,11.743,54.211,14.657,54.211L14.657,54.211z"/>
+      <g id="svg-text">
+         <title>SVG</title>
+         <path id="S" fill="#FFFFFF" stroke="#000000" stroke-width="0.5035" d="M18.312,72.927c-2.103-2.107-3.407-5.028-3.407-8.253   c0-6.445,5.223-11.672,11.666-11.672c6.446,0,11.667,5.225,11.667,11.672h-6.832c0-2.674-2.168-4.837-4.835-4.837   c-2.663,0-4.838,2.163-4.838,4.837c0,1.338,0.549,2.536,1.415,3.42l0,0c0.883,0.874,2.101,1.405,3.423,1.405v0.012   c3.232,0,6.145,1.309,8.243,3.416l0,0c2.118,2.111,3.424,5.034,3.424,8.248c0,6.454-5.221,11.68-11.667,11.68   c-6.442,0-11.666-5.222-11.666-11.68h6.828c0,2.679,2.175,4.835,4.838,4.835c2.667,0,4.835-2.156,4.835-4.835   c0-1.329-0.545-2.527-1.429-3.407l0,0c-0.864-0.88-2.082-1.418-3.406-1.418l0,0C23.341,76.35,20.429,75.036,18.312,72.927   L18.312,72.927L18.312,72.927z"/>
+         <polygon id="V" fill="#FFFFFF" stroke="#000000" stroke-width="0.5035" points="61.588,53.005 53.344,92.854 46.494,92.854    38.236,53.005 45.082,53.005 49.92,76.342 54.755,53.005  "/>
+         <path id="G" fill="#FFFFFF" stroke="#000000" stroke-width="0.5035" d="M73.255,69.513h11.683v11.664l0,0   c0,6.452-5.226,11.678-11.669,11.678c-6.441,0-11.666-5.226-11.666-11.678l0,0V64.676h-0.017C61.586,58.229,66.827,53,73.253,53   c6.459,0,11.683,5.225,11.683,11.676h-6.849c0-2.674-2.152-4.837-4.834-4.837c-2.647,0-4.82,2.163-4.82,4.837v16.501l0,0   c0,2.675,2.173,4.837,4.82,4.837c2.682,0,4.834-2.162,4.834-4.827v-0.012v-4.827h-4.834L73.255,69.513L73.255,69.513z"/>
+      </g>
+    </g>
+  </a>
+</svg>
diff --git a/examples/webpack-config-array/webpack.config.js b/examples/webpack-config-array/webpack.config.js
