docs: add examples for the client.reconnect option (#3938)

Author: snitin315

examples/client/reconnect/false/README.md

@@ -0,0 +1,38 @@
+# client.reconnect: false
+
+## false
+
+Tells dev-server the number of times it should try to reconnect the client. When `false` it will not try to reconnect.
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  // ...
+  devServer: {
+    client: {
+      reconect: false,
+    },
+  },
+};
+```
+
+Usage via CLI:
+
+```shell
+npx webpack serve --open --no-client-reconnect
+```
+
+## What Should Happen
+
+1. The script should open `http://localhost:8080/` in your default browser.
+2. Open the console tab in your browser's devtools.
+3. Now close the server with `Ctrl+C` to disconnect the client.
+
+In the devtools console you should see that webpack-dev-server is not trying to reconnect:
+
+```
+[webpack-dev-server] Hot Module Replacement enabled.
+[webpack-dev-server] Live Reloading enabled.
+[webpack-dev-server] Disconnected!
+```

examples/client/reconnect/false/app.js

@@ -0,0 +1,7 @@
+"use strict";
+
+const target = document.querySelector("#target");
+
+target.classList.add("pass");
+target.innerHTML =
+  "Success! <br> Now, open the console tab in your browser's devtools. Then, close the server with `Ctrl+C` to disconnect the client.";

examples/client/reconnect/false/webpack.config.js

@@ -0,0 +1,15 @@
+"use strict";
+
+// our setup function adds behind-the-scenes bits to the config that all of our
+// examples need
+const { setup } = require("../../../util");
+
+module.exports = setup({
+  context: __dirname,
+  entry: "./app.js",
+  devServer: {
+    client: {
+      reconnect: false,
+    },
+  },
+});

examples/client/reconnect/number/README.md

@@ -0,0 +1,44 @@
+# client.reconnect Option
+
+## number
+
+Tells dev-server the number of times it should try to reconnect the client.
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  // ...
+  devServer: {
+    client: {
+      reconect: 2,
+    },
+  },
+};
+```
+
+Usage via CLI:
+
+```shell
+npx webpack serve --open --client-reconnect 2
+```
+
+## What Should Happen
+
+1. The script should open `http://localhost:8080/` in your default browser.
+2. Open the console tab in your browser's devtools.
+3. Now close the server with `Ctrl+C` to disconnect the client.
+
+In the devtools console you should see that webpack-dev-server tried to reconnect the client 2 times:
+
+```
+[webpack-dev-server] Hot Module Replacement enabled.
+[webpack-dev-server] Live Reloading enabled.
+[webpack-dev-server] Disconnected!
+[webpack-dev-server] Trying to reconnect...
+WebSocket connection to 'ws://127.0.0.1:8163/ws' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED
+[webpack-dev-server] JSHandle@object
+[webpack-dev-server] Trying to reconnect...
+WebSocket connection to 'ws://127.0.0.1:8163/ws' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED
+[webpack-dev-server] JSHandle@object
+```

examples/client/reconnect/number/app.js

@@ -0,0 +1,7 @@
+"use strict";
+
+const target = document.querySelector("#target");
+
+target.classList.add("pass");
+target.innerHTML =
+  "Success! <br> Now, open the console tab in your browser's devtools. Then, close the server with `Ctrl+C` to disconnect the client.";

examples/client/reconnect/number/webpack.config.js

@@ -0,0 +1,15 @@
+"use strict";
+
+// our setup function adds behind-the-scenes bits to the config that all of our
+// examples need
+const { setup } = require("../../../util");
+
+module.exports = setup({
+  context: __dirname,
+  entry: "./app.js",
+  devServer: {
+    client: {
+      reconnect: 2,
+    },
+  },
+});

examples/client/reconnect/true/README.md

@@ -0,0 +1,47 @@
+# client.reconnect: true
+
+## true
+
+Tells dev-server the number of times it should try to reconnect the client. When `true` it will try to reconnect unlimited times.
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  // ...
+  devServer: {
+    client: {
+      reconect: true,
+    },
+  },
+};
+```
+
+Usage via CLI:
+
+```shell
+npx webpack serve --open --client-reconnect
+```
+
+## What Should Happen
+
+1. The script should open `http://localhost:8080/` in your default browser.
+2. Open the console tab in your browser's devtools.
+3. Now close the server with `Ctrl+C` to disconnect the client.
+
+In the devtools console you should see that webpack-dev-server is trying to reconnect:
+
+```
+[webpack-dev-server] Hot Module Replacement enabled.
+[webpack-dev-server] Live Reloading enabled.
+[webpack-dev-server] Disconnected!
+[webpack-dev-server] Trying to reconnect...
+WebSocket connection to 'ws://127.0.0.1:8163/ws' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED
+[webpack-dev-server] JSHandle@object
+[webpack-dev-server] Trying to reconnect...
+WebSocket connection to 'ws://127.0.0.1:8163/ws' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED
+[webpack-dev-server] JSHandle@object
+[webpack-dev-server] Trying to reconnect...
+WebSocket connection to 'ws://127.0.0.1:8163/ws' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED
+[webpack-dev-server] JSHandle@object
+```

examples/client/reconnect/true/app.js

@@ -0,0 +1,7 @@
+"use strict";
+
+const target = document.querySelector("#target");
+
+target.classList.add("pass");
+target.innerHTML =
+  "Success! <br> Now, open the console tab in your browser's devtools. Then, close the server with `Ctrl+C` to disconnect the client.";

examples/client/reconnect/true/webpack.config.js

@@ -0,0 +1,15 @@
+"use strict";
+
+// our setup function adds behind-the-scenes bits to the config that all of our
+// examples need
+const { setup } = require("../../../util");
+
+module.exports = setup({
+  context: __dirname,
+  entry: "./app.js",
+  devServer: {
+    client: {
+      reconnect: true,
+    },
+  },
+});