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