[6a3a178] | 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 |
|
---|
| 18 | Use [webpack](https://webpack.js.org) with a development server that provides
|
---|
| 19 | live reloading. This should be used for **development only**.
|
---|
| 20 |
|
---|
| 21 | It uses [webpack-dev-middleware][middleware-url] under the hood, which provides
|
---|
| 22 | fast 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 |
|
---|
| 39 | First things first, install the module:
|
---|
| 40 |
|
---|
| 41 | ```console
|
---|
| 42 | npm install webpack-dev-server --save-dev
|
---|
| 43 | ```
|
---|
| 44 |
|
---|
| 45 | _Note: While you can install and run webpack-dev-server globally, we recommend
|
---|
| 46 | installing it locally. webpack-dev-server will always use a local installation
|
---|
| 47 | over a global one._
|
---|
| 48 |
|
---|
| 49 | ## Usage
|
---|
| 50 |
|
---|
| 51 | There are two main, recommended methods of using the module:
|
---|
| 52 |
|
---|
| 53 | ### With the CLI
|
---|
| 54 |
|
---|
| 55 | The easiest way to use it is with the CLI. In the directory where your
|
---|
| 56 | `webpack.config.js` is, run:
|
---|
| 57 |
|
---|
| 58 | ```console
|
---|
| 59 | node_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 |
|
---|
| 66 | NPM package.json scripts are a convenient and useful means to run locally installed
|
---|
| 67 | binaries without having to be concerned about their full paths. Simply define a
|
---|
| 68 | script as such:
|
---|
| 69 |
|
---|
| 70 | ```json
|
---|
| 71 | "scripts": {
|
---|
| 72 | "start:dev": "webpack-dev-server"
|
---|
| 73 | }
|
---|
| 74 | ```
|
---|
| 75 |
|
---|
| 76 | And run the following in your terminal/console:
|
---|
| 77 |
|
---|
| 78 | ```console
|
---|
| 79 | npm run start:dev
|
---|
| 80 | ```
|
---|
| 81 |
|
---|
| 82 | NPM will automagically reference the binary in `node_modules` for you, and
|
---|
| 83 | execute the file or command.
|
---|
| 84 |
|
---|
| 85 | ### The Result
|
---|
| 86 |
|
---|
| 87 | Either method will start a server instance and begin listening for connections
|
---|
| 88 | from `localhost` on port `8080`.
|
---|
| 89 |
|
---|
| 90 | webpack-dev-server is configured by default to support live-reload of files as
|
---|
| 91 | you edit your assets while the server is running.
|
---|
| 92 |
|
---|
| 93 | See [**the documentation**][docs-url] for more use cases and options.
|
---|
| 94 |
|
---|
| 95 | ## Browser Support
|
---|
| 96 |
|
---|
| 97 | While `webpack-dev-server` transpiles the client (browser) scripts to an ES5
|
---|
| 98 | state, the project only officially supports the _last two versions of major
|
---|
| 99 | browsers_. We simply don't have the resources to support every whacky
|
---|
| 100 | browser out there.
|
---|
| 101 |
|
---|
| 102 | If you find a bug with an obscure / old browser, we would actively welcome a
|
---|
| 103 | Pull Request to resolve the bug.
|
---|
| 104 |
|
---|
| 105 | ## Support
|
---|
| 106 |
|
---|
| 107 | We do our best to keep Issues in the repository focused on bugs, features, and
|
---|
| 108 | needed modifications to the code for the module. Because of that, we ask users
|
---|
| 109 | with general support, "how-to", or "why isn't this working" questions to try one
|
---|
| 110 | of the other support channels that are available.
|
---|
| 111 |
|
---|
| 112 | Your 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
|
---|
| 114 | of those docs, please head over to the [webpack.js.org repo][wjo-url] and open a
|
---|
| 115 | pull request.
|
---|
| 116 |
|
---|
| 117 | From there, we encourage users to visit the [webpack Gitter chat][chat-url] and
|
---|
| 118 | talk to the fine folks there. If your quest for answers comes up dry in chat,
|
---|
| 119 | head over to [StackOverflow][stack-url] and do a quick search or open a new
|
---|
| 120 | question. Remember; It's always much easier to answer questions that include your
|
---|
| 121 | `webpack.config.js` and relevant files!
|
---|
| 122 |
|
---|
| 123 | If you're twitter-savvy you can tweet [#webpack][hash-url] with your question
|
---|
| 124 | and someone should be able to reach out and lend a hand.
|
---|
| 125 |
|
---|
| 126 | If you have discovered a :bug:, have a feature suggestion, or would like to see
|
---|
| 127 | a modification, please feel free to create an issue on Github. _Note: The issue
|
---|
| 128 | template isn't optional, so please be sure not to remove it, and please fill it
|
---|
| 129 | out completely._
|
---|
| 130 |
|
---|
| 131 | ## Contributing
|
---|
| 132 |
|
---|
| 133 | We welcome your contributions! Please have a read of [CONTRIBUTING.md](CONTRIBUTING.md) for more information on how to get involved.
|
---|
| 134 |
|
---|
| 135 | ## Attribution
|
---|
| 136 |
|
---|
| 137 | This 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
|
---|