diff --git a/examples/client/reconnect/false/README.md b/examples/client/reconnect/false/README.md new file mode 100644 index 0000000000..82300389b4 --- /dev/null +++ b/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! +``` diff --git a/examples/client/reconnect/false/app.js b/examples/client/reconnect/false/app.js new file mode 100644 index 0000000000..f489bd6f33 --- /dev/null +++ b/examples/client/reconnect/false/app.js @@ -0,0 +1,7 @@ +"use strict"; + +const target = document.querySelector("#target"); + +target.classList.add("pass"); +target.innerHTML = + "Success!
Now, open the console tab in your browser's devtools. Then, close the server with `Ctrl+C` to disconnect the client."; diff --git a/examples/client/reconnect/false/webpack.config.js b/examples/client/reconnect/false/webpack.config.js new file mode 100644 index 0000000000..4d9ffc4eaa --- /dev/null +++ b/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, + }, + }, +}); diff --git a/examples/client/reconnect/number/README.md b/examples/client/reconnect/number/README.md new file mode 100644 index 0000000000..bd9e4ad3d4 --- /dev/null +++ b/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 +``` diff --git a/examples/client/reconnect/number/app.js b/examples/client/reconnect/number/app.js new file mode 100644 index 0000000000..f489bd6f33 --- /dev/null +++ b/examples/client/reconnect/number/app.js @@ -0,0 +1,7 @@ +"use strict"; + +const target = document.querySelector("#target"); + +target.classList.add("pass"); +target.innerHTML = + "Success!
Now, open the console tab in your browser's devtools. Then, close the server with `Ctrl+C` to disconnect the client."; diff --git a/examples/client/reconnect/number/webpack.config.js b/examples/client/reconnect/number/webpack.config.js new file mode 100644 index 0000000000..831deb76ff --- /dev/null +++ b/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, + }, + }, +}); diff --git a/examples/client/reconnect/true/README.md b/examples/client/reconnect/true/README.md new file mode 100644 index 0000000000..249d9df55a --- /dev/null +++ b/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 +``` diff --git a/examples/client/reconnect/true/app.js b/examples/client/reconnect/true/app.js new file mode 100644 index 0000000000..f489bd6f33 --- /dev/null +++ b/examples/client/reconnect/true/app.js @@ -0,0 +1,7 @@ +"use strict"; + +const target = document.querySelector("#target"); + +target.classList.add("pass"); +target.innerHTML = + "Success!
Now, open the console tab in your browser's devtools. Then, close the server with `Ctrl+C` to disconnect the client."; diff --git a/examples/client/reconnect/true/webpack.config.js b/examples/client/reconnect/true/webpack.config.js new file mode 100644 index 0000000000..abb446d1a9 --- /dev/null +++ b/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, + }, + }, +});