Start with examples

Ref #581
webpack · Sep 3, 2016 · 6d064d9 · 6d064d9
1 parent c706a9b
commit 6d064d9
Show file tree

Hide file tree

Showing 36 changed files with 223 additions and 82 deletions.
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/example/app.js → examples/modus-inline/app.js b/example/app.js → examples/modus-inline/app.js
diff --git a/example/index.html → examples/modus-inline/index.html b/example/index.html → 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/example/pixels.png → examples/modus-inline/pixels.png b/example/pixels.png → examples/modus-inline/pixels.png
diff --git a/example/style.less → examples/modus-inline/style.less b/example/style.less → examples/modus-inline/style.less
diff --git a/example/svg.svg → examples/modus-inline/svg.svg b/example/svg.svg → examples/modus-inline/svg.svg
diff --git a/example/unparseable.js → examples/modus-inline/unparseable.js b/example/unparseable.js → examples/modus-inline/unparseable.js
diff --git a/example/webpack.config.js → examples/modus-inline/webpack.config.js b/example/webpack.config.js → 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/example/inlined.html → examples/modus-manual-script/index.html b/example/inlined.html → 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
diff --git a/example/webpack.config.array.js → ...es/webpack-config-array/webpack.config.js b/example/webpack.config.array.js → ...es/webpack-config-array/webpack.config.js