You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

163 lines
5.8 KiB

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