UNPKG

5.92 kBMarkdownView Raw
1<div align="center">
2 <a href="https://github.com/webpack/webpack">
3 <img width="200" height="200" src="https://webpack.js.org/assets/icon-square-big.svg">
4 </a>
5</div>
6
7[![npm][npm]][npm-url]
8[![node][node]][node-url]
9[![deps][deps]][deps-url]
10[![tests][tests]][tests-url]
11[![coverage][cover]][cover-url]
12[![chat][chat]][chat-url]
13[![downloads][downloads]][npm-url]
14[![contributors][contributors]][contributors-url]
15
16# webpack-dev-server
17
18Use [webpack](https://webpack.js.org) with a development server that provides
19live reloading. This should be used for **development only**.
20
21It uses [webpack-dev-middleware][middleware-url] under the hood, which provides
22fast in-memory access to the webpack assets.
23
24## Table of Contents
25
26- [Getting Started](#getting-started)
27- [Usage](#usage)
28 - [With the CLI](#with-the-cli)
29 - [With NPM Scripts](#with-npm-scripts)
30 - [The Result](#the-result)
31- [Browser Support](#browser-support)
32- [Support](#support)
33- [Contributing](#contributing)
34- [Attribution](#attribution)
35- [License](#license)
36
37## Getting Started
38
39First things first, install the module:
40
41```console
42npm install webpack-dev-server --save-dev
43```
44
45_Note: While you can install and run webpack-dev-server globally, we recommend
46installing it locally. webpack-dev-server will always use a local installation
47over a global one._
48
49## Usage
50
51There are two main, recommended methods of using the module:
52
53### With the CLI
54
55The easiest way to use it is with the CLI. In the directory where your
56`webpack.config.js` is, run:
57
58```console
59node_modules/.bin/webpack-dev-server
60```
61
62_**Note**: Many CLI options are available with `webpack-dev-server`. Explore this [link](https://webpack.js.org/configuration/dev-server/)._
63
64### With NPM Scripts
65
66NPM package.json scripts are a convenient and useful means to run locally installed
67binaries without having to be concerned about their full paths. Simply define a
68script as such:
69
70```json
71"scripts": {
72 "start:dev": "webpack-dev-server"
73}
74```
75
76And run the following in your terminal/console:
77
78```console
79npm run start:dev
80```
81
82NPM will automagically reference the binary in `node_modules` for you, and
83execute the file or command.
84
85### The Result
86
87Either method will start a server instance and begin listening for connections
88from `localhost` on port `8080`.
89
90webpack-dev-server is configured by default to support live-reload of files as
91you edit your assets while the server is running.
92
93See [**the documentation**][docs-url] for more use cases and options.
94
95## Browser Support
96
97While `webpack-dev-server` transpiles the client (browser) scripts to an ES5
98state, the project only officially supports the _last two versions of major
99browsers_. We simply don't have the resources to support every whacky
100browser out there.
101
102If you find a bug with an obscure / old browser, we would actively welcome a
103Pull Request to resolve the bug.
104
105## Support
106
107We do our best to keep Issues in the repository focused on bugs, features, and
108needed modifications to the code for the module. Because of that, we ask users
109with general support, "how-to", or "why isn't this working" questions to try one
110of the other support channels that are available.
111
112Your first-stop-shop for support for webpack-dev-server should by the excellent
113[documentation][docs-url] for the module. If you see an opportunity for improvement
114of those docs, please head over to the [webpack.js.org repo][wjo-url] and open a
115pull request.
116
117From there, we encourage users to visit the [webpack Gitter chat][chat-url] and
118talk to the fine folks there. If your quest for answers comes up dry in chat,
119head over to [StackOverflow][stack-url] and do a quick search or open a new
120question. Remember; It's always much easier to answer questions that include your
121`webpack.config.js` and relevant files!
122
123If you're twitter-savvy you can tweet [#webpack][hash-url] with your question
124and someone should be able to reach out and lend a hand.
125
126If you have discovered a :bug:, have a feature suggestion, or would like to see
127a modification, please feel free to create an issue on Github. _Note: The issue
128template isn't optional, so please be sure not to remove it, and please fill it
129out completely._
130
131## Contributing
132
133We welcome your contributions! Please have a read of [CONTRIBUTING.md](CONTRIBUTING.md) for more information on how to get involved.
134
135## Attribution
136
137This project is heavily inspired by [peerigon/nof5](https://github.com/peerigon/nof5).
138
139## License
140
141#### [MIT](./LICENSE)
142
143[npm]: https://img.shields.io/npm/v/webpack-dev-server.svg
144[npm-url]: https://npmjs.com/package/webpack-dev-server
145[node]: https://img.shields.io/node/v/webpack-dev-server.svg
146[node-url]: https://nodejs.org
147[deps]: https://david-dm.org/webpack/webpack-dev-server.svg
148[deps-url]: https://david-dm.org/webpack/webpack-dev-server
149[tests]: https://dev.azure.com/webpack/webpack-dev-server/_apis/build/status/webpack.webpack-dev-server?branchName=master
150[tests-url]: https://dev.azure.com/webpack/webpack-dev-server/_build/latest?definitionId=7&branchName=master
151[cover]: https://codecov.io/gh/webpack/webpack-dev-server/branch/master/graph/badge.svg
152[cover-url]: https://codecov.io/gh/webpack/webpack-dev-server
153[chat]: https://badges.gitter.im/webpack/webpack.svg
154[chat-url]: https://gitter.im/webpack/webpack
155[docs-url]: https://webpack.js.org/configuration/dev-server/#devserver
156[hash-url]: https://twitter.com/search?q=webpack
157[middleware-url]: https://github.com/webpack/webpack-dev-middleware
158[stack-url]: https://stackoverflow.com/questions/tagged/webpack-dev-server
159[uglify-url]: https://github.com/webpack-contrib/uglifyjs-webpack-plugin
160[wjo-url]: https://github.com/webpack/webpack.js.org
161[downloads]: https://img.shields.io/npm/dm/webpack-dev-server.svg
162[contributors-url]: https://github.com/webpack/webpack-dev-server/graphs/contributors
163[contributors]: https://img.shields.io/github/contributors/webpack/webpack-dev-server.svg