From 6d064d9a88fb9b6ebf1a370a0ef5c2c3726ec69b Mon Sep 17 00:00:00 2001 From: Kees Kluskens Date: Sat, 3 Sep 2016 10:42:11 +0200 Subject: [PATCH] Start with examples Ref #581 --- .editorconfig | 2 +- README.md | 2 + example/README.md | 66 ------------------ example/alternative.config.js | 13 ---- examples/README.md | 9 +++ examples/https/README.md | 11 +++ examples/https/app.js | 1 + examples/https/index.html | 9 +++ examples/https/webpack.config.js | 4 ++ examples/modus-iframe/README.md | 15 ++++ examples/modus-iframe/app.js | 7 ++ examples/modus-iframe/index.html | 9 +++ examples/modus-iframe/webpack.config.js | 4 ++ examples/modus-inline/README.md | 23 ++++++ {example => examples/modus-inline}/app.js | 0 {example => examples/modus-inline}/index.html | 1 + {example => examples/modus-inline}/pixels.png | Bin {example => examples/modus-inline}/style.less | 0 {example => examples/modus-inline}/svg.svg | 0 .../modus-inline}/unparseable.js | 0 .../modus-inline}/webpack.config.js | 0 examples/modus-lazy/README.md | 15 ++++ examples/modus-lazy/app.js | 7 ++ examples/modus-lazy/index.html | 9 +++ examples/modus-lazy/webpack.config.js | 4 ++ examples/modus-manual-script/README.md | 13 ++++ examples/modus-manual-script/app.js | 7 ++ .../modus-manual-script/index.html | 3 +- .../modus-manual-script/webpack.config.js | 4 ++ examples/webpack-config-array/README.md | 13 ++++ examples/webpack-config-array/app.js | 9 +++ examples/webpack-config-array/index.html | 9 +++ examples/webpack-config-array/pixels.png | Bin 0 -> 165 bytes examples/webpack-config-array/style.less | 3 + examples/webpack-config-array/svg.svg | 33 +++++++++ .../webpack-config-array/webpack.config.js | 0 36 files changed, 223 insertions(+), 82 deletions(-) delete mode 100644 example/README.md delete mode 100644 example/alternative.config.js create mode 100644 examples/README.md create mode 100644 examples/https/README.md create mode 100644 examples/https/app.js create mode 100644 examples/https/index.html create mode 100644 examples/https/webpack.config.js create mode 100644 examples/modus-iframe/README.md create mode 100644 examples/modus-iframe/app.js create mode 100644 examples/modus-iframe/index.html create mode 100644 examples/modus-iframe/webpack.config.js create mode 100644 examples/modus-inline/README.md rename {example => examples/modus-inline}/app.js (100%) rename {example => examples/modus-inline}/index.html (87%) rename {example => examples/modus-inline}/pixels.png (100%) rename {example => examples/modus-inline}/style.less (100%) rename {example => examples/modus-inline}/svg.svg (100%) rename {example => examples/modus-inline}/unparseable.js (100%) rename {example => examples/modus-inline}/webpack.config.js (100%) create mode 100644 examples/modus-lazy/README.md create mode 100644 examples/modus-lazy/app.js create mode 100644 examples/modus-lazy/index.html create mode 100644 examples/modus-lazy/webpack.config.js create mode 100644 examples/modus-manual-script/README.md create mode 100644 examples/modus-manual-script/app.js rename example/inlined.html => examples/modus-manual-script/index.html (81%) create mode 100644 examples/modus-manual-script/webpack.config.js create mode 100644 examples/webpack-config-array/README.md create mode 100644 examples/webpack-config-array/app.js create mode 100644 examples/webpack-config-array/index.html create mode 100644 examples/webpack-config-array/pixels.png create mode 100644 examples/webpack-config-array/style.less create mode 100644 examples/webpack-config-array/svg.svg rename example/webpack.config.array.js => examples/webpack-config-array/webpack.config.js (100%) diff --git a/.editorconfig b/.editorconfig index 6c965dc605..68a1ac5ebf 100644 --- 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 index b8786b11d5..6d9fe62461 100644 --- 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 deleted file mode 100644 index 6989a7a5b5..0000000000 --- a/example/README.md +++ /dev/null @@ -1,66 +0,0 @@ -# example - -``` text -webpack-dev-server -http://localhost:8080/webpack-dev-server/bundle -``` - -The app should display "It's working" with a dotted background. - -There is no file named `bundle` in this directory. The dev server creates a simple html that executes a javascript file: `bundle.js` (`.js`) - -``` text -webpack-dev-server -http://localhost:8080/webpack-dev-server/index.html -``` - -The app should display "It's working" with a dotted background and a SVG image. - -There is a file named `index.html` in this directory. This file is served as content - - -``` text -webpack-dev-server --config alternative.config.js -http://localhost:8080/webpack-dev-server/bundle -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 --inline -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 -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 - -Try to update app.js, by uncommenting some lines. - -The browser should reflect your changes. - -You may also update the css file or any other file used by the app. - -## History API Fallback - -``` text -webpack-dev-server --inline --history-api-fallback --output-public-path / -http://localhost:8080/some/url/from/spa -``` - -The contents of /index.html is served. diff --git a/example/alternative.config.js b/example/alternative.config.js deleted file mode 100644 index f12344049b..0000000000 --- a/example/alternative.config.js +++ /dev/null @@ -1,13 +0,0 @@ -var webpack = require("webpack"); -module.exports = { - entry: "./app.js", - module: { - loaders: [ - { test: /\.less$/, loader: "style!css!less" }, - { test: /\.png$/, loader: "url?limit=100000" } - ] - }, - plugins: [ - new webpack.optimize.UglifyJsPlugin() - ] -} diff --git a/examples/README.md b/examples/README.md new file mode 100644 index 0000000000..c5e10ab2d9 --- /dev/null +++ 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 new file mode 100644 index 0000000000..ea4a9e8ca4 --- /dev/null +++ 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 new file mode 100644 index 0000000000..82ac1968f5 --- /dev/null +++ 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 new file mode 100644 index 0000000000..8d5ac571e2 --- /dev/null +++ b/examples/https/index.html @@ -0,0 +1,9 @@ + + + + + + +

Example: https

+ + diff --git a/examples/https/webpack.config.js b/examples/https/webpack.config.js new file mode 100644 index 0000000000..9addf604cd --- /dev/null +++ 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 new file mode 100644 index 0000000000..81b3f972c1 --- /dev/null +++ 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 new file mode 100644 index 0000000000..6b799b3705 --- /dev/null +++ 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 new file mode 100644 index 0000000000..7637ca29a7 --- /dev/null +++ b/examples/modus-iframe/index.html @@ -0,0 +1,9 @@ + + + + + + +

Example: iframe

+ + diff --git a/examples/modus-iframe/webpack.config.js b/examples/modus-iframe/webpack.config.js new file mode 100644 index 0000000000..9addf604cd --- /dev/null +++ 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 new file mode 100644 index 0000000000..5f577bc712 --- /dev/null +++ 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 b/examples/modus-inline/app.js similarity index 100% rename from example/app.js rename to examples/modus-inline/app.js diff --git a/example/index.html b/examples/modus-inline/index.html similarity index 87% rename from example/index.html rename to examples/modus-inline/index.html index 2aba541c52..274b4f5939 100644 --- a/example/index.html +++ b/examples/modus-inline/index.html @@ -4,6 +4,7 @@ +

Example: inline


diff --git a/example/pixels.png b/examples/modus-inline/pixels.png similarity index 100% rename from example/pixels.png rename to examples/modus-inline/pixels.png diff --git a/example/style.less b/examples/modus-inline/style.less similarity index 100% rename from example/style.less rename to examples/modus-inline/style.less diff --git a/example/svg.svg b/examples/modus-inline/svg.svg similarity index 100% rename from example/svg.svg rename to examples/modus-inline/svg.svg diff --git a/example/unparseable.js b/examples/modus-inline/unparseable.js similarity index 100% rename from example/unparseable.js rename to examples/modus-inline/unparseable.js diff --git a/example/webpack.config.js b/examples/modus-inline/webpack.config.js similarity index 100% rename from example/webpack.config.js rename to examples/modus-inline/webpack.config.js diff --git a/examples/modus-lazy/README.md b/examples/modus-lazy/README.md new file mode 100644 index 0000000000..1b758e2569 --- /dev/null +++ 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 new file mode 100644 index 0000000000..6b799b3705 --- /dev/null +++ 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 new file mode 100644 index 0000000000..895fac10ac --- /dev/null +++ b/examples/modus-lazy/index.html @@ -0,0 +1,9 @@ + + + + + + +

Example: lazy

+ + diff --git a/examples/modus-lazy/webpack.config.js b/examples/modus-lazy/webpack.config.js new file mode 100644 index 0000000000..9addf604cd --- /dev/null +++ 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 new file mode 100644 index 0000000000..497ff098d5 --- /dev/null +++ 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 new file mode 100644 index 0000000000..6b799b3705 --- /dev/null +++ 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 b/examples/modus-manual-script/index.html similarity index 81% rename from example/inlined.html rename to examples/modus-manual-script/index.html index 22643e1d9a..558682da15 100644 --- a/example/inlined.html +++ b/examples/modus-manual-script/index.html @@ -5,7 +5,6 @@ -
- +

Example: manual script

diff --git a/examples/modus-manual-script/webpack.config.js b/examples/modus-manual-script/webpack.config.js new file mode 100644 index 0000000000..9addf604cd --- /dev/null +++ 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 new file mode 100644 index 0000000000..d5c84c2fe0 --- /dev/null +++ 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 new file mode 100644 index 0000000000..0ac79a9895 --- /dev/null +++ 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 new file mode 100644 index 0000000000..4e18a584b9 --- /dev/null +++ b/examples/webpack-config-array/index.html @@ -0,0 +1,9 @@ + + + + + + +

Example: webpack config array

+ + diff --git a/examples/webpack-config-array/pixels.png b/examples/webpack-config-array/pixels.png new file mode 100644 index 0000000000000000000000000000000000000000..91bb93acc275f1cace7a932b551ad6288620ea5e GIT binary patch literal 165 zcmeAS@N?(olHy`uVBq!ia0vp^AT}2V6Od#Ihk44ofy`glX(f`u%tWsIx;Y9 z?C1WI$O`0h7I;J!GcfQS24TkI`72U@f>xd`jv*Ss$v^tV4H#16_t*V>aZ!2ADThlA zI}f+>A6_~!w0X%zhD}*Imrkr&soHz>FUR4FclZk#8Fw>oeyql||8@EWpeYQVu6{1- HoD!M<-!?VF literal 0 HcmV?d00001 diff --git a/examples/webpack-config-array/style.less b/examples/webpack-config-array/style.less new file mode 100644 index 0000000000..6eda1495fd --- /dev/null +++ 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 new file mode 100644 index 0000000000..33350a7f82 --- /dev/null +++ b/examples/webpack-config-array/svg.svg @@ -0,0 +1,33 @@ + + SVG Logo + + + + + + + + + + + + + + + + + + + + + + + + SVG + + + + + + + diff --git a/example/webpack.config.array.js b/examples/webpack-config-array/webpack.config.js similarity index 100% rename from example/webpack.config.array.js rename to examples/webpack-config-array/webpack.config.js