docs: improve examples (#3672)

webpack · Aug 18, 2021 · 4f5bab1 · 4f5bab1
1 parent f2d87fb
commit 4f5bab1
Show file tree

Hide file tree

Showing 73 changed files with 480 additions and 170 deletions.
diff --git a/examples/cli/bonjour/README.md → examples/bonjour/README.md b/examples/cli/bonjour/README.md → examples/bonjour/README.md
@@ -3,7 +3,18 @@
 The Bonjour capability broadcasts server information via ZeroConf when the Server
 is started.
 
-To run this example, run this command in your console or terminal:
+**webpack.config.js**
+
+```js
+module.exports = {
+  // ...
+  devServer: {
+    bonjour: true,
+  },
+};
+```
+
+Usage via CLI:
 
 ```console
 npx webpack serve --bonjour

diff --git a/examples/cli/bonjour/app.js → examples/bonjour/app.js b/examples/cli/bonjour/app.js → examples/bonjour/app.js
diff --git a/examples/cli/hmr/webpack.config.js → examples/bonjour/webpack.config.js b/examples/cli/hmr/webpack.config.js → examples/bonjour/webpack.config.js
@@ -2,7 +2,7 @@
 
 // our setup function adds behind-the-scenes bits to the config that all of our
 // examples need
-const { setup } = require("../../util");
+const { setup } = require("../util");
 
 module.exports = setup({
   context: __dirname,

diff --git a/examples/cli/https/README.md b/examples/cli/https/README.md
diff --git a/examples/cli/https/webpack.config.js b/examples/cli/https/webpack.config.js
diff --git a/examples/cli/open-target/README.md b/examples/cli/open-target/README.md
diff --git a/examples/cli/progress/webpack.config.js b/examples/cli/progress/webpack.config.js
diff --git a/examples/cli/web-socket-server/webpack.config.js b/examples/cli/web-socket-server/webpack.config.js
diff --git a/examples/cli/web-socket-url-cli/README.md b/examples/cli/web-socket-url-cli/README.md
diff --git a/examples/cli/web-socket-url-cli/app.js b/examples/cli/web-socket-url-cli/app.js
diff --git a/examples/cli/web-socket-url-cli/webpack.config.js b/examples/cli/web-socket-url-cli/webpack.config.js
diff --git a/examples/cli/compression/README.md → examples/compression/README.md b/examples/cli/compression/README.md → examples/compression/README.md
@@ -5,9 +5,20 @@ to roughly 30% of its original size before the files are sent to the browser.
 
 It is enabled by default.
 
-## `--compress`
+## true
 
-To run this example, run this command in your console or terminal:
+**webpack.config.js**
+
+```js
+module.exports = {
+  // ...
+  devServer: {
+    compress: true,
+  },
+};
+```
+
+Usage via CLI:
 
 ```console
 npx webpack serve --open --compress
@@ -20,9 +31,20 @@ npx webpack serve --open --compress
 3. Open the console in your browser's devtools and select the _Network_ tab.
 4. Find `bundle.js`. The response headers should contain `Content-Encoding: gzip`.
 
-## `--no-compress`
+## false
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  // ...
+  devServer: {
+    compress: false,
+  },
+};
+```
 
-To run this example, run this command in your console or terminal:
+Usage via CLI:
 
 ```console
 npx webpack serve --open --no-compress

diff --git a/examples/cli/compression/app.js → examples/compression/app.js b/examples/cli/compression/app.js → examples/compression/app.js
diff --git a/examples/cli/bonjour/webpack.config.js → examples/compression/webpack.config.js b/examples/cli/bonjour/webpack.config.js → examples/compression/webpack.config.js
@@ -2,7 +2,7 @@
 
 // our setup function adds behind-the-scenes bits to the config that all of our
 // examples need
-const { setup } = require("../../util");
+const { setup } = require("../util");
 
 module.exports = setup({
   context: __dirname,

diff --git a/examples/cli/default/README.md → examples/default/README.md b/examples/cli/default/README.md → examples/default/README.md
@@ -1,4 +1,4 @@
-# CLI: Default State
+# Default State
 
 This example demonstrates how to use `webpack-dev-server`.
 

diff --git a/examples/cli/default/app.js → examples/default/app.js b/examples/cli/default/app.js → examples/default/app.js
diff --git a/examples/cli/default/pixels.png → examples/default/pixels.png b/examples/cli/default/pixels.png → examples/default/pixels.png
diff --git a/examples/cli/default/style.less → examples/default/style.less b/examples/cli/default/style.less → examples/default/style.less
diff --git a/examples/cli/default/svg.svg → examples/default/svg.svg b/examples/cli/default/svg.svg → examples/default/svg.svg
diff --git a/examples/cli/default/webpack.config.js → examples/default/webpack.config.js b/examples/cli/default/webpack.config.js → examples/default/webpack.config.js
@@ -2,7 +2,7 @@
 
 // our setup function adds behind-the-scenes bits to the config that all of our
 // examples need
-const { setup } = require("../../util");
+const { setup } = require("../util");
 
 module.exports = setup({
   context: __dirname,

diff --git a/examples/cli/history-api-fallback/README.md → examples/history-api-fallback/README.md b/examples/cli/history-api-fallback/README.md → examples/history-api-fallback/README.md
@@ -1,10 +1,23 @@
-# CLI: History API Fallback Option
+# historyApiFallback Option
 
 This option enables [History API Fallback](https://github.com/bripkens/connect-history-api-fallback)
 support in `webpack-dev-server`, effectively asking the server to fallback to
 `index.html` in the event that a requested resource cannot be found.
 
-```shell
+**webpack.config.js**
+
+```js
+module.exports = {
+  // ...
+  devServer: {
+    historyApiFallback: true,
+  },
+};
+```
+
+Usage via CLI:
+
+```console
 npx webpack serve --open --history-api-fallback
 ```
 

diff --git a/examples/cli/history-api-fallback/app.js → examples/history-api-fallback/app.js b/examples/cli/history-api-fallback/app.js → examples/history-api-fallback/app.js
diff --git a/examples/cli/history-api-fallback/file.txt → examples/history-api-fallback/file.txt b/examples/cli/history-api-fallback/file.txt → examples/history-api-fallback/file.txt
diff --git a/...li/history-api-fallback/webpack.config.js → ...es/history-api-fallback/webpack.config.js b/...li/history-api-fallback/webpack.config.js → ...es/history-api-fallback/webpack.config.js
@@ -2,7 +2,7 @@
 
 // our setup function adds behind-the-scenes bits to the config that all of our
 // examples need
-const { setup } = require("../../util");
+const { setup } = require("../util");
 
 module.exports = setup({
   context: __dirname,

diff --git a/examples/cli/hmr/README.md → examples/hmr/README.md b/examples/cli/hmr/README.md → examples/hmr/README.md
@@ -3,9 +3,22 @@
 Hot Module Replacement (HMR) exchanges, adds, or removes modules while an
 application is running, without a full reload of the page.
 
-## --hot
+## true
 
-To run this example, run this command in your console or terminal:
+Enable webpack's [Hot Module Replacement](https://webpack.js.org/concepts/hot-module-replacement/) feature:
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  // ...
+  devServer: {
+    hot: true,
+  },
+};
+```
+
+Usage via CLI:
 
 ```console
 npx webpack serve --open --hot
@@ -31,10 +44,23 @@ In the devtools console you should see:
 You should also see the text on the page itself change to match your edits in
 `example.js`.
 
-## --hot only
+## only
 
 Enables Hot Module Replacement without page refresh as a fallback in case of build failures.
 
+**webpack.config.js**
+
+```js
+module.exports = {
+  // ...
+  devServer: {
+    hot: "only",
+  },
+};
+```
+
+Usage via CLI:
+
 ```console
 npx webpack serve --open --hot only
 ```

diff --git a/examples/cli/hmr/app.js → examples/hmr/app.js b/examples/cli/hmr/app.js → examples/hmr/app.js
diff --git a/examples/cli/hmr/example.js → examples/hmr/example.js b/examples/cli/hmr/example.js → examples/hmr/example.js
diff --git a/examples/cli/host-and-port/webpack.config.js → examples/hmr/webpack.config.js b/examples/cli/host-and-port/webpack.config.js → examples/hmr/webpack.config.js
@@ -2,7 +2,7 @@
 
 // our setup function adds behind-the-scenes bits to the config that all of our
 // examples need
-const { setup } = require("../../util");
+const { setup } = require("../util");
 
 module.exports = setup({
   context: __dirname,