123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163 |
- <div align="center">
- <a href="https://github.com/webpack/webpack">
- <img width="200" height="200" src="https://webpack.js.org/assets/icon-square-big.svg">
- </a>
- </div>
- [![npm][npm]][npm-url]
- [![node][node]][node-url]
- [![deps][deps]][deps-url]
- [![tests][tests]][tests-url]
- [![coverage][cover]][cover-url]
- [![chat][chat]][chat-url]
- [![downloads][downloads]][npm-url]
- [![contributors][contributors]][contributors-url]
- # webpack-dev-server
- Use [webpack](https://webpack.js.org) with a development server that provides
- live reloading. This should be used for **development only**.
- It uses [webpack-dev-middleware][middleware-url] under the hood, which provides
- fast in-memory access to the webpack assets.
- ## Table of Contents
- - [Getting Started](#getting-started)
- - [Usage](#usage)
- - [With the CLI](#with-the-cli)
- - [With NPM Scripts](#with-npm-scripts)
- - [The Result](#the-result)
- - [Browser Support](#browser-support)
- - [Support](#support)
- - [Contributing](#contributing)
- - [Attribution](#attribution)
- - [License](#license)
- ## Getting Started
- First things first, install the module:
- ```console
- npm install webpack-dev-server --save-dev
- ```
- _Note: While you can install and run webpack-dev-server globally, we recommend
- installing it locally. webpack-dev-server will always use a local installation
- over a global one._
- ## Usage
- There are two main, recommended methods of using the module:
- ### With the CLI
- The easiest way to use it is with the CLI. In the directory where your
- `webpack.config.js` is, run:
- ```console
- node_modules/.bin/webpack-dev-server
- ```
- _**Note**: Many CLI options are available with `webpack-dev-server`. Explore this [link](https://webpack.js.org/configuration/dev-server/)._
- ### With NPM Scripts
- NPM package.json scripts are a convenient and useful means to run locally installed
- binaries without having to be concerned about their full paths. Simply define a
- script as such:
- ```json
- "scripts": {
- "start:dev": "webpack-dev-server"
- }
- ```
- And run the following in your terminal/console:
- ```console
- npm run start:dev
- ```
- NPM will automagically reference the binary in `node_modules` for you, and
- execute the file or command.
- ### The Result
- Either method will start a server instance and begin listening for connections
- from `localhost` on port `8080`.
- webpack-dev-server is configured by default to support live-reload of files as
- you edit your assets while the server is running.
- See [**the documentation**][docs-url] for more use cases and options.
- ## Browser Support
- While `webpack-dev-server` transpiles the client (browser) scripts to an ES5
- state, the project only officially supports the _last two versions of major
- browsers_. We simply don't have the resources to support every whacky
- browser out there.
- If you find a bug with an obscure / old browser, we would actively welcome a
- Pull Request to resolve the bug.
- ## Support
- We do our best to keep Issues in the repository focused on bugs, features, and
- needed modifications to the code for the module. Because of that, we ask users
- with general support, "how-to", or "why isn't this working" questions to try one
- of the other support channels that are available.
- Your first-stop-shop for support for webpack-dev-server should by the excellent
- [documentation][docs-url] for the module. If you see an opportunity for improvement
- of those docs, please head over to the [webpack.js.org repo][wjo-url] and open a
- pull request.
- From there, we encourage users to visit the [webpack Gitter chat][chat-url] and
- talk to the fine folks there. If your quest for answers comes up dry in chat,
- head over to [StackOverflow][stack-url] and do a quick search or open a new
- question. Remember; It's always much easier to answer questions that include your
- `webpack.config.js` and relevant files!
- If you're twitter-savvy you can tweet [#webpack][hash-url] with your question
- and someone should be able to reach out and lend a hand.
- If you have discovered a :bug:, have a feature suggestion, or would like to see
- a modification, please feel free to create an issue on Github. _Note: The issue
- template isn't optional, so please be sure not to remove it, and please fill it
- out completely._
- ## Contributing
- We welcome your contributions! Please have a read of [CONTRIBUTING.md](CONTRIBUTING.md) for more information on how to get involved.
- ## Attribution
- This project is heavily inspired by [peerigon/nof5](https://github.com/peerigon/nof5).
- ## License
- #### [MIT](./LICENSE)
- [npm]: https://img.shields.io/npm/v/webpack-dev-server.svg
- [npm-url]: https://npmjs.com/package/webpack-dev-server
- [node]: https://img.shields.io/node/v/webpack-dev-server.svg
- [node-url]: https://nodejs.org
- [deps]: https://david-dm.org/webpack/webpack-dev-server.svg
- [deps-url]: https://david-dm.org/webpack/webpack-dev-server
- [tests]: https://dev.azure.com/webpack/webpack-dev-server/_apis/build/status/webpack.webpack-dev-server?branchName=master
- [tests-url]: https://dev.azure.com/webpack/webpack-dev-server/_build/latest?definitionId=7&branchName=master
- [cover]: https://codecov.io/gh/webpack/webpack-dev-server/branch/master/graph/badge.svg
- [cover-url]: https://codecov.io/gh/webpack/webpack-dev-server
- [chat]: https://badges.gitter.im/webpack/webpack.svg
- [chat-url]: https://gitter.im/webpack/webpack
- [docs-url]: https://webpack.js.org/configuration/dev-server/#devserver
- [hash-url]: https://twitter.com/search?q=webpack
- [middleware-url]: https://github.com/webpack/webpack-dev-middleware
- [stack-url]: https://stackoverflow.com/questions/tagged/webpack-dev-server
- [uglify-url]: https://github.com/webpack-contrib/uglifyjs-webpack-plugin
- [wjo-url]: https://github.com/webpack/webpack.js.org
- [downloads]: https://img.shields.io/npm/dm/webpack-dev-server.svg
- [contributors-url]: https://github.com/webpack/webpack-dev-server/graphs/contributors
- [contributors]: https://img.shields.io/github/contributors/webpack/webpack-dev-server.svg
|