You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Use [webpack](https://webpack.js.org) with a development server that provides live reloading. This should be used for **development only**.
16
+
Use [webpack](https://webpack.js.org) with a development server that provides
17
+
live reloading. This should be used for **development only**.
19
18
20
-
It uses [webpack-dev-middleware](https://github.com/webpack/webpack-dev-middleware) under the hood, which provides fast in-memory access to the webpack assets.
19
+
It uses [webpack-dev-middleware][middleware-url] under the hood, which provides
20
+
fast in-memory access to the webpack assets.
21
21
22
-
<h2align="center">Install</h2>
22
+
## Getting Started
23
23
24
-
```
24
+
First thing's first, install the module:
25
+
26
+
```console
25
27
npm install webpack-dev-server --save-dev
26
28
```
27
29
28
-
<h2align="center">Usage</h2>
30
+
_Note: While you can install and run webpack-dev-server globally, we recommend
31
+
installing it locally. webpack-dev-server will always use a local installation
32
+
over a global one._
29
33
30
-
The easiest way to use it is with the CLI. In the directory where your `webpack.config.js` is, run:
34
+
## Usage
31
35
32
-
```
36
+
There are two main, recommended methods of using the module:
37
+
38
+
### With the CLI
39
+
40
+
The easiest way to use it is with the CLI. In the directory where your
41
+
`webpack.config.js` is, run:
42
+
43
+
```console
33
44
node_modules/.bin/webpack-dev-server
34
45
```
35
46
36
-
This will start a server, listening on connections from `localhost` on port `8080`.
47
+
### With NPM Scripts
48
+
49
+
NPM package.json scripts are a convenient and useful means to run locally installed
50
+
binaries without having to be concerned about their full paths. Simply define a
51
+
script as such:
52
+
53
+
```json
54
+
"scripts": {
55
+
"start:dev": "webpack-dev-server"
56
+
}
57
+
```
58
+
59
+
And run the following in your terminal/console:
60
+
61
+
```console
62
+
npm run start:dev
63
+
```
64
+
65
+
NPM will automagically reference the binary in `node_modules` for you, and
66
+
execute the file or command.
67
+
68
+
### The Result
69
+
70
+
Either method will start a server instance and begin listening for connections
71
+
from `localhost` on port `8080`.
72
+
73
+
webpack-dev-server is configured by default to support live-reload of files as
74
+
you edit your assets while the server is running.
75
+
76
+
See [**the documentation**][docs-url] for more use cases and options.
77
+
78
+
## Caveats
79
+
80
+
Version 2.8.0 introduced a change which included ES6 keywords `const` and `let`
81
+
within the scripts being served to the browser. This effects environments which
82
+
support _no ES6 whatsoever_, including older versions of UglifyJS and Internet
83
+
Explorer. This was not considered a breaking change at the time due to official
84
+
support for oldIE ending in 2016, rather this was seen as a maintenance update.
85
+
Those wishing to support oldIE should stick with version 2.7.1.
37
86
38
-
Now, when you change something in your assets, it should live-reload the files.
87
+
For version 2.8.0+ those using UglifyJS in their webpack configs should use the
88
+
beta version of [uglifyjs-webpack-plugin][uglify-url] independently, and _not_
89
+
the built-in plugin. This will change once the new version is out of beta.
39
90
40
-
See [**the documentation**](https://webpack.js.org/configuration/dev-server/#devserver) for more use cases and options.
91
+
## Support
41
92
42
-
<h2align="center">Contributing</h2>
93
+
We do our best to keep Issues in the repository focused on bugs, features, and
94
+
needed modifications to the code for the module. Because of that, we ask users
95
+
with general support, "how-to", or "why isn't this working" questions to try one
96
+
of the other support channels that are available.
43
97
44
-
We appreciate all help! Check out [CONTRIBUTING.md](CONTRIBUTING.md) for more information on how to help.
98
+
Your first-stop-shop for support for webpack-dev-server should by the excellent
99
+
[documentation][docs-url] for the module. If you see an opportunity for improvement
100
+
of those docs, please head over to the [webpack.js.org repo][wjo-url] and open a
101
+
pull request.
45
102
46
-
<h2align="center">Maintainers</h2>
103
+
From there, we encourage users to visit the [webpack Gitter chat][chat-url] and
104
+
talk to the fine folks there. If your quest for answers comes up dry in chat,
105
+
head over to [StackOverflow][stack-url] and do a quick search or open a new
106
+
question. Remember; It's always much easier to answer questions that include your
107
+
`webpack.config.js` and relevant files!
108
+
109
+
If you're twitter-savvy you can tweet [#webpack][hash-url] with your question
110
+
and someone should be able to reach out and lend a hand.
111
+
112
+
If you have discovered a :bug:, have a feature suggestion, of would like to see
113
+
a modification, please feel free to create an issue on Github. _Note: The issue
114
+
template isn't optional, so please be sure not to remove it, and please fill it
115
+
out completely._
116
+
117
+
## Contributing
118
+
119
+
We welcome your contributions! Please have a read of [CONTRIBUTING.md](CONTRIBUTING.md) for more information on how to get involved.
0 commit comments