{"id":13418881,"url":"https://github.com/webpack/webpack-dev-server","last_synced_at":"2025-05-13T17:04:12.772Z","repository":{"id":4692726,"uuid":"5839692","full_name":"webpack/webpack-dev-server","owner":"webpack","description":"Serves a webpack app. Updates the browser on changes. Documentation https://webpack.js.org/configuration/dev-server/.","archived":false,"fork":false,"pushed_at":"2025-05-06T02:49:41.000Z","size":63921,"stargazers_count":7827,"open_issues_count":37,"forks_count":1464,"subscribers_count":116,"default_branch":"master","last_synced_at":"2025-05-06T16:14:50.386Z","etag":null,"topics":["hot-reload","server","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/webpack.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"open_collective":"webpack"}},"created_at":"2012-09-17T10:52:18.000Z","updated_at":"2025-05-06T14:58:42.000Z","dependencies_parsed_at":"2023-09-24T12:30:45.057Z","dependency_job_id":"7daf20b2-6185-4c69-94ef-8e60e20a2c90","html_url":"https://github.com/webpack/webpack-dev-server","commit_stats":{"total_commits":2583,"total_committers":288,"mean_commits":8.96875,"dds":0.7491289198606272,"last_synced_commit":"94a2443c8568c0ab4656d850b31499f5824bb0b6"},"previous_names":[],"tags_count":160,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpack%2Fwebpack-dev-server","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpack%2Fwebpack-dev-server/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpack%2Fwebpack-dev-server/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpack%2Fwebpack-dev-server/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webpack","download_url":"https://codeload.github.com/webpack/webpack-dev-server/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252843807,"owners_count":21812949,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hot-reload","server","webpack"],"created_at":"2024-07-30T22:01:08.328Z","updated_at":"2025-05-13T17:04:12.737Z","avatar_url":"https://github.com/webpack.png","language":"JavaScript","readme":"\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://github.com/webpack/webpack\"\u003e\n    \u003cimg width=\"200\" height=\"200\" src=\"https://webpack.js.org/assets/icon-square-big.svg\"\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n[![npm][npm]][npm-url]\n[![node][node]][node-url]\n[![tests][tests]][tests-url]\n[![coverage][cover]][cover-url]\n[![discussion][discussion]][discussion-url]\n[![downloads][downloads]][npm-url]\n[![contributors][contributors]][contributors-url]\n\n# webpack-dev-server\n\nUse [webpack](https://webpack.js.org) with a development server that provides\nlive reloading. This should be used for **development only**.\n\nIt uses [webpack-dev-middleware][middleware-url] under the hood, which provides\nfast in-memory access to the webpack assets.\n\n## Table of Contents\n\n- [Getting Started](#getting-started)\n- [Usage](#usage)\n  - [With the CLI](#with-the-cli)\n  - [With NPM Scripts](#with-npm-scripts)\n  - [With the API](#with-the-api)\n  - [With TypeScript](#with-typescript)\n  - [The Result](#the-result)\n- [Browser Support](#browser-support)\n- [Support](#support)\n- [Contributing](#contributing)\n- [Attribution](#attribution)\n- [License](#license)\n\n## Getting Started\n\nFirst things first, install the module:\n\n```console\nnpm install webpack-dev-server --save-dev\n```\n\nor\n\n```console\nyarn add -D webpack-dev-server\n```\n\nor\n\n```console\npnpm add -D webpack-dev-server\n```\n\n_Note: While you can install and run webpack-dev-server globally, we recommend\ninstalling it locally. webpack-dev-server will always use a local installation\nover a global one._\n\n## Usage\n\nThere are two main, recommended methods of using the module:\n\n### With the CLI\n\nThe easiest way to use it is with the [webpack CLI](https://webpack.js.org/api/cli/). In the directory where your\n`webpack.config.js` is, run:\n\n```console\nnpx webpack serve\n```\n\nFollowing options are available with `webpack serve`:\n\n```\nUsage: webpack serve|server|s [entries...] [options]\n\nRun the webpack dev server.\n\nOptions:\n  -c, --config \u003cvalue...\u003e                             Provide path to a webpack configuration file e.g. ./webpack.config.js.\n  --config-name \u003cvalue...\u003e                            Name of the configuration to use.\n  -m, --merge                                         Merge two or more configurations using 'webpack-merge'.\n  --disable-interpret                                 Disable interpret for loading the config file.\n  --env \u003cvalue...\u003e                                    Environment passed to the configuration when it is a function.\n  --node-env \u003cvalue\u003e                                  Sets process.env.NODE_ENV to the specified value.\n  --define-process-env-node-env \u003cvalue\u003e               Sets process.env.NODE_ENV to the specified value. (Currently an alias for `--node-env`)\n  --analyze                                           It invokes webpack-bundle-analyzer plugin to get bundle information.\n  --progress [value]                                  Print compilation progress during build.\n  -j, --json [value]                                  Prints result as JSON or store it in a file.\n  --fail-on-warnings                                  Stop webpack-cli process with non-zero exit code on warnings from webpack\n  -d, --devtool \u003cvalue\u003e                               A developer tool to enhance debugging (false | eval | [inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map).\n  --no-devtool                                        Negative 'devtool' option.\n  --entry \u003cvalue...\u003e                                  A module that is loaded upon startup. Only the last one is exported.\n  --mode \u003cvalue\u003e                                      Enable production optimizations or development hints.\n  --name \u003cvalue\u003e                                      Name of the configuration. Used when loading multiple configurations.\n  -o, --output-path \u003cvalue\u003e                           The output directory as **absolute path** (required).\n  --stats [value]                                     Stats options object or preset name.\n  --no-stats                                          Negative 'stats' option.\n  -t, --target \u003cvalue...\u003e                             Environment to build for. Environment to build for. An array of environments to build for all of them when possible.\n  --no-target                                         Negative 'target' option.\n  --watch-options-stdin                               Stop watching when stdin stream has ended.\n  --no-watch-options-stdin                            Negative 'watch-options-stdin' option.\n  --allowed-hosts \u003cvalue...\u003e                          Allows to enumerate the hosts from which access to the dev server are allowed (useful when you are proxying dev server, by default is 'auto').\n  --allowed-hosts-reset                               Clear all items provided in 'allowedHosts' configuration. Allows to enumerate the hosts from which access to the dev server are allowed (useful when you are proxying dev server, by default is 'auto').\n  --bonjour                                           Allows to broadcasts dev server via ZeroConf networking on start.\n  --no-bonjour                                        Disallows to broadcasts dev server via ZeroConf networking on start.\n  --no-client                                         Disables client script.\n  --client-logging \u003cvalue\u003e                            Allows to set log level in the browser.\n  --client-overlay                                    Enables a full-screen overlay in the browser when there are compiler errors or warnings.\n  --no-client-overlay                                 Disables the full-screen overlay in the browser when there are compiler errors or warnings.\n  --client-overlay-errors                             Enables a full-screen overlay in the browser when there are compiler errors.\n  --no-client-overlay-errors                          Disables the full-screen overlay in the browser when there are compiler errors.\n  --client-overlay-warnings                           Enables a full-screen overlay in the browser when there are compiler warnings.\n  --no-client-overlay-warnings                        Disables the full-screen overlay in the browser when there are compiler warnings.\n  --client-overlay-runtime-errors                     Enables a full-screen overlay in the browser when there are uncaught runtime errors.\n  --no-client-overlay-runtime-errors                  Disables the full-screen overlay in the browser when there are uncaught runtime errors.\n  --client-overlay-trusted-types-policy-name \u003cvalue\u003e  The name of a Trusted Types policy for the overlay. Defaults to 'webpack-dev-server#overlay'.\n  --client-progress                                   Prints compilation progress in percentage in the browser.\n  --no-client-progress                                Does not print compilation progress in percentage in the browser.\n  --client-reconnect [value]                          Tells dev-server the number of times it should try to reconnect the client.\n  --no-client-reconnect                               Tells dev-server to not to try to reconnect the client.\n  --client-web-socket-transport \u003cvalue\u003e               Allows to set custom web socket transport to communicate with dev server.\n  --client-web-socket-url \u003cvalue\u003e                     Allows to specify URL to web socket server (useful when you're proxying dev server and client script does not always know where to connect to).\n  --client-web-socket-url-hostname \u003cvalue\u003e            Tells clients connected to devServer to use the provided hostname.\n  --client-web-socket-url-pathname \u003cvalue\u003e            Tells clients connected to devServer to use the provided path to connect.\n  --client-web-socket-url-password \u003cvalue\u003e            Tells clients connected to devServer to use the provided password to authenticate.\n  --client-web-socket-url-port \u003cvalue\u003e                Tells clients connected to devServer to use the provided port.\n  --client-web-socket-url-protocol \u003cvalue\u003e            Tells clients connected to devServer to use the provided protocol.\n  --client-web-socket-url-username \u003cvalue\u003e            Tells clients connected to devServer to use the provided username to authenticate.\n  --compress                                          Enables gzip compression for everything served.\n  --no-compress                                       Disables gzip compression for everything served.\n  --history-api-fallback                              Allows to proxy requests through a specified index page (by default 'index.html'), useful for Single Page Applications that utilise the HTML5 History API.\n  --no-history-api-fallback                           Disallows to proxy requests through a specified index page.\n  --host \u003cvalue\u003e                                      Allows to specify a hostname to use.\n  --hot [value]                                       Enables Hot Module Replacement.\n  --no-hot                                            Disables Hot Module Replacement.\n  --ipc [value]                                       Listen to a unix socket.\n  --live-reload                                       Enables reload/refresh the page(s) when file changes are detected (enabled by default).\n  --no-live-reload                                    Disables reload/refresh the page(s) when file changes are detected (enabled by default).\n  --open [value...]                                   Allows to configure dev server to open the browser(s) and page(s) after server had been started (set it to true to open your default browser).\n  --no-open                                           Does not open the default browser.\n  --open-target \u003cvalue...\u003e                            Opens specified page in browser.\n  --open-app-name \u003cvalue...\u003e                          Open specified browser.\n  --open-reset                                        Clear all items provided in 'open' configuration. Allows to configure dev server to open the browser(s) and page(s) after server had been started (set it to true to open your default browser).\n  --open-target-reset                                 Clear all items provided in 'open.target' configuration. Opens specified page in browser.\n  --open-app-name-reset                               Clear all items provided in 'open.app.name' configuration. Open specified browser.\n  --port \u003cvalue\u003e                                      Allows to specify a port to use.\n  --server-type \u003cvalue\u003e                               Allows to set server and options (by default 'http').\n  --server-options-passphrase \u003cvalue\u003e                 Passphrase for a pfx file.\n  --server-options-request-cert                       Request for an SSL certificate.\n  --no-server-options-request-cert                    Does not request for an SSL certificate.\n  --server-options-ca \u003cvalue...\u003e                      Path to an SSL CA certificate or content of an SSL CA certificate.\n  --server-options-ca-reset                           Clear all items provided in 'server.options.ca' configuration. Path to an SSL CA certificate or content of an SSL CA certificate.\n  --server-options-cert \u003cvalue...\u003e                    Path to an SSL certificate or content of an SSL certificate.\n  --server-options-cert-reset                         Clear all items provided in 'server.options.cert' configuration. Path to an SSL certificate or content of an SSL certificate.\n  --server-options-crl \u003cvalue...\u003e                     Path to PEM formatted CRLs (Certificate Revocation Lists) or content of PEM formatted CRLs (Certificate Revocation Lists).\n  --server-options-crl-reset                          Clear all items provided in 'server.options.crl' configuration. Path to PEM formatted CRLs (Certificate Revocation Lists) or content of PEM formatted CRLs (Certificate Revocation Lists).\n  --server-options-key \u003cvalue...\u003e                     Path to an SSL key or content of an SSL key.\n  --server-options-key-reset                          Clear all items provided in 'server.options.key' configuration. Path to an SSL key or content of an SSL key.\n  --server-options-pfx \u003cvalue...\u003e                     Path to an SSL pfx file or content of an SSL pfx file.\n  --server-options-pfx-reset                          Clear all items provided in 'server.options.pfx' configuration. Path to an SSL pfx file or content of an SSL pfx file.\n  --static [value...]                                 Allows to configure options for serving static files from directory (by default 'public' directory).\n  --no-static                                         Disallows to configure options for serving static files from directory.\n  --static-directory \u003cvalue...\u003e                       Directory for static contents.\n  --static-public-path \u003cvalue...\u003e                     The static files will be available in the browser under this public path.\n  --static-serve-index                                Tells dev server to use serveIndex middleware when enabled.\n  --no-static-serve-index                             Does not tell dev server to use serveIndex middleware.\n  --static-watch                                      Watches for files in static content directory.\n  --no-static-watch                                   Does not watch for files in static content directory.\n  --static-reset                                      Clear all items provided in 'static' configuration. Allows to configure options for serving static files from directory (by default 'public' directory).\n  --static-public-path-reset                          Clear all items provided in 'static.publicPath' configuration. The static files will be available in the browser under this public path.\n  --watch-files \u003cvalue...\u003e                            Allows to configure list of globs/directories/files to watch for file changes.\n  --watch-files-reset                                 Clear all items provided in 'watchFiles' configuration. Allows to configure list of globs/directories/files to watch for file changes.\n  --no-web-socket-server                              Disallows to set web socket server and options.\n  --web-socket-server-type \u003cvalue\u003e                    Allows to set web socket server and options (by default 'ws').\n\nGlobal options:\n  --color                                             Enable colors on console.\n  --no-color                                          Disable colors on console.\n  -v, --version                                       Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and commands.\n  -h, --help [verbose]                                Display help for commands and options.\n\nTo see list of all supported commands and options run 'webpack --help=verbose'.\n\nWebpack documentation: https://webpack.js.org/.\nCLI documentation: https://webpack.js.org/api/cli/.\nMade with ♥ by the webpack team.\n```\n\n\u003e [!NOTE]\n\u003e\n\u003e _Detailed documentation for above options is available on this [link](https://webpack.js.org/configuration/dev-server/)._\n\n### With NPM Scripts\n\nNPM package.json scripts are a convenient and useful means to run locally installed\nbinaries without having to be concerned about their full paths. Simply define a\nscript as such:\n\n```json\n{\n  \"scripts\": {\n    \"serve\": \"webpack serve\"\n  }\n}\n```\n\nAnd run the following in your terminal/console:\n\n```console\nnpm run serve\n```\n\nNPM will automatically refer to the the binary in `node_modules` for you, and\nexecute the file or command.\n\n### With the API\n\nWhile it's recommended to run webpack-dev-server via the CLI, you may also choose to start a server via the API.\n\nSee the related [API documentation for `webpack-dev-server`](https://webpack.js.org/api/webpack-dev-server/).\n\n### With TypeScript\n\nIf you use TypeScript in the webpack config, you'll need to properly type `devServer` property in order to avoid TS errors (e.g. `'devServer' does not exist in type 'Configuration'`). For that use either:\n\n```ts\n/// \u003creference path=\"node_modules/webpack-dev-server/types/lib/Server.d.ts\"/\u003e\nimport type { Configuration } from \"webpack\";\n\n// Your logic\n```\n\nOr you can import the type from `webpack-dev-server`, i.e.\n\n```ts\nimport type { Configuration as DevServerConfiguration } from \"webpack-dev-server\";\nimport type { Configuration } from \"webpack\";\n\nconst devServer: DevServerConfiguration = {};\nconst config: Configuration = { devServer };\n\n// module.exports\nexport default config;\n```\n\n### The Result\n\nEither method will start a server instance and begin listening for connections\nfrom `localhost` on port `8080`.\n\nwebpack-dev-server is configured by default to support live-reload of files as\nyou edit your assets while the server is running.\n\nSee [**the documentation**][docs-url] for more use cases and options.\n\n## Browser Support\n\nWhile `webpack-dev-server` transpiles the client (browser) scripts to an ES5\nstate, the project only officially supports the _last two versions of major\nbrowsers_. We simply don't have the resources to support every whacky\nbrowser out there.\n\nIf you find a bug with an obscure / old browser, we would actively welcome a\nPull Request to resolve the bug.\n\n## Support\n\nWe do our best to keep issues in the repository focused on bugs, features, and\nneeded modifications to the code for the module. Because of that, we ask users\nwith general support, \"how-to\", or \"why isn't this working\" questions to try one\nof the other support channels that are available.\n\nYour first-stop-shop for support for webpack-dev-server should be the excellent\n[documentation][docs-url] for the module. If you see an opportunity for improvement\nof those docs, please head over to the [webpack.js.org repo][wjo-url] and open a\npull request.\n\nFrom there, we encourage users to visit the [webpack discussions][discussion-url] and\ntalk to the fine folks there. If your quest for answers comes up dry in chat,\nhead over to [StackOverflow][stack-url] and do a quick search or open a new\nquestion. Remember; It's always much easier to answer questions that include your\n`webpack.config.js` and relevant files!\n\nIf you're twitter-savvy you can tweet [#webpack][hash-url] with your question\nand someone should be able to reach out and lend a hand.\n\nIf you have discovered a :bug:, have a feature suggestion, or would like to see\na modification, please feel free to create an issue on Github. _Note: The issue\ntemplate isn't optional, so please be sure not to remove it, and please fill it\nout completely._\n\n## Contributing\n\nWe welcome your contributions! Please have a read of [CONTRIBUTING.md](CONTRIBUTING.md) for more information on how to get involved.\n\n## Attribution\n\nThis project is heavily inspired by [peerigon/nof5](https://github.com/peerigon/nof5).\n\n## License\n\n#### [MIT](./LICENSE)\n\n[npm]: https://img.shields.io/npm/v/webpack-dev-server.svg\n[npm-url]: https://npmjs.com/package/webpack-dev-server\n[node]: https://img.shields.io/node/v/webpack-dev-server.svg\n[node-url]: https://nodejs.org\n[tests]: https://github.com/webpack/webpack-dev-server/workflows/webpack-dev-server/badge.svg\n[tests-url]: https://github.com/webpack/webpack-dev-server/actions?query=workflow%3Awebpack-dev-server\n[cover]: https://codecov.io/gh/webpack/webpack-dev-server/branch/master/graph/badge.svg\n[cover-url]: https://codecov.io/gh/webpack/webpack-dev-server\n[discussion]: https://img.shields.io/github/discussions/webpack/webpack\n[discussion-url]: https://github.com/webpack/webpack/discussions\n[docs-url]: https://webpack.js.org/configuration/dev-server/#devserver\n[hash-url]: https://twitter.com/search?q=webpack\n[middleware-url]: https://github.com/webpack/webpack-dev-middleware\n[stack-url]: https://stackoverflow.com/questions/tagged/webpack-dev-server\n[uglify-url]: https://github.com/webpack-contrib/uglifyjs-webpack-plugin\n[wjo-url]: https://github.com/webpack/webpack.js.org\n[downloads]: https://img.shields.io/npm/dm/webpack-dev-server.svg\n[contributors-url]: https://github.com/webpack/webpack-dev-server/graphs/contributors\n[contributors]: https://img.shields.io/github/contributors/webpack/webpack-dev-server.svg\n","funding_links":["https://opencollective.com/webpack"],"categories":["JavaScript","Getting started","webpack","打包工具"],"sub_categories":["webpack 辅助工具、Loader 和插件"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebpack%2Fwebpack-dev-server","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebpack%2Fwebpack-dev-server","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebpack%2Fwebpack-dev-server/lists"}