Skip to content

docs: update examples #3326

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
May 21, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions examples/cli/bonjour/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ is started.
To run this example, run this command in your console or terminal:

```console
npm run webpack-dev-server -- --bonjour
npx webpack serve --bonjour
```

## What Should Happen
Expand All @@ -33,7 +33,7 @@ module.exports = {
```

```console
npm run webpack-dev-server -- --config webpack.config.js
npx webpack serve --config webpack.config.js
```

## What Should Happen
Expand Down
4 changes: 2 additions & 2 deletions examples/cli/compression/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ It is enabled by default.
To run this example, run this command in your console or terminal:

```console
npm run webpack-dev-server -- --open-target --compress
npx webpack serve --open-target --compress
```

### What should happen
Expand All @@ -25,7 +25,7 @@ npm run webpack-dev-server -- --open-target --compress
To run this example, run this command in your console or terminal:

```console
npm run webpack-dev-server -- --open --no-compress
npx webpack serve --open --no-compress
```

### What should happen
Expand Down
4 changes: 2 additions & 2 deletions examples/cli/default/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,13 @@
This example demonstrates how to use `webpack-dev-server`.

```console
npm run webpack-dev-server -- --open-target
npx webpack serve --open-target
```

To run your app using an alternative config, use:

```console
npm run webpack-dev-server -- --open-target --config alternative.config.js
npx webpack serve --open-target --config alternative.config.js
```

## What Should Happen
Expand Down
2 changes: 1 addition & 1 deletion examples/cli/history-api-fallback/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ 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
npm run webpack-dev-server -- --open-target --history-api-fallback
npx webpack serve --open-target --history-api-fallback
```

_Note: some URLs don't work by default. For example; if the url contains a dot.
Expand Down
36 changes: 33 additions & 3 deletions examples/cli/hmr/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,12 @@
Hot Module Replacement (HMR) exchanges, adds, or removes modules while an
application is running, without a full reload of the page.

## --hot

To run this example, run this command in your console or terminal:

```console
npm run webpack-dev-server -- --open-target --hot
npx webpack serve --open-target --hot
```

## What Should Happen
Expand All @@ -18,8 +20,8 @@ npm run webpack-dev-server -- --open-target --hot
In the devtools console you should see:

```
[WDS] App updated. Recompiling...
[WDS] App hot update...
[webpack-dev-server] App updated. Recompiling...
[webpack-dev-server] App hot update...
[HMR] Checking for updates on the server...
[HMR] Updated modules:
[HMR] - ./example.js
Expand All @@ -28,3 +30,31 @@ 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

Enables Hot Module Replacement without page refresh as a fallback in case of build failures.

```console
npx webpack serve --open-target --hot only
```

## What Should Happen

1. The script should open `http://localhost:8080/` in your default browser.
2. In your editor, open `example.js` and change `const` keyword to `constt` to cause build error.
3. Open the console in your browser's devtools.
4. Revert the change in step 2 and change any part of the `innerHTML` string.

In the devtools console you should see:

```
[webpack-dev-server] App updated. Recompiling...
[webpack-dev-server] App hot update...
[HMR] Checking for updates on the server...
⚠️ Ignored an update to unaccepted module ./example.js -> ./app.js
[HMR] Nothing hot Updated.
[HMR] App is up to date.
```

5. Refresh the page and see the text on the page itself change to match your edits in `example.js`.
10 changes: 5 additions & 5 deletions examples/cli/host-and-port/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,39 +6,39 @@ will run. The `host` and `port` options allow for that.
## IPv4

```console
npm run webpack-dev-server -- --open-target --port 5000 --host 0.0.0.0
npx webpack serve --open-target --port 5000 --host 0.0.0.0
```

## IPv6

_This also works with IPv6_

```console
npm run webpack-dev-server -- --open-target --port 5000 --host ::
npx webpack serve --open-target --port 5000 --host ::
```

## local-ip

Specifying `local-ip` as `host` will try to resolve the `host` option as your local `IPv4` address if available, if `IPv4` is not available it will try to resolve your local `IPv6` address.

```console
npm run webpack-dev-server -- --open-target --port 5000 --host local-ip
npx webpack serve --open-target --port 5000 --host local-ip
```

## local-ipv4

Specifying `local-ipv4` as `host` will try to resolve the `host` option as your local `IPv4` address.

```console
npm run webpack-dev-server -- --open-target --port 5000 --host local-ipv4
npx webpack serve --open-target --port 5000 --host local-ipv4
```

## local-ipv6

Specifying `local-ipv6` as `host` will try to resolve the `host` option as your local `IPv6` address.

```console
npm run webpack-dev-server -- --open-target --port 5000 --host local-ipv6
npx webpack serve --open-target --port 5000 --host local-ipv6
```

## What Should Happen
Expand Down
2 changes: 1 addition & 1 deletion examples/cli/multi-compiler/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
`webpack-dev-server` should be able to compile multiple webpack configs.

```shell
npm run webpack-dev-server -- --open-target
npx webpack serve --open-target
```

## What Should Happen
Expand Down
2 changes: 1 addition & 1 deletion examples/cli/node-false/README.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
# CLI: Webpack `node` Option

```shell
npm run webpack-dev-server -- --open-target
npx webpack serve --open-target
```

## What should happen
Expand Down
2 changes: 1 addition & 1 deletion examples/cli/open-target-multiple/README.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
# CLI: Open Target Option (Multiple)

```console
npm run webpack-dev-server -- --open-target example1.html --open-target example2.html
npx webpack serve --open-target example1.html --open-target example2.html
```

Some applications may consist of multiple pages. During development it may
Expand Down
8 changes: 4 additions & 4 deletions examples/cli/open-target/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,25 +3,25 @@
Open browser:

```
npm run webpack-dev-server -- --open-target
npx webpack serve --open-target
```

Open specific page in browser:

```
npm run webpack-dev-server -- --open-target /example.html#page1
npx webpack serve --open-target /example.html#page1
```

Open specific browser:

```
npm run webpack-dev-server -- --open-app firefox
npx webpack serve --open-app firefox
```

Open specific page in specific browser:

```
npm run webpack-dev-server -- --open-target example.html#page1 --open-app firefox
npx webpack serve --open-target example.html#page1 --open-app firefox
```

Some applications may consist of multiple pages. During development it may
Expand Down
2 changes: 1 addition & 1 deletion examples/cli/overlay/README.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
# CLI: --client-overlay option

```shell
npm run webpack-dev-server -- --open-target --client-overlay
npx webpack serve --open-target --client-overlay
```

## What Should Happen
Expand Down
2 changes: 1 addition & 1 deletion examples/cli/progress/README.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
# CLI: Progress Option

```shell
npm run webpack-dev-server -- --open-target --client-progress
npx webpack serve --open-target --client-progress
```

## What Should Happen
Expand Down
2 changes: 1 addition & 1 deletion examples/cli/public-protocol/README.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
# CLI: Public Option Protocol

```console
npm run webpack-dev-server
npx webpack serve
```

_NOTE: replace `<insert local ip>` with your local IP Address._
Expand Down
2 changes: 1 addition & 1 deletion examples/cli/public/README.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
# CLI: Public Option

```console
npm run webpack-dev-server -- --open-target --host 0.0.0.0 --public <insert local ip>:8080
npx webpack serve --open-target --host 0.0.0.0 --public <insert local ip>:8080
```

_NOTE: replace `<insert local ip>` with your local IP Address._
Expand Down
6 changes: 3 additions & 3 deletions examples/cli/watch-static/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
## Watching a single directory

```console
npm run webpack-dev-server -- --static assets --open-target
npx webpack serve --static assets --open-target
```

### What Should Happen
Expand All @@ -26,13 +26,13 @@ module.exports = {
```

```console
npm run webpack-dev-server -- --open-target
npx webpack serve --open-target
```

or via CLI only:

```console
npm run webpack-dev-server -- --static assets --static css --open-target
npx webpack serve --static assets --static css --open-target
```

### What Should Happen
Expand Down
2 changes: 1 addition & 1 deletion examples/general/config-array/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
This example demonstrates using a `webpack` config containing an array of configs.

```console
npm run webpack-dev-server -- --open
npx webpack serve --open-target
```

## What Should Happen
Expand Down
2 changes: 1 addition & 1 deletion examples/general/config-promise/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ This example demonstrates using `webpack-dev-server` with a `webpack` config tha
returns a `Promise`.

```console
npm run webpack-dev-server -- --open
npx webpack serve --open-target
```

## What Should Happen
Expand Down
2 changes: 1 addition & 1 deletion examples/general/proxy-advanced/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ This example demonstrates a user case whereby the app proxies all urls that star
`http://jsonplaceholder.typicode.com/users`.

```console
npm run webpack-dev-server -- --open
npx webpack serve --open-target
```

## What should happen
Expand Down
2 changes: 1 addition & 1 deletion examples/general/proxy-hot-reload/README.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
# General: Proxy Hot Reload

```shell
npm run webpack-dev-server -- --open
npx webpack serve --open-target
```

Enables hot reloading for proxy config. If function is provided instead of
Expand Down
2 changes: 1 addition & 1 deletion examples/general/proxy-simple/README.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
# General: Simple Proxy

```console
npm run webpack-dev-server -- --open
npx webpack serve --open-target
```

In `webpack.config.js` there is a very simple configuration for a proxy. Note that this only works when proxying to a direct ip address. See the proxy-advanced example if you want to proxy to a domain.
Expand Down
2 changes: 1 addition & 1 deletion examples/general/universal-config/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
This example demonstrates using a `webpack` config containing a `target: web` config and `target:node` config.

```console
npm run webpack-dev-server -- --open
npx webpack serve --open-target
```

## What Should Happen
Expand Down
2 changes: 1 addition & 1 deletion examples/general/webworker/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
This example demonstrates using a WebWorker within an app run by `webpack-dev-server`.

```console
npm run webpack-dev-server
npx webpack serve
```

## What should happen
Expand Down
10 changes: 0 additions & 10 deletions examples/run-example.js

This file was deleted.

1 change: 0 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@
"pretest": "npm run lint",
"prepare": "npm run build:client && husky install",
"build:client": "rimraf ./client/* && babel client-src/ --out-dir client/ --ignore \"webpack.config.js\" && webpack --config client/webpack.config.js",
"webpack-dev-server": "node examples/run-example.js",
"release": "standard-version"
},
"dependencies": {
Expand Down