├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .gitattributes ├── .github ├── CODEOWNERS ├── FUNDING.yml ├── ISSUE_TEMPLATE.md ├── ISSUE_TEMPLATE │ ├── BUG.md │ ├── DOCS.md │ ├── FEATURE.md │ ├── MODIFICATION.md │ └── SUPPORT.md ├── PULL_REQUEST_TEMPLATE.md ├── dependabot.yml └── workflows │ └── nodejs.yml ├── .gitignore ├── .husky ├── commit-msg └── pre-commit ├── .prettierignore ├── .versionrc ├── CHANGELOG.md ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── babel.config.js ├── bin ├── cli-flags.js ├── process-arguments.js └── webpack-dev-server.js ├── client-src ├── clients │ ├── SockJSClient.js │ └── WebSocketClient.js ├── index.js ├── modules │ ├── logger │ │ ├── SyncBailHookFake.js │ │ └── index.js │ ├── sockjs-client │ │ └── index.js │ └── strip-ansi │ │ └── index.js ├── overlay.js ├── socket.js ├── utils │ ├── createSocketURL.js │ ├── getCurrentScriptSource.js │ ├── log.js │ ├── parseURL.js │ ├── reloadApp.js │ └── sendMessage.js └── webpack.config.js ├── commitlint.config.js ├── examples ├── .assets │ ├── favicon.ico │ ├── geomanist-medium.woff │ ├── geomanist-medium.woff2 │ ├── icon-square.svg │ ├── layout.html │ └── style.css ├── README.md ├── api │ ├── middleware │ │ ├── README.md │ │ ├── app.js │ │ ├── server.js │ │ └── webpack.config.js │ ├── simple │ │ ├── README.md │ │ ├── app.js │ │ ├── server.js │ │ └── webpack.config.js │ ├── start-callback │ │ ├── README.md │ │ ├── app.js │ │ ├── server.js │ │ └── webpack.config.js │ ├── start │ │ ├── README.md │ │ ├── app.js │ │ ├── server.js │ │ └── webpack.config.js │ ├── stop-callback │ │ ├── README.md │ │ ├── app.js │ │ ├── server.js │ │ └── webpack.config.js │ └── stop │ │ ├── README.md │ │ ├── app.js │ │ ├── server.js │ │ └── webpack.config.js ├── bonjour │ ├── boolean │ │ ├── README.md │ │ ├── app.js │ │ └── webpack.config.js │ └── object │ │ ├── README.md │ │ ├── app.js │ │ └── webpack.config.js ├── client │ ├── logging │ │ ├── README.md │ │ ├── app.js │ │ └── webpack.config.js │ ├── overlay │ │ ├── README.md │ │ ├── app.js │ │ └── webpack.config.js │ ├── progress │ │ ├── README.md │ │ ├── app.js │ │ └── webpack.config.js │ ├── reconnect │ │ ├── false │ │ │ ├── README.md │ │ │ ├── app.js │ │ │ └── webpack.config.js │ │ ├── number │ │ │ ├── README.md │ │ │ ├── app.js │ │ │ └── webpack.config.js │ │ └── true │ │ │ ├── README.md │ │ │ ├── app.js │ │ │ └── webpack.config.js │ └── web-socket-url │ │ ├── README.md │ │ ├── app.js │ │ ├── index.html │ │ └── webpack.config.js ├── compression │ ├── false │ │ ├── README.md │ │ ├── app.js │ │ └── webpack.config.js │ └── true │ │ ├── README.md │ │ ├── app.js │ │ └── webpack.config.js ├── default │ ├── README.md │ ├── app.js │ ├── pixels.png │ ├── style.less │ ├── svg.svg │ └── webpack.config.js ├── dev-middleware │ ├── README.md │ ├── app.js │ └── webpack.config.js ├── general │ ├── config-array │ │ ├── README.md │ │ ├── app.js │ │ ├── pixels.png │ │ ├── style.less │ │ ├── svg.svg │ │ └── webpack.config.js │ ├── config-promise │ │ ├── README.md │ │ ├── app.js │ │ ├── index.html │ │ └── webpack.config.js │ ├── proxy-advanced │ │ ├── README.md │ │ ├── app.js │ │ ├── bypass.html │ │ └── webpack.config.js │ ├── proxy-hot-reload │ │ ├── README.md │ │ ├── app.js │ │ ├── proxy-config.js │ │ └── webpack.config.js │ ├── proxy-simple │ │ ├── README.md │ │ ├── app.js │ │ └── webpack.config.js │ ├── universal-config │ │ ├── README.md │ │ ├── client.js │ │ ├── server.js │ │ └── webpack.config.js │ └── webworker │ │ ├── README.md │ │ ├── web.js │ │ ├── webpack.config.js │ │ └── worker.js ├── headers │ ├── array │ │ ├── README.md │ │ ├── app.js │ │ └── webpack.config.js │ ├── function │ │ ├── README.md │ │ ├── app.js │ │ └── webpack.config.js │ └── object │ │ ├── README.md │ │ ├── app.js │ │ └── webpack.config.js ├── history-api-fallback │ ├── README.md │ ├── app.js │ ├── file.txt │ └── webpack.config.js ├── hmr │ ├── boolean │ │ ├── README.md │ │ ├── app.js │ │ ├── example.js │ │ └── webpack.config.js │ └── only │ │ ├── README.md │ │ ├── app.js │ │ ├── example.js │ │ └── webpack.config.js ├── host-and-port │ ├── README.md │ ├── app.js │ └── webpack.config.js ├── http2 │ ├── boolean │ │ ├── README.md │ │ ├── app.js │ │ └── webpack.config.js │ └── with-https-configuration │ │ ├── README.md │ │ ├── app.js │ │ ├── ssl │ │ ├── ca.pem │ │ ├── server.crt │ │ ├── server.key │ │ └── server.pfx │ │ └── webpack.config.js ├── https │ ├── boolean │ │ ├── README.md │ │ ├── app.js │ │ └── webpack.config.js │ └── object │ │ ├── README.md │ │ ├── app.js │ │ ├── ssl │ │ ├── ca.pem │ │ ├── server.crt │ │ ├── server.key │ │ └── server.pfx │ │ └── webpack.config.js ├── ipc │ ├── README.md │ ├── app.js │ └── webpack.config.js ├── magic-html │ ├── README.md │ ├── app.js │ └── webpack.config.js ├── multi-compiler │ ├── README.md │ ├── app.js │ └── webpack.config.js ├── node-false │ ├── README.md │ ├── app.js │ └── webpack.config.js ├── on-after-setup-middleware │ ├── README.md │ ├── app.js │ └── webpack.config.js ├── on-before-setup-middleware │ ├── README.md │ ├── app.js │ └── webpack.config.js ├── on-listening │ ├── README.md │ ├── app.js │ └── webpack.config.js ├── open-target-multiple │ ├── README.md │ ├── app1.js │ ├── app2.js │ └── webpack.config.js ├── open-target │ ├── README.md │ ├── app.js │ └── webpack.config.js ├── proxy │ ├── README.md │ ├── app.js │ └── webpack.config.js ├── server │ ├── https │ │ ├── README.md │ │ ├── app.js │ │ ├── ssl │ │ │ ├── ca.pem │ │ │ ├── server.crt │ │ │ ├── server.key │ │ │ └── server.pfx │ │ └── webpack.config.js │ └── spdy │ │ ├── README.md │ │ ├── app.js │ │ ├── ssl │ │ ├── ca.pem │ │ ├── server.crt │ │ ├── server.key │ │ └── server.pfx │ │ └── webpack.config.js ├── setup-middlewares │ ├── README.md │ ├── app.js │ └── webpack.config.js ├── util.js ├── watch-static │ ├── README.md │ ├── app.js │ ├── assets │ │ └── index.html │ ├── css │ │ └── styles.css │ └── webpack.config.js └── web-socket-server │ ├── sockjs │ ├── README.md │ ├── app.js │ └── webpack.config.js │ └── ws │ ├── README.md │ ├── app.js │ └── webpack.config.js ├── globalSetupTest.js ├── jest.config.js ├── lib ├── Server.js ├── options.json └── servers │ ├── BaseServer.js │ ├── SockJSServer.js │ └── WebsocketServer.js ├── lint-staged.config.js ├── migration-v4.md ├── package-lock.json ├── package.json ├── setupTest.js ├── test ├── __snapshots__ │ ├── normalize-options.test.js.snap.webpack4 │ ├── normalize-options.test.js.snap.webpack5 │ ├── validate-options.test.js.snap.webpack4 │ └── validate-options.test.js.snap.webpack5 ├── cli │ ├── __snapshots__ │ │ ├── basic.test.js.snap.webpack4 │ │ ├── basic.test.js.snap.webpack5 │ │ ├── bonjour-option.test.js.snap.webpack4 │ │ ├── bonjour-option.test.js.snap.webpack5 │ │ ├── colors.test.js.snap.webpack4 │ │ ├── colors.test.js.snap.webpack5 │ │ ├── historyApiFallback-option.test.js.snap.webpack4 │ │ ├── historyApiFallback-option.test.js.snap.webpack5 │ │ ├── host-option.test.js.snap.webpack4 │ │ ├── host-option.test.js.snap.webpack5 │ │ ├── http2-option.test.js.snap.webpack4 │ │ ├── http2-option.test.js.snap.webpack5 │ │ ├── https-option.test.js.snap.webpack4 │ │ ├── https-option.test.js.snap.webpack5 │ │ ├── ipc-option.test.js.snap.webpack4 │ │ ├── ipc-option.test.js.snap.webpack5 │ │ ├── port-option.test.js.snap.webpack4 │ │ ├── port-option.test.js.snap.webpack5 │ │ ├── server-option.test.js.snap.webpack4 │ │ ├── server-option.test.js.snap.webpack5 │ │ ├── static-option.test.js.snap.webpack4 │ │ ├── static-option.test.js.snap.webpack5 │ │ ├── watchFiles-option.test.js.snap.webpack4 │ │ └── watchFiles-option.test.js.snap.webpack5 │ ├── allowedHosts-option.test.js │ ├── basic.test.js │ ├── bonjour-option.test.js │ ├── client-option.test.js │ ├── colors.test.js │ ├── compress-option.test.js │ ├── historyApiFallback-option.test.js │ ├── host-option.test.js │ ├── hot-option.test.js │ ├── http2-option.test.js │ ├── https-option.test.js │ ├── ipc-option.test.js │ ├── liveReload-option.test.js │ ├── magicHtml-option.test.js │ ├── open-option.test.js │ ├── port-option.test.js │ ├── server-option.test.js │ ├── static-option.test.js │ ├── watchFiles-option.test.js │ └── webSocketServer-option.test.js ├── client │ ├── __snapshots__ │ │ ├── index.test.js.snap.webpack4 │ │ ├── index.test.js.snap.webpack5 │ │ ├── socket-helper.test.js.snap.webpack4 │ │ └── socket-helper.test.js.snap.webpack5 │ ├── bundle.test.js │ ├── clients │ │ ├── SockJSClient.test.js │ │ ├── WebsocketClient.test.js │ │ └── __snapshots__ │ │ │ ├── SockJSClient.test.js.snap.webpack4 │ │ │ ├── SockJSClient.test.js.snap.webpack5 │ │ │ ├── WebsocketClient.test.js.snap.webpack4 │ │ │ └── WebsocketClient.test.js.snap.webpack5 │ ├── index.test.js │ ├── socket-helper.test.js │ └── utils │ │ ├── __snapshots__ │ │ ├── getCurrentScriptSource.test.js.snap.webpack4 │ │ ├── getCurrentScriptSource.test.js.snap.webpack5 │ │ ├── log.test.js.snap.webpack4 │ │ ├── log.test.js.snap.webpack5 │ │ ├── reloadApp.test.js.snap.webpack4 │ │ ├── reloadApp.test.js.snap.webpack5 │ │ ├── sendMessage.test.js.snap.webpack4 │ │ └── sendMessage.test.js.snap.webpack5 │ │ ├── createSocketURL.test.js │ │ ├── getCurrentScriptSource.test.js │ │ ├── log.test.js │ │ ├── reloadApp.test.js │ │ └── sendMessage.test.js ├── e2e │ ├── __snapshots__ │ │ ├── allowed-hosts.test.js.snap.webpack4 │ │ ├── allowed-hosts.test.js.snap.webpack5 │ │ ├── api.test.js.snap.webpack4 │ │ ├── api.test.js.snap.webpack5 │ │ ├── bonjour.test.js.snap.webpack4 │ │ ├── bonjour.test.js.snap.webpack5 │ │ ├── built-in-routes.test.js.snap.webpack4 │ │ ├── built-in-routes.test.js.snap.webpack5 │ │ ├── client-reconnect.test.js.snap.webpack4 │ │ ├── client-reconnect.test.js.snap.webpack5 │ │ ├── client.test.js.snap.webpack4 │ │ ├── client.test.js.snap.webpack5 │ │ ├── compress.test.js.snap.webpack4 │ │ ├── compress.test.js.snap.webpack5 │ │ ├── entry.test.js.snap.webpack4 │ │ ├── entry.test.js.snap.webpack5 │ │ ├── headers.test.js.snap.webpack4 │ │ ├── headers.test.js.snap.webpack5 │ │ ├── history-api-fallback.test.js.snap.webpack4 │ │ ├── history-api-fallback.test.js.snap.webpack5 │ │ ├── host.test.js.snap.webpack4 │ │ ├── host.test.js.snap.webpack5 │ │ ├── hot-and-live-reload.test.js.snap.webpack4 │ │ ├── hot-and-live-reload.test.js.snap.webpack5 │ │ ├── http2.test.js.snap.webpack4 │ │ ├── http2.test.js.snap.webpack5 │ │ ├── https.test.js.snap.webpack4 │ │ ├── https.test.js.snap.webpack5 │ │ ├── ipc.test.js.snap.webpack4 │ │ ├── ipc.test.js.snap.webpack5 │ │ ├── logging.test.js.snap.webpack4 │ │ ├── logging.test.js.snap.webpack5 │ │ ├── magic-html.test.js.snap.webpack4 │ │ ├── magic-html.test.js.snap.webpack5 │ │ ├── mime-types.test.js.snap.webpack4 │ │ ├── mime-types.test.js.snap.webpack5 │ │ ├── module-federation.test.js.snap.webpack4 │ │ ├── module-federation.test.js.snap.webpack5 │ │ ├── multi-compiler.test.js.snap.webpack4 │ │ ├── multi-compiler.test.js.snap.webpack5 │ │ ├── on-after-setup-middleware.test.js.snap.webpack4 │ │ ├── on-after-setup-middleware.test.js.snap.webpack5 │ │ ├── on-before-setup-middleware.test.js.snap.webpack4 │ │ ├── on-before-setup-middleware.test.js.snap.webpack5 │ │ ├── on-listening.test.js.snap.webpack4 │ │ ├── on-listening.test.js.snap.webpack5 │ │ ├── overlay.test.js.snap.webpack4 │ │ ├── overlay.test.js.snap.webpack5 │ │ ├── port.test.js.snap.webpack4 │ │ ├── port.test.js.snap.webpack5 │ │ ├── server-and-client-transport.test.js.snap.webpack4 │ │ ├── server-and-client-transport.test.js.snap.webpack5 │ │ ├── server.test.js.snap.webpack4 │ │ ├── server.test.js.snap.webpack5 │ │ ├── setup-middlewares.test.js.snap.webpack4 │ │ ├── setup-middlewares.test.js.snap.webpack5 │ │ ├── static-directory.test.js.snap.webpack4 │ │ ├── static-directory.test.js.snap.webpack5 │ │ ├── static-public-path.test.js.snap.webpack4 │ │ ├── static-public-path.test.js.snap.webpack5 │ │ ├── stats.test.js.snap.webpack4 │ │ ├── stats.test.js.snap.webpack5 │ │ ├── target.test.js.snap.webpack4 │ │ ├── target.test.js.snap.webpack5 │ │ ├── transport-mode.test.js.snap.webpack4 │ │ ├── transport-mode.test.js.snap.webpack5 │ │ ├── universal-compiler.test.js.snap.webpack4 │ │ ├── universal-compiler.test.js.snap.webpack5 │ │ ├── watch-files.test.js.snap.webpack4 │ │ ├── watch-files.test.js.snap.webpack5 │ │ ├── web-socket-communication.test.js.snap.webpack4 │ │ ├── web-socket-communication.test.js.snap.webpack5 │ │ ├── web-socket-server-url.test.js.snap.webpack4 │ │ ├── web-socket-server-url.test.js.snap.webpack5 │ │ ├── web-socket-server.test.js.snap.webpack4 │ │ └── web-socket-server.test.js.snap.webpack5 │ ├── allowed-hosts.test.js │ ├── api.test.js │ ├── bonjour.test.js │ ├── built-in-routes.test.js │ ├── client-reconnect.test.js │ ├── client.test.js │ ├── compress.test.js │ ├── entry.test.js │ ├── headers.test.js │ ├── history-api-fallback.test.js │ ├── host.test.js │ ├── hot-and-live-reload.test.js │ ├── http2.test.js │ ├── https.test.js │ ├── ipc.test.js │ ├── lazy-compilation.test.js │ ├── logging.test.js │ ├── magic-html.test.js │ ├── mime-types.test.js │ ├── module-federation.test.js │ ├── multi-compiler.test.js │ ├── on-after-setup-middleware.test.js │ ├── on-before-setup-middleware.test.js │ ├── on-listening.test.js │ ├── overlay.test.js │ ├── port.test.js │ ├── progress.test.js │ ├── range-header.test.js │ ├── server-and-client-transport.test.js │ ├── server.test.js │ ├── setup-middlewares.test.js │ ├── static-directory.test.js │ ├── static-public-path.test.js │ ├── stats.test.js │ ├── target.test.js │ ├── watch-files.test.js │ ├── web-socket-communication.test.js │ ├── web-socket-server-url.test.js │ └── web-socket-server.test.js ├── fixtures │ ├── cli-colors-default-stats │ │ ├── foo.js │ │ └── webpack.config.js │ ├── cli-colors-disabled │ │ ├── foo.js │ │ └── webpack.config.js │ ├── cli-colors-enabled │ │ ├── foo.js │ │ └── webpack.config.js │ ├── cli-empty-entry │ │ └── webpack.config.js │ ├── cli-entry-as-descriptor │ │ ├── foo.js │ │ └── webpack.config.js │ ├── cli-multi-entry │ │ ├── bar.js │ │ ├── foo.js │ │ └── webpack.config.js │ ├── cli-promise-config │ │ ├── foo.js │ │ └── webpack.config.js │ ├── cli-single-entry │ │ ├── foo.js │ │ └── webpack.config.js │ ├── cli-target-config │ │ ├── foo.js │ │ └── webpack.config.js │ ├── cli-universal-compiler-config │ │ ├── client.js │ │ ├── server.js │ │ └── webpack.config.js │ ├── cli │ │ ├── foo.js │ │ └── webpack.config.js │ ├── client-config │ │ ├── bar.js │ │ ├── foo.js │ │ ├── index.html │ │ ├── static │ │ │ └── foo.txt │ │ └── webpack.config.js │ ├── custom-client │ │ └── CustomSockJSClient.js │ ├── dev-public-path │ │ ├── foo.js │ │ └── webpack.config.js │ ├── dev-server │ │ ├── bar.js │ │ ├── client-custom-path-config.js │ │ ├── client-default-path-config.js │ │ └── foo.js │ ├── entry-as-function │ │ ├── foo.js │ │ └── webpack.config.js │ ├── historyapifallback-2-config │ │ ├── bar.html │ │ ├── foo.js │ │ ├── other.html │ │ ├── random-file.txt │ │ └── webpack.config.js │ ├── historyapifallback-3-config │ │ ├── bar.html │ │ ├── foo.js │ │ ├── index.html │ │ └── webpack.config.js │ ├── historyapifallback-config │ │ ├── bar.html │ │ ├── foo.js │ │ ├── index.html │ │ └── webpack.config.js │ ├── https-certificate │ │ ├── ca-symlink.pem │ │ ├── ca.pem │ │ ├── server-symlink.crt │ │ ├── server-symlink.key │ │ ├── server-symlink.pfx │ │ ├── server.crt │ │ ├── server.key │ │ └── server.pfx │ ├── lazy-compilation-multiple-entries │ │ ├── one.js │ │ ├── two.js │ │ └── webpack.config.js │ ├── lazy-compilation-single-entry │ │ ├── entry.js │ │ └── webpack.config.js │ ├── mime-types-config │ │ ├── file.custom │ │ ├── foo.js │ │ └── webpack.config.js │ ├── module-federation-config │ │ ├── entry1.js │ │ ├── entry2.js │ │ ├── webpack.config.js │ │ ├── webpack.multi.config.js │ │ ├── webpack.object-entry.config.js │ │ └── webpack.plugin.js │ ├── multi-compiler-one-configuration │ │ ├── foo.js │ │ └── webpack.config.js │ ├── multi-compiler-two-configurations │ │ ├── one.js │ │ ├── two.js │ │ └── webpack.config.js │ ├── multi-public-path-config │ │ ├── bar.js │ │ ├── baz.js │ │ ├── foo.js │ │ ├── test.html │ │ └── webpack.config.js │ ├── overlay-config │ │ ├── foo.js │ │ └── webpack.config.js │ ├── provide-plugin-custom │ │ ├── foo.js │ │ └── webpack.config.js │ ├── provide-plugin-default │ │ ├── foo.js │ │ └── webpack.config.js │ ├── provide-plugin-sockjs-config │ │ ├── foo.js │ │ └── webpack.config.js │ ├── provide-plugin-ws-config │ │ ├── foo.js │ │ └── webpack.config.js │ ├── proxy-config │ │ ├── foo.js │ │ ├── index.html │ │ └── webpack.config.js │ ├── reload-config-2 │ │ ├── foo.js │ │ └── webpack.config.js │ ├── reload-config │ │ ├── foo.js │ │ └── webpack.config.js │ ├── schema │ │ └── webpack.config.simple.js │ ├── simple-config-other │ │ ├── foo.js │ │ └── webpack.config.js │ ├── simple-config │ │ ├── foo.js │ │ └── webpack.config.js │ ├── static-config │ │ ├── foo.js │ │ ├── other │ │ │ └── foo.html │ │ ├── public │ │ │ ├── assets │ │ │ │ ├── example.txt │ │ │ │ └── other.txt │ │ │ ├── bar │ │ │ │ └── index.html │ │ │ ├── foo.wasm │ │ │ ├── index.html │ │ │ ├── node_modules │ │ │ │ └── .gitkeep │ │ │ └── other.html │ │ ├── static │ │ │ └── index.html │ │ └── webpack.config.js │ ├── static │ │ ├── foo.js │ │ ├── static │ │ │ └── index.html │ │ └── webpack.config.js │ └── universal-compiler-config │ │ ├── browser.js │ │ ├── server.js │ │ └── webpack.config.js ├── helpers │ ├── ExitOnDonePlugin.js │ ├── conditional-test.js │ ├── custom-http.js │ ├── isWebpack5.js │ ├── normalize-options.js │ ├── puppeteer-constants.js │ ├── run-browser.js │ ├── snapshotResolver.js │ ├── test-bin.js │ └── test-server.js ├── normalize-options.test.js ├── ports-map.js ├── server │ ├── Server.test.js │ ├── __snapshots__ │ │ ├── Server.test.js.snap.webpack4 │ │ ├── Server.test.js.snap.webpack5 │ │ ├── webSocketServer-option.test.js.snap.webpack4 │ │ └── webSocketServer-option.test.js.snap.webpack5 │ ├── hot-option.test.js │ ├── open-option.test.js │ ├── proxy-option.test.js │ ├── setupExitSignals-option.test.js │ └── webSocketServer-option.test.js └── validate-options.test.js └── tsconfig.json /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | insert_final_newline = false 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | /client 2 | /dist 3 | !/test/client 4 | coverage 5 | node_modules 6 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto 2 | bin/* eol=lf 3 | -------------------------------------------------------------------------------- /.github/CODEOWNERS: -------------------------------------------------------------------------------- 1 | * @alexander-akait @hiroppy @Loonride @snitin315 @anshumanv 2 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | open_collective: webpack 2 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/DOCS.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 📚 Documentation 3 | about: Are the docs lacking or missing something? Do they need some new 🔥 hotness? Tell us here. 4 | --- 5 | 6 | 7 | 8 | 9 | Documentation Is: 10 | 11 | 12 | 13 | - [ ] Missing 14 | - [ ] Needed 15 | - [ ] Confusing 16 | - [ ] Not Sure? 17 | 18 | ### Please Explain in Detail... 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | ### Your Proposal for Changes 27 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/FEATURE.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: ✨ Feature Request 3 | about: Suggest an idea for this project 4 | --- 5 | 6 | 7 | 8 | 9 | ### Feature Proposal 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | ### Feature Use Case 18 | 19 | ### Please paste the results of `npx webpack-cli info` here, and mention other relevant information 20 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/MODIFICATION.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 🔧 Modification Request 3 | about: Would you like something work differently? Have an alternative approach? This is the template for you. 4 | --- 5 | 6 | 7 | 8 | 9 | ### Modification Proposal 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | ### Expected Behavior / Situation 18 | 19 | ### Actual Behavior / Situation 20 | 21 | ### Please paste the results of `npx webpack-cli info` here, and mention other relevant information 22 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/SUPPORT.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 🆘 Support, Help, and Advice 3 | about: 👉🏽 Need support, help, or advice? Don't open an issue! Head to https://github.com/webpack/webpack/discussions, StackOverflow or https://gitter.im/webpack/webpack. 4 | --- 5 | 6 | Hey there! If you need support, help, or advice then this is not the place to ask. 7 | Please visit [Discussions](https://github.com/webpack/webpack/discussions), [StackOverflow](https://stackoverflow.com/questions/tagged/webpack) 8 | or [the Webpack Gitter](https://gitter.im/webpack/webpack) instead. 9 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 11 | 12 | - [ ] This is a **bugfix** 13 | - [ ] This is a **feature** 14 | - [ ] This is a **code refactor** 15 | - [ ] This is a **test update** 16 | - [ ] This is a **docs update** 17 | - [ ] This is a **metadata update** 18 | 19 | ### For Bugs and Features; did you add new tests? 20 | 21 | 22 | 23 | ### Motivation / Use-Case 24 | 25 | 31 | 32 | ### Breaking Changes 33 | 34 | 38 | 39 | ### Additional Info 40 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | updates: 3 | - package-ecosystem: npm 4 | directory: "/" 5 | schedule: 6 | interval: daily 7 | time: "04:00" 8 | timezone: Europe/Berlin 9 | open-pull-requests-limit: 10 10 | versioning-strategy: lockfile-only 11 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | 3 | npm-debug.log 4 | 5 | .idea 6 | 7 | client 8 | !/examples/client 9 | !/test/client 10 | coverage 11 | node_modules 12 | .vscode 13 | yarn.lock 14 | yarn-error.log 15 | 16 | .eslintcache 17 | 18 | test/fixtures/static-config/public/assets/non-exist.txt 19 | test/fixtures/reload-config/main.css 20 | test/fixtures/reload-config-2/main.css 21 | !/test/fixtures/static-config/public/node_modules 22 | -------------------------------------------------------------------------------- /.husky/commit-msg: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | npx --no-install commitlint --edit $1 5 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | npx lint-staged 5 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | /client 2 | !/test/client 3 | coverage 4 | node_modules 5 | CHANGELOG.md 6 | -------------------------------------------------------------------------------- /.versionrc: -------------------------------------------------------------------------------- 1 | { 2 | "types": [ 3 | {"type":"feat","section":"Features"}, 4 | {"type":"fix","section":"Bug Fixes"}, 5 | {"type":"test", "hidden": true} 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | ## Code of Conduct 2 | 3 | At webpack and webpack/webpack-dev-server repository we follow the [JSFoundation Code of Conduct][1]. 4 | Please adhere to the guidelines there and feel free to report any violation of them to the **@webpack/core-team**, 5 | **@webpack/dev-server-team**, or . 6 | 7 | [1]: https://github.com/openjs-foundation/code-and-learn/blob/main/CODE_OF_CONDUCT.md 8 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright JS Foundation and other contributors 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining 4 | a copy of this software and associated documentation files (the 5 | 'Software'), to deal in the Software without restriction, including 6 | without limitation the rights to use, copy, modify, merge, publish, 7 | distribute, sublicense, and/or sell copies of the Software, and to 8 | permit persons to whom the Software is furnished to do so, subject to 9 | the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be 12 | included in all copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, 15 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 17 | IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY 18 | CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, 19 | TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE 20 | SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | module.exports = (api) => { 4 | api.cache(true); 5 | 6 | return { 7 | presets: [ 8 | [ 9 | "@babel/preset-env", 10 | { 11 | modules: false, 12 | targets: { 13 | esmodules: true, 14 | node: "0.12", 15 | }, 16 | }, 17 | ], 18 | ], 19 | plugins: ["@babel/plugin-transform-object-assign"], 20 | env: { 21 | test: { 22 | presets: [ 23 | [ 24 | "@babel/preset-env", 25 | { 26 | targets: { 27 | node: "12.13.0", 28 | }, 29 | }, 30 | ], 31 | ], 32 | plugins: ["@babel/plugin-transform-runtime"], 33 | }, 34 | }, 35 | }; 36 | }; 37 | -------------------------------------------------------------------------------- /client-src/clients/SockJSClient.js: -------------------------------------------------------------------------------- 1 | import SockJS from "../modules/sockjs-client/index.js"; 2 | import { log } from "../utils/log.js"; 3 | 4 | export default class SockJSClient { 5 | constructor(url) { 6 | // SockJS requires `http` and `https` protocols 7 | this.sock = new SockJS( 8 | url.replace(/^ws:/i, "http:").replace(/^wss:/i, "https:") 9 | ); 10 | this.sock.onerror = (error) => { 11 | log.error(error); 12 | }; 13 | } 14 | 15 | onOpen(f) { 16 | this.sock.onopen = f; 17 | } 18 | 19 | onClose(f) { 20 | this.sock.onclose = f; 21 | } 22 | 23 | // call f with the message string as the first argument 24 | onMessage(f) { 25 | this.sock.onmessage = (e) => { 26 | f(e.data); 27 | }; 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /client-src/clients/WebSocketClient.js: -------------------------------------------------------------------------------- 1 | import { log } from "../utils/log.js"; 2 | 3 | export default class WebSocketClient { 4 | constructor(url) { 5 | this.client = new WebSocket(url); 6 | this.client.onerror = (error) => { 7 | log.error(error); 8 | }; 9 | } 10 | 11 | onOpen(f) { 12 | this.client.onopen = f; 13 | } 14 | 15 | onClose(f) { 16 | this.client.onclose = f; 17 | } 18 | 19 | // call f with the message string as the first argument 20 | onMessage(f) { 21 | this.client.onmessage = (e) => { 22 | f(e.data); 23 | }; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /client-src/modules/logger/SyncBailHookFake.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | /** 4 | * Client stub for tapable SyncBailHook 5 | */ 6 | module.exports = function clientTapableSyncBailHook() { 7 | return { 8 | call() {}, 9 | }; 10 | }; 11 | -------------------------------------------------------------------------------- /client-src/modules/logger/index.js: -------------------------------------------------------------------------------- 1 | export { default } from "webpack/lib/logging/runtime.js"; 2 | -------------------------------------------------------------------------------- /client-src/modules/sockjs-client/index.js: -------------------------------------------------------------------------------- 1 | // eslint-disable-next-line import/no-extraneous-dependencies 2 | export { default } from "sockjs-client"; 3 | -------------------------------------------------------------------------------- /client-src/modules/strip-ansi/index.js: -------------------------------------------------------------------------------- 1 | import stripAnsi from "strip-ansi"; 2 | 3 | export default stripAnsi; 4 | -------------------------------------------------------------------------------- /client-src/utils/getCurrentScriptSource.js: -------------------------------------------------------------------------------- 1 | function getCurrentScriptSource() { 2 | // `document.currentScript` is the most accurate way to find the current script, 3 | // but is not supported in all browsers. 4 | if (document.currentScript) { 5 | return document.currentScript.getAttribute("src"); 6 | } 7 | 8 | // Fallback to getting all scripts running in the document. 9 | const scriptElements = document.scripts || []; 10 | const scriptElementsWithSrc = Array.prototype.filter.call( 11 | scriptElements, 12 | (element) => element.getAttribute("src") 13 | ); 14 | 15 | if (scriptElementsWithSrc.length > 0) { 16 | const currentScript = 17 | scriptElementsWithSrc[scriptElementsWithSrc.length - 1]; 18 | 19 | return currentScript.getAttribute("src"); 20 | } 21 | 22 | // Fail as there was no script to use. 23 | throw new Error("[webpack-dev-server] Failed to get current script source."); 24 | } 25 | 26 | export default getCurrentScriptSource; 27 | -------------------------------------------------------------------------------- /client-src/utils/log.js: -------------------------------------------------------------------------------- 1 | import logger from "../modules/logger/index.js"; 2 | 3 | const name = "webpack-dev-server"; 4 | // default level is set on the client side, so it does not need 5 | // to be set by the CLI or API 6 | const defaultLevel = "info"; 7 | 8 | function setLogLevel(level) { 9 | logger.configureDefaultLogger({ level }); 10 | } 11 | 12 | setLogLevel(defaultLevel); 13 | 14 | const log = logger.getLogger(name); 15 | 16 | export { log, setLogLevel }; 17 | -------------------------------------------------------------------------------- /client-src/utils/sendMessage.js: -------------------------------------------------------------------------------- 1 | /* global __resourceQuery WorkerGlobalScope */ 2 | 3 | // Send messages to the outside, so plugins can consume it. 4 | function sendMsg(type, data) { 5 | if ( 6 | typeof self !== "undefined" && 7 | (typeof WorkerGlobalScope === "undefined" || 8 | !(self instanceof WorkerGlobalScope)) 9 | ) { 10 | self.postMessage({ type: `webpack${type}`, data }, "*"); 11 | } 12 | } 13 | 14 | export default sendMsg; 15 | -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | module.exports = { 4 | extends: ["@commitlint/config-conventional"], 5 | }; 6 | -------------------------------------------------------------------------------- /examples/.assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/webpack-dev-server/42208aab74c5b77382b8e8058e657e478ee62174/examples/.assets/favicon.ico -------------------------------------------------------------------------------- /examples/.assets/geomanist-medium.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/webpack-dev-server/42208aab74c5b77382b8e8058e657e478ee62174/examples/.assets/geomanist-medium.woff -------------------------------------------------------------------------------- /examples/.assets/geomanist-medium.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/webpack-dev-server/42208aab74c5b77382b8e8058e657e478ee62174/examples/.assets/geomanist-medium.woff2 -------------------------------------------------------------------------------- /examples/.assets/icon-square.svg: -------------------------------------------------------------------------------- 1 | icon-square-small 2 | -------------------------------------------------------------------------------- /examples/.assets/layout.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | WDS ▻ <%= htmlWebpackPlugin.options.title %> 5 | 6 | 7 | 8 | 12 | 13 | 14 | 15 |
16 |
17 |

18 | 22 | webpack-dev-server 23 |

24 |
25 |
26 |

<%= htmlWebpackPlugin.options.title %>

27 |
28 |
29 |
30 | 31 | 32 | -------------------------------------------------------------------------------- /examples/README.md: -------------------------------------------------------------------------------- 1 | # Examples 2 | 3 | Each example showcases a particular feature of `webpack-dev-server`. You can use 4 | these examples to learn how to use certain features, or as a means to test features 5 | when working on a Pull Request. 6 | 7 | An example should be as minimal as possible and consists of at least: 8 | 9 | - An `app.js` file - the entry point for an example app. 10 | - A `README.md` file containing information about, and how to run the example app. 11 | - A description of what should happen when running the example. 12 | - A `webpack.config.js` file containing the `webpack` configuration for the example app. 13 | 14 | ## API 15 | 16 | API examples can be found in the `api` directory. These examples demonstrate how 17 | to access and run `webpack-dev-server` directly in your application / script. 18 | 19 | ## Notes 20 | 21 | - Each example's `webpack` config is wrapped with `util.setup`; a helper function 22 | that adds plugins and configuration needed by each example to render in a consistent 23 | and visually pleasing way. 24 | - Examples' `bundle.js` and `index.html` files are compiled and served from memory. 25 | You won't actually see these files written to disk, but if you examine the `webpack` 26 | output, you should see their file indicators. 27 | -------------------------------------------------------------------------------- /examples/api/middleware/README.md: -------------------------------------------------------------------------------- 1 | # API: Custom Middleware 2 | 3 | While it's recommended to run `webpack-dev-server` via the CLI, you may also 4 | choose to start a server via the API. This example demonstrates using one of the 5 | few custom middleware options; `before`. 6 | 7 | ```console 8 | node server.js 9 | ``` 10 | 11 | ## What Should Happen 12 | 13 | 1. Open `http://localhost:8080/` in your preferred browser. 14 | 2. You should see the text on the page itself change to read `Success!`. 15 | 3. In the console/terminal, you should see the following for each refresh in 16 | the browser: 17 | 18 | ``` 19 | Using middleware for / 20 | Using middleware for /bundle.js 21 | ``` 22 | -------------------------------------------------------------------------------- /examples/api/middleware/app.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const target = document.querySelector("#target"); 4 | 5 | target.classList.add("pass"); 6 | target.innerHTML = "Success!"; 7 | -------------------------------------------------------------------------------- /examples/api/middleware/server.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const Webpack = require("webpack"); 4 | const WebpackDevServer = require("../../../lib/Server"); 5 | const webpackConfig = require("./webpack.config"); 6 | 7 | const compiler = Webpack(webpackConfig); 8 | const devServerOptions = webpackConfig.devServer; 9 | const server = new WebpackDevServer(devServerOptions, compiler); 10 | 11 | server.startCallback(() => { 12 | console.log("Starting server on http://localhost:8080"); 13 | }); 14 | -------------------------------------------------------------------------------- /examples/api/middleware/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // our setup function adds behind-the-scenes bits to the config that all of our 4 | // examples need 5 | const { setup } = require("../../util"); 6 | 7 | module.exports = setup({ 8 | context: __dirname, 9 | entry: "./app.js", 10 | output: { 11 | filename: "bundle.js", 12 | }, 13 | stats: { 14 | colors: true, 15 | }, 16 | }); 17 | -------------------------------------------------------------------------------- /examples/api/simple/README.md: -------------------------------------------------------------------------------- 1 | # API: Simple Server 2 | 3 | While it's recommended to run `webpack-dev-server` via the CLI, you may also 4 | choose to start a server via the API. This example starts a simple server setup. 5 | 6 | ```console 7 | node server.js 8 | ``` 9 | 10 | ## What should happen 11 | 12 | 1. Open `http://localhost:8080/` in your preferred browser. 13 | 2. You should see the text on the page itself change to read `Success!`. 14 | 3. In `app.js`, uncomment the code that results in an error and save. This error 15 | should be visible in the console/terminal and in browser devtools. 16 | 4. In `app.js`, uncomment the code that results in a warning. This warning should 17 | be visible in the console/terminal and in browser devtools. 18 | -------------------------------------------------------------------------------- /examples/api/simple/app.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const target = document.querySelector("#target"); 4 | 5 | target.classList.add("pass"); 6 | target.innerHTML = "Success!"; 7 | 8 | // This results in a warning: 9 | if (!window) { 10 | // eslint-disable-next-line 11 | require(`./${window}parseable.js`); 12 | } 13 | 14 | // This results in an error: 15 | // if(!window) { 16 | // require("test"); 17 | // } 18 | -------------------------------------------------------------------------------- /examples/api/simple/server.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const Webpack = require("webpack"); 4 | const WebpackDevServer = require("../../../lib/Server"); 5 | const webpackConfig = require("./webpack.config"); 6 | 7 | const compiler = Webpack(webpackConfig); 8 | const devServerOptions = { ...webpackConfig.devServer, open: true }; 9 | const server = new WebpackDevServer(devServerOptions, compiler); 10 | 11 | server.startCallback(() => { 12 | console.log("Starting server on http://localhost:8080"); 13 | }); 14 | -------------------------------------------------------------------------------- /examples/api/simple/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // our setup function adds behind-the-scenes bits to the config that all of our 4 | // examples need 5 | const { setup } = require("../../util"); 6 | 7 | module.exports = setup({ 8 | context: __dirname, 9 | entry: "./app.js", 10 | output: { 11 | filename: "bundle.js", 12 | }, 13 | stats: { 14 | colors: true, 15 | }, 16 | }); 17 | -------------------------------------------------------------------------------- /examples/api/start-callback/README.md: -------------------------------------------------------------------------------- 1 | # API: startCallback(callback) 2 | 3 | While it's recommended to run `webpack-dev-server` via the CLI, you may also choose to start a server via the API. 4 | 5 | This example demonstrates using `startCallback(callback)` method. It instructs `webpack-dev-server` instance to start the server and then run the callback function. 6 | 7 | ```js 8 | const Webpack = require("webpack"); 9 | const WebpackDevServer = require("webpack-dev-server"); 10 | const webpackConfig = require("./webpack.config"); 11 | 12 | const compiler = Webpack(webpackConfig); 13 | const devServerOptions = { ...webpackConfig.devServer }; 14 | const server = new WebpackDevServer(devServerOptions, compiler); 15 | 16 | server.startCallback(() => { 17 | console.log("Successfully started server on http://localhost:8080"); 18 | }); 19 | ``` 20 | 21 | Use the following command to run this example: 22 | 23 | ```console 24 | node server.js 25 | ``` 26 | 27 | ## What Should Happen 28 | 29 | 1. Open `http://localhost:8080/` in your preferred browser. 30 | 2. You should see the text on the page itself change to read `Success!`. 31 | 3. You should see `Successfully started server on http://localhost:8080` in the terminal output. 32 | -------------------------------------------------------------------------------- /examples/api/start-callback/app.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const target = document.querySelector("#target"); 4 | 5 | target.classList.add("pass"); 6 | target.innerHTML = "Success!"; 7 | -------------------------------------------------------------------------------- /examples/api/start-callback/server.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const Webpack = require("webpack"); 4 | const WebpackDevServer = require("../../../lib/Server"); 5 | const webpackConfig = require("./webpack.config"); 6 | 7 | const compiler = Webpack(webpackConfig); 8 | const devServerOptions = { ...webpackConfig.devServer, open: true }; 9 | const server = new WebpackDevServer(devServerOptions, compiler); 10 | 11 | server.startCallback(() => { 12 | console.log("Successfully started server on http://localhost:8080"); 13 | }); 14 | -------------------------------------------------------------------------------- /examples/api/start-callback/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // our setup function adds behind-the-scenes bits to the config that all of our 4 | // examples need 5 | const { setup } = require("../../util"); 6 | 7 | module.exports = setup({ 8 | context: __dirname, 9 | entry: "./app.js", 10 | output: { 11 | filename: "bundle.js", 12 | }, 13 | stats: { 14 | colors: true, 15 | }, 16 | }); 17 | -------------------------------------------------------------------------------- /examples/api/start/README.md: -------------------------------------------------------------------------------- 1 | # API: start 2 | 3 | While it's recommended to run `webpack-dev-server` via the CLI, you may also 4 | choose to start a server via the API. 5 | 6 | This example demonstrates using `start` method. It instructs `webpack-dev-server` instance to start the server. 7 | 8 | ```js 9 | const Webpack = require("webpack"); 10 | const WebpackDevServer = require("webpack-dev-server"); 11 | const webpackConfig = require("./webpack.config"); 12 | 13 | const compiler = Webpack(webpackConfig); 14 | const devServerOptions = { ...webpackConfig.devServer }; 15 | const server = new WebpackDevServer(devServerOptions, compiler); 16 | 17 | const runServer = async () => { 18 | console.log("Starting server..."); 19 | await server.start(); 20 | }; 21 | 22 | runServer(); 23 | ``` 24 | 25 | Use the following command to run this example: 26 | 27 | ```console 28 | node server.js 29 | ``` 30 | 31 | ## What Should Happen 32 | 33 | 1. Open `http://localhost:8080/` in your preferred browser. 34 | 2. You should see the text on the page itself change to read `Success!`. 35 | -------------------------------------------------------------------------------- /examples/api/start/app.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const target = document.querySelector("#target"); 4 | 5 | target.classList.add("pass"); 6 | target.innerHTML = "Success!"; 7 | -------------------------------------------------------------------------------- /examples/api/start/server.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const Webpack = require("webpack"); 4 | const WebpackDevServer = require("../../../lib/Server"); 5 | const webpackConfig = require("./webpack.config"); 6 | 7 | const compiler = Webpack(webpackConfig); 8 | const devServerOptions = { ...webpackConfig.devServer, open: true }; 9 | const server = new WebpackDevServer(devServerOptions, compiler); 10 | 11 | const runServer = async () => { 12 | console.log("Starting server..."); 13 | await server.start(); 14 | }; 15 | 16 | runServer(); 17 | -------------------------------------------------------------------------------- /examples/api/start/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // our setup function adds behind-the-scenes bits to the config that all of our 4 | // examples need 5 | const { setup } = require("../../util"); 6 | 7 | module.exports = setup({ 8 | context: __dirname, 9 | entry: "./app.js", 10 | output: { 11 | filename: "bundle.js", 12 | }, 13 | stats: { 14 | colors: true, 15 | }, 16 | }); 17 | -------------------------------------------------------------------------------- /examples/api/stop-callback/app.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const target = document.querySelector("#target"); 4 | 5 | target.classList.add("pass"); 6 | target.innerHTML = "Success! Reload the page after 5 seconds."; 7 | -------------------------------------------------------------------------------- /examples/api/stop-callback/server.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const Webpack = require("webpack"); 4 | const WebpackDevServer = require("../../../lib/Server"); 5 | const webpackConfig = require("./webpack.config"); 6 | 7 | const compiler = Webpack(webpackConfig); 8 | const devServerOptions = { ...webpackConfig.devServer, open: true }; 9 | const server = new WebpackDevServer(devServerOptions, compiler); 10 | 11 | server.startCallback(() => { 12 | console.log("Successfully started server on http://localhost:8080"); 13 | }); 14 | 15 | const stopServer = () => 16 | server.stopCallback(() => { 17 | console.log("Server stopped."); 18 | }); 19 | 20 | setTimeout(stopServer, 5000); 21 | -------------------------------------------------------------------------------- /examples/api/stop-callback/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // our setup function adds behind-the-scenes bits to the config that all of our 4 | // examples need 5 | const { setup } = require("../../util"); 6 | 7 | module.exports = setup({ 8 | context: __dirname, 9 | entry: "./app.js", 10 | output: { 11 | filename: "bundle.js", 12 | }, 13 | stats: { 14 | colors: true, 15 | }, 16 | }); 17 | -------------------------------------------------------------------------------- /examples/api/stop/app.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const target = document.querySelector("#target"); 4 | 5 | target.classList.add("pass"); 6 | target.innerHTML = "Success! Reload the page after 5 seconds."; 7 | -------------------------------------------------------------------------------- /examples/api/stop/server.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const Webpack = require("webpack"); 4 | const WebpackDevServer = require("../../../lib/Server"); 5 | const webpackConfig = require("./webpack.config"); 6 | 7 | const compiler = Webpack(webpackConfig); 8 | const devServerOptions = { ...webpackConfig.devServer, open: true }; 9 | const server = new WebpackDevServer(devServerOptions, compiler); 10 | 11 | const runServer = async () => { 12 | console.log("Starting server..."); 13 | await server.start(); 14 | }; 15 | 16 | const stopServer = async () => { 17 | console.log("Stopping server..."); 18 | await server.stop(); 19 | }; 20 | 21 | runServer(); 22 | 23 | setTimeout(stopServer, 5000); 24 | -------------------------------------------------------------------------------- /examples/api/stop/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // our setup function adds behind-the-scenes bits to the config that all of our 4 | // examples need 5 | const { setup } = require("../../util"); 6 | 7 | module.exports = setup({ 8 | context: __dirname, 9 | entry: "./app.js", 10 | output: { 11 | filename: "bundle.js", 12 | }, 13 | stats: { 14 | colors: true, 15 | }, 16 | }); 17 | -------------------------------------------------------------------------------- /examples/bonjour/boolean/README.md: -------------------------------------------------------------------------------- 1 | # Bonjour (ZeroConf) 2 | 3 | The Bonjour capability broadcasts server information via ZeroConf when the Server 4 | is started. 5 | 6 | ## boolean 7 | 8 | **webpack.config.js** 9 | 10 | ```js 11 | module.exports = { 12 | // ... 13 | devServer: { 14 | bonjour: true, 15 | }, 16 | }; 17 | ``` 18 | 19 | Usage via CLI: 20 | 21 | ```console 22 | npx webpack serve --bonjour 23 | ``` 24 | 25 | ## What Should Happen 26 | 27 | A Zeroconf broadcast should occur, containing data with a type of `http` and a 28 | subtype of `webpack`. 29 | -------------------------------------------------------------------------------- /examples/bonjour/boolean/app.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const target = document.querySelector("#target"); 4 | 5 | target.innerHTML = "Please check your Zeroconf service."; 6 | -------------------------------------------------------------------------------- /examples/bonjour/boolean/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // our setup function adds behind-the-scenes bits to the config that all of our 4 | // examples need 5 | const { setup } = require("../../util"); 6 | 7 | module.exports = setup({ 8 | context: __dirname, 9 | entry: "./app.js", 10 | devServer: { 11 | bonjour: true, 12 | }, 13 | }); 14 | -------------------------------------------------------------------------------- /examples/bonjour/object/README.md: -------------------------------------------------------------------------------- 1 | # Bonjour (ZeroConf) 2 | 3 | The Bonjour capability broadcasts server information via ZeroConf when the Server 4 | is started. 5 | 6 | ## Bonjour options 7 | 8 | Allows options from bonjour for more [configuration](https://github.com/watson/bonjour#initializing): 9 | 10 | ```js 11 | // webpack.config.js 12 | module.exports = { 13 | // ... 14 | devServer: { 15 | bonjour: { 16 | name: "webpack-dev-server", 17 | type: "https", 18 | subtype: "webpack", 19 | }, 20 | }, 21 | }; 22 | ``` 23 | 24 | ```console 25 | npx webpack serve --config webpack.config.js 26 | ``` 27 | 28 | ## What Should Happen 29 | 30 | A Zeroconf broadcast should occur, containing data with a type of `https` and a 31 | subtype of `webpack`. 32 | -------------------------------------------------------------------------------- /examples/bonjour/object/app.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const target = document.querySelector("#target"); 4 | 5 | target.innerHTML = "Please check your Zeroconf service."; 6 | -------------------------------------------------------------------------------- /examples/bonjour/object/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // our setup function adds behind-the-scenes bits to the config that all of our 4 | // examples need 5 | const { setup } = require("../../util"); 6 | 7 | module.exports = setup({ 8 | context: __dirname, 9 | entry: "./app.js", 10 | devServer: { 11 | bonjour: { 12 | name: "webpack-dev-server", 13 | type: "https", 14 | subtype: "webpack", 15 | }, 16 | }, 17 | }); 18 | -------------------------------------------------------------------------------- /examples/client/logging/README.md: -------------------------------------------------------------------------------- 1 | # client.logging Option 2 | 3 | `'log' | 'info' | 'warn' | 'error' | 'none' | 'verbose'` 4 | 5 | Allows to set log level in the browser, e.g. before reloading, before an error or when Hot Module Replacement is enabled. 6 | 7 | **webpack.config.js** 8 | 9 | ```js 10 | module.exports = { 11 | // ... 12 | devServer: { 13 | client: { 14 | logging: "info", 15 | }, 16 | }, 17 | }; 18 | ``` 19 | 20 | Usage via CLI: 21 | 22 | ```shell 23 | npx webpack serve --open --client-logging info 24 | ``` 25 | 26 | ## What Should Happen 27 | 28 | 1. The script should open `http://localhost:8080/` in your default browser. 29 | 2. You should see an overlay in browser for compilation warnings. 30 | 3. Open the console in your browser's devtools. 31 | 32 | In the devtools console you should see: 33 | 34 | ``` 35 | [HMR] Waiting for update signal from WDS... 36 | [webpack-dev-server] Hot Module Replacement enabled. 37 | [webpack-dev-server] Live Reloading enabled. 38 | [webpack-dev-server] Warnings while compiling. 39 | [webpack-dev-server] Manual warnings produced during compilation. 40 | ``` 41 | -------------------------------------------------------------------------------- /examples/client/logging/app.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const target = document.querySelector("#target"); 4 | 5 | target.classList.add("pass"); 6 | target.innerHTML = "Success!"; 7 | -------------------------------------------------------------------------------- /examples/client/logging/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // our setup function adds behind-the-scenes bits to the config that all of our 4 | // examples need 5 | const { setup } = require("../../util"); 6 | 7 | module.exports = setup({ 8 | context: __dirname, 9 | entry: "./app.js", 10 | plugins: [ 11 | { 12 | apply(compiler) { 13 | compiler.hooks.thisCompilation.tap( 14 | "warnings-webpack-plugin", 15 | (compilation) => { 16 | compilation.warnings.push( 17 | new Error("Manual warnings produced during compilation.") 18 | ); 19 | } 20 | ); 21 | }, 22 | }, 23 | ], 24 | devServer: { 25 | client: { 26 | logging: "info", 27 | }, 28 | }, 29 | }); 30 | -------------------------------------------------------------------------------- /examples/client/overlay/README.md: -------------------------------------------------------------------------------- 1 | # client.overlay option 2 | 3 | **webpack.config.js** 4 | 5 | ```js 6 | module.exports = { 7 | // ... 8 | devServer: { 9 | client: { 10 | overlay: true, 11 | }, 12 | }, 13 | }; 14 | ``` 15 | 16 | Usage via CLI: 17 | 18 | ```shell 19 | npx webpack serve --open --client-overlay 20 | ``` 21 | 22 | To disable: 23 | 24 | ```shell 25 | npx webpack serve --open --no-client-overlay 26 | ``` 27 | 28 | ## What Should Happen 29 | 30 | 1. The script should open `http://localhost:8080/` in your default browser. 31 | 2. You should see an overlay in browser for compilation errors. 32 | 3. Update `entry` in webpack.config.js to `app.js` and save. 33 | 4. You should see the text on the page itself change to read `Success!`. 34 | -------------------------------------------------------------------------------- /examples/client/overlay/app.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const target = document.querySelector("#target"); 4 | 5 | target.classList.add("pass"); 6 | target.innerHTML = "Success!"; 7 | -------------------------------------------------------------------------------- /examples/client/overlay/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // our setup function adds behind-the-scenes bits to the config that all of our 4 | // examples need 5 | const { setup } = require("../../util"); 6 | 7 | module.exports = setup({ 8 | context: __dirname, 9 | // create error for overlay 10 | entry: "./invalid.js", 11 | devServer: { 12 | client: { 13 | overlay: true, 14 | }, 15 | }, 16 | }); 17 | -------------------------------------------------------------------------------- /examples/client/progress/README.md: -------------------------------------------------------------------------------- 1 | # client.progress Option 2 | 3 | **webpack.config.js** 4 | 5 | ```js 6 | module.exports = { 7 | // ... 8 | devServer: { 9 | client: { 10 | progress: true, 11 | }, 12 | }, 13 | }; 14 | ``` 15 | 16 | Usage via CLI: 17 | 18 | ```shell 19 | npx webpack serve --open --client-progress 20 | ``` 21 | 22 | To disable: 23 | 24 | ```shell 25 | npx webpack serve --open --no-client-progress 26 | ``` 27 | 28 | ## What Should Happen 29 | 30 | 1. The script should open `http://localhost:8080/` in your default browser. 31 | 2. You should see the text on the page itself change to read `Success!`. 32 | 3. In `app.js` change the text and save. 33 | 4. You should see the compilation progress in the browser console. 34 | -------------------------------------------------------------------------------- /examples/client/progress/app.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const target = document.querySelector("#target"); 4 | 5 | target.classList.add("pass"); 6 | target.innerHTML = "Success!"; 7 | -------------------------------------------------------------------------------- /examples/client/progress/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // our setup function adds behind-the-scenes bits to the config that all of our 4 | // examples need 5 | const { setup } = require("../../util"); 6 | 7 | module.exports = setup({ 8 | context: __dirname, 9 | entry: "./app.js", 10 | devServer: { 11 | client: { 12 | progress: true, 13 | }, 14 | }, 15 | }); 16 | -------------------------------------------------------------------------------- /examples/client/reconnect/false/README.md: -------------------------------------------------------------------------------- 1 | # client.reconnect: false 2 | 3 | ## false 4 | 5 | Tells dev-server the number of times it should try to reconnect the client. When `false` it will not try to reconnect. 6 | 7 | **webpack.config.js** 8 | 9 | ```js 10 | module.exports = { 11 | // ... 12 | devServer: { 13 | client: { 14 | reconnect: false, 15 | }, 16 | }, 17 | }; 18 | ``` 19 | 20 | Usage via CLI: 21 | 22 | ```shell 23 | npx webpack serve --open --no-client-reconnect 24 | ``` 25 | 26 | ## What Should Happen 27 | 28 | 1. The script should open `http://localhost:8080/` in your default browser. 29 | 2. Open the console tab in your browser's devtools. 30 | 3. Now close the server with `Ctrl+C` to disconnect the client. 31 | 32 | In the devtools console you should see that webpack-dev-server is not trying to reconnect: 33 | 34 | ``` 35 | [webpack-dev-server] Hot Module Replacement enabled. 36 | [webpack-dev-server] Live Reloading enabled. 37 | [webpack-dev-server] Disconnected! 38 | ``` 39 | -------------------------------------------------------------------------------- /examples/client/reconnect/false/app.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const target = document.querySelector("#target"); 4 | 5 | target.classList.add("pass"); 6 | target.innerHTML = 7 | "Success!
Now, open the console tab in your browser's devtools. Then, close the server with `Ctrl+C` to disconnect the client."; 8 | -------------------------------------------------------------------------------- /examples/client/reconnect/false/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // our setup function adds behind-the-scenes bits to the config that all of our 4 | // examples need 5 | const { setup } = require("../../../util"); 6 | 7 | module.exports = setup({ 8 | context: __dirname, 9 | entry: "./app.js", 10 | devServer: { 11 | client: { 12 | reconnect: false, 13 | }, 14 | }, 15 | }); 16 | -------------------------------------------------------------------------------- /examples/client/reconnect/number/app.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const target = document.querySelector("#target"); 4 | 5 | target.classList.add("pass"); 6 | target.innerHTML = 7 | "Success!
Now, open the console tab in your browser's devtools. Then, close the server with `Ctrl+C` to disconnect the client."; 8 | -------------------------------------------------------------------------------- /examples/client/reconnect/number/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // our setup function adds behind-the-scenes bits to the config that all of our 4 | // examples need 5 | const { setup } = require("../../../util"); 6 | 7 | module.exports = setup({ 8 | context: __dirname, 9 | entry: "./app.js", 10 | devServer: { 11 | client: { 12 | reconnect: 2, 13 | }, 14 | }, 15 | }); 16 | -------------------------------------------------------------------------------- /examples/client/reconnect/true/app.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const target = document.querySelector("#target"); 4 | 5 | target.classList.add("pass"); 6 | target.innerHTML = 7 | "Success!
Now, open the console tab in your browser's devtools. Then, close the server with `Ctrl+C` to disconnect the client."; 8 | -------------------------------------------------------------------------------- /examples/client/reconnect/true/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // our setup function adds behind-the-scenes bits to the config that all of our 4 | // examples need 5 | const { setup } = require("../../../util"); 6 | 7 | module.exports = setup({ 8 | context: __dirname, 9 | entry: "./app.js", 10 | devServer: { 11 | client: { 12 | reconnect: true, 13 | }, 14 | }, 15 | }); 16 | -------------------------------------------------------------------------------- /examples/client/web-socket-url/README.md: -------------------------------------------------------------------------------- 1 | # Web Socket URL Option Protocol 2 | 3 | **webpack.config.js** 4 | 5 | ```js 6 | module.exports = { 7 | // ... 8 | devServer: { 9 | host: "0.0.0.0", 10 | client: { 11 | webSocketURL: "ws://:8080", 12 | }, 13 | }, 14 | }; 15 | ``` 16 | 17 | Usage via CLI: 18 | 19 | ```console 20 | npx webpack serve --open --host 0.0.0.0 --client-web-socket-url ws://:8080 21 | ``` 22 | 23 | _NOTE: replace `` with your local IP Address._ 24 | 25 | In order to make the server publicly accessible the client needs to know with 26 | what host to connect to the server. If `--host 0.0.0.0` is given, the client 27 | would try to connect to `0.0.0.0`. With the `--client-web-socket-url` and related options it is possible to 28 | override this. 29 | 30 | You're now able to explicitly define the protocol used with the `client.webSocketURL` option 31 | (have a look at the config provided in `webpack.config.js`). 32 | 33 | ## What Should Happen 34 | 35 | The script should open `http://localhost:8080/` in your default browser. 36 | 37 | You should see a failed attempt to establish a connection to `/ws` 38 | via the explicitly defined `https://localhost:8080`. This fails of course since 39 | we're not hosting https. 40 | -------------------------------------------------------------------------------- /examples/client/web-socket-url/app.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const target = document.querySelector("#target"); 4 | 5 | target.innerHTML = 6 | "Please check the ws request in devtools, it should try to connect to the protocol + server defined in the webSocketURL setting."; 7 | -------------------------------------------------------------------------------- /examples/client/web-socket-url/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/client/web-socket-url/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // our setup function adds behind-the-scenes bits to the config that all of our 4 | // examples need 5 | const { setup } = require("../../util"); 6 | 7 | module.exports = setup({ 8 | context: __dirname, 9 | entry: "./app.js", 10 | devServer: { 11 | host: "0.0.0.0", 12 | client: { 13 | webSocketURL: "ws://localhost:8080", 14 | }, 15 | allowedHosts: "all", 16 | }, 17 | }); 18 | -------------------------------------------------------------------------------- /examples/compression/false/README.md: -------------------------------------------------------------------------------- 1 | # Gzip Compression 2 | 3 | Website gzip compression makes it possible to reduce the file size of a file 4 | to roughly 30% of its original size before the files are sent to the browser. 5 | 6 | It is enabled by default. To disable it set `compress` option to `false`. 7 | 8 | ## false 9 | 10 | **webpack.config.js** 11 | 12 | ```js 13 | module.exports = { 14 | // ... 15 | devServer: { 16 | compress: false, 17 | }, 18 | }; 19 | ``` 20 | 21 | Usage via CLI: 22 | 23 | ```console 24 | npx webpack serve --open --no-compress 25 | ``` 26 | 27 | ### What should happen 28 | 29 | 1. The script should open `http://localhost:8080/`. 30 | 2. Files being sent to the browser from the `webpack` bundle should be gzipped. 31 | 3. Open the console in your browser's devtools and select the _Network_ tab. 32 | 4. Find `main.js`. The response headers should not contain `Content-Encoding: gzip`. 33 | 34 | ## Notes 35 | 36 | Some browsers, such as Chrome, won't show the `Content-Encoding: gzip` within 37 | the _Response Headers_. This has been documented [here](https://github.com/expressjs/compression/issues/96). 38 | 39 | To enable `Content-Encoding` for _Response Headers_ in Chrome, you can follow 40 | [this tutorial](https://www.youtube.com/watch?v=47R6uv0RKCk). 41 | -------------------------------------------------------------------------------- /examples/compression/false/app.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const target = document.querySelector("#target"); 4 | 5 | target.classList.add("pass"); 6 | target.innerHTML = "Success!"; 7 | -------------------------------------------------------------------------------- /examples/compression/false/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // our setup function adds behind-the-scenes bits to the config that all of our 4 | // examples need 5 | const { setup } = require("../../util"); 6 | 7 | module.exports = setup({ 8 | context: __dirname, 9 | entry: "./app.js", 10 | devServer: { 11 | compress: false, 12 | }, 13 | }); 14 | -------------------------------------------------------------------------------- /examples/compression/true/README.md: -------------------------------------------------------------------------------- 1 | # Gzip Compression 2 | 3 | Website gzip compression makes it possible to reduce the file size of a file 4 | to roughly 30% of its original size before the files are sent to the browser. 5 | 6 | It is enabled by default. 7 | 8 | ## true 9 | 10 | **webpack.config.js** 11 | 12 | ```js 13 | module.exports = { 14 | // ... 15 | devServer: { 16 | compress: true, 17 | }, 18 | }; 19 | ``` 20 | 21 | Usage via CLI: 22 | 23 | ```console 24 | npx webpack serve --open --compress 25 | ``` 26 | 27 | ### What should happen 28 | 29 | 1. The script should open `http://localhost:8080/`. 30 | 2. Files being sent to the browser from the `webpack` bundle should be gzipped. 31 | 3. Open the console in your browser's devtools and select the _Network_ tab. 32 | 4. Find `main.js`. The response headers should contain `Content-Encoding: gzip`. 33 | 34 | ## Notes 35 | 36 | Some browsers, such as Chrome, won't show the `Content-Encoding: gzip` within 37 | the _Response Headers_. This has been documented [here](https://github.com/expressjs/compression/issues/96). 38 | 39 | To enable `Content-Encoding` for _Response Headers_ in Chrome, you can follow 40 | [this tutorial](https://www.youtube.com/watch?v=47R6uv0RKCk). 41 | -------------------------------------------------------------------------------- /examples/compression/true/app.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const target = document.querySelector("#target"); 4 | 5 | target.classList.add("pass"); 6 | target.innerHTML = "Success!"; 7 | -------------------------------------------------------------------------------- /examples/compression/true/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // our setup function adds behind-the-scenes bits to the config that all of our 4 | // examples need 5 | const { setup } = require("../../util"); 6 | 7 | module.exports = setup({ 8 | context: __dirname, 9 | entry: "./app.js", 10 | devServer: { 11 | compress: true, 12 | }, 13 | }); 14 | -------------------------------------------------------------------------------- /examples/default/README.md: -------------------------------------------------------------------------------- 1 | # Default State 2 | 3 | This example demonstrates how to use `webpack-dev-server`. 4 | 5 | ```console 6 | npx webpack serve --open 7 | ``` 8 | 9 | To run your app using an alternative config, use: 10 | 11 | ```console 12 | npx webpack serve --open --config alternative.config.js 13 | ``` 14 | 15 | ## What Should Happen 16 | 17 | 1. The script should open `http://localhost:8080/` in your default browser. 18 | 2. You should see the text on the page itself change to read `Success!`. 19 | 3. In `app.js` uncomment the code that results in an error and save. 20 | 4. This error should be visible in the console/terminal and in the browser's devtools. 21 | 5. In `app.js` uncomment the code that results in a warning. This warning should 22 | be visible in the console/terminal and in the browser's devtools. 23 | 6. Try changing something in `style.less`. The browser should refresh, and the 24 | change should be visible in the app. 25 | -------------------------------------------------------------------------------- /examples/default/app.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | require("./style.less"); 4 | 5 | const target = document.querySelector("#target"); 6 | 7 | target.classList.add("pass"); 8 | target.innerHTML = "Success!"; 9 | 10 | const img = document.createElement("img"); 11 | img.src = "/svg.svg"; 12 | img.style = "width: 200px;"; 13 | 14 | document.body.appendChild(img); 15 | 16 | // This results in a warning: 17 | // if(!window) require("./" + window + "parseable.js"); 18 | 19 | // This results in an error: 20 | // if(!window) require("test"); 21 | -------------------------------------------------------------------------------- /examples/default/pixels.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/webpack-dev-server/42208aab74c5b77382b8e8058e657e478ee62174/examples/default/pixels.png -------------------------------------------------------------------------------- /examples/default/style.less: -------------------------------------------------------------------------------- 1 | body { 2 | background: url(pixels.png); 3 | } 4 | -------------------------------------------------------------------------------- /examples/default/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const { version } = require("webpack"); 4 | // our setup function adds behind-the-scenes bits to the config that all of our 5 | // examples need 6 | const { setup } = require("../util"); 7 | 8 | let moduleRuleForPNG = {}; 9 | 10 | if (version.startsWith("5")) { 11 | moduleRuleForPNG = { 12 | test: /\.png$/, 13 | type: "asset/resource", 14 | generator: { 15 | filename: "images/[hash][ext][query]", 16 | }, 17 | }; 18 | } else { 19 | moduleRuleForPNG = { 20 | test: /\.png$/, 21 | loader: "file-loader", 22 | options: { prefix: "img/" }, 23 | }; 24 | } 25 | 26 | module.exports = setup({ 27 | context: __dirname, 28 | entry: "./app.js", 29 | module: { 30 | rules: [ 31 | { 32 | test: /\.less$/, 33 | use: ["style-loader", "css-loader", "less-loader"], 34 | }, 35 | { 36 | ...moduleRuleForPNG, 37 | }, 38 | ], 39 | }, 40 | }); 41 | -------------------------------------------------------------------------------- /examples/dev-middleware/README.md: -------------------------------------------------------------------------------- 1 | # devMiddleware option 2 | 3 | Provide options to [webpack-dev-middleware](https://github.com/webpack/webpack-dev-middleware) which handles webpack assets. 4 | 5 | **webpack.config.js** 6 | 7 | ```js 8 | module.exports = { 9 | // ... 10 | devServer: { 11 | devMiddleware: { 12 | index: true, 13 | headers: { 14 | "X-Custom-Header": "yes", 15 | }, 16 | }, 17 | }, 18 | }; 19 | ``` 20 | 21 | To run this example use the following command: 22 | 23 | ```console 24 | npx webpack serve --open 25 | ``` 26 | 27 | ## What should happen 28 | 29 | 1. The script should open `http://localhost:8080/`. 30 | 2. You should see the text on the page itself change to read `Success!`. 31 | 3. Open the console in your browser's devtools and select the _Network_ tab. 32 | 4. Find `main.js`. The response headers should contain `X-Custom-Header: yes`. 33 | 34 | Now update `webpack.config.js` with [`index: false`](https://github.com/webpack/webpack-dev-middleware#index), this will tell the server to not respond to requests to the root URL. 35 | 36 | Now close and restart the server with: 37 | 38 | ```console 39 | npx webpack serve --open 40 | ``` 41 | 42 | ## What should happen 43 | 44 | 1. The script should open `http://localhost:8080/`. 45 | 2. You should see the `Cannot GET /` text on the page. 46 | -------------------------------------------------------------------------------- /examples/dev-middleware/app.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const target = document.querySelector("#target"); 4 | 5 | target.classList.add("pass"); 6 | target.innerHTML = "Success!"; 7 | -------------------------------------------------------------------------------- /examples/dev-middleware/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // our setup function adds behind-the-scenes bits to the config that all of our 4 | // examples need 5 | const { setup } = require("../util"); 6 | 7 | module.exports = setup({ 8 | context: __dirname, 9 | entry: "./app.js", 10 | devServer: { 11 | devMiddleware: { 12 | index: false, 13 | headers: { 14 | "X-Custom-Header": "yes", 15 | }, 16 | }, 17 | }, 18 | }); 19 | -------------------------------------------------------------------------------- /examples/general/config-array/README.md: -------------------------------------------------------------------------------- 1 | # General: Webpack Config Array 2 | 3 | This example demonstrates using a `webpack` config containing an array of configs. 4 | 5 | ```console 6 | npx webpack serve --open 7 | ``` 8 | 9 | ## What Should Happen 10 | 11 | 1. The script should open `http://localhost:8080/` in your default browser. 12 | 2. You should see the text on the page itself change to read `Success!`. 13 | 3. Navigate to `http://localhost:8080/bundle2.js` 14 | 4. The browser should display a minified JavaScript bundle. 15 | -------------------------------------------------------------------------------- /examples/general/config-array/app.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | require("./style.less"); 4 | 5 | const target = document.querySelector("#target"); 6 | 7 | target.classList.add("pass"); 8 | target.innerHTML = "Success!"; 9 | 10 | // This results in a warning: 11 | // if(!window) require("./" + window + "parseable.js"); 12 | 13 | // This results in an error: 14 | // if(!window) require("test"); 15 | -------------------------------------------------------------------------------- /examples/general/config-array/pixels.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/webpack-dev-server/42208aab74c5b77382b8e8058e657e478ee62174/examples/general/config-array/pixels.png -------------------------------------------------------------------------------- /examples/general/config-array/style.less: -------------------------------------------------------------------------------- 1 | body { 2 | background: url(pixels.png); 3 | } 4 | -------------------------------------------------------------------------------- /examples/general/config-promise/README.md: -------------------------------------------------------------------------------- 1 | # General: Promise-Based Webpack Config 2 | 3 | This example demonstrates using `webpack-dev-server` with a `webpack` config that 4 | returns a `Promise`. 5 | 6 | ```console 7 | npx webpack serve --open 8 | ``` 9 | 10 | ## What Should Happen 11 | 12 | 1. The script should open `http://localhost:8080/` in your default browser. 13 | 2. You should see the text on the page itself change to read `Success!`. 14 | -------------------------------------------------------------------------------- /examples/general/config-promise/app.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // Change the following line and save to see the compilation status 4 | 5 | const target = document.querySelector("#target"); 6 | 7 | target.classList.add("pass"); 8 | target.innerHTML = "Success!"; 9 | -------------------------------------------------------------------------------- /examples/general/config-promise/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Promise Config Example 5 | 6 | 7 | 8 |

Example: Promise Config

9 | 10 | 11 | -------------------------------------------------------------------------------- /examples/general/config-promise/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // our setup function adds behind-the-scenes bits to the config that all of our 4 | // examples need 5 | const { setup } = require("../../util"); 6 | 7 | module.exports = new Promise((resolve) => { 8 | resolve( 9 | setup({ 10 | context: __dirname, 11 | entry: "./app.js", 12 | devServer: {}, 13 | }) 14 | ); 15 | }); 16 | -------------------------------------------------------------------------------- /examples/general/proxy-advanced/README.md: -------------------------------------------------------------------------------- 1 | # General: Proxy Advanced 2 | 3 | This example demonstrates a user case whereby the app proxies all urls that start with `/api` to 4 | `http://jsonplaceholder.typicode.com/`, but removes `/api` from the url. So 5 | `http://localhost:8080/api/users` should perform a request to 6 | `http://jsonplaceholder.typicode.com/users`. 7 | 8 | ```console 9 | npx webpack serve --open 10 | ``` 11 | 12 | ## What should happen 13 | 14 | 1. The script should open `http://localhost:8080/` in your default browser. 15 | 2. You should see the text on the page itself change to read `Success!`. 16 | 3. Navigate to `http://localhost:8080/api/users`. 17 | 4. The page should display several JSON objects. 18 | 5. Navigate to `http://localhost:8080/api/nope`. 19 | 6. The page should display `Bypassed proxy!``. 20 | -------------------------------------------------------------------------------- /examples/general/proxy-advanced/app.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const target = document.querySelector("#target"); 4 | 5 | target.classList.add("pass"); 6 | target.innerHTML = "Success!"; 7 | -------------------------------------------------------------------------------- /examples/general/proxy-advanced/bypass.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |

Example: proxy advanced

5 | 6 | Bypassed proxy! 7 | 8 | 9 | -------------------------------------------------------------------------------- /examples/general/proxy-advanced/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // our setup function adds behind-the-scenes bits to the config that all of our 4 | // examples need 5 | const { setup } = require("../../util"); 6 | 7 | module.exports = setup({ 8 | context: __dirname, 9 | entry: "./app.js", 10 | devServer: { 11 | proxy: { 12 | "/api": { 13 | target: "http://jsonplaceholder.typicode.com/", 14 | changeOrigin: true, 15 | pathRewrite: { 16 | "^/api": "", 17 | }, 18 | bypass(req) { 19 | if (req.url === "/api/nope") { 20 | return "/bypass.html"; 21 | } 22 | }, 23 | }, 24 | }, 25 | }, 26 | }); 27 | -------------------------------------------------------------------------------- /examples/general/proxy-hot-reload/README.md: -------------------------------------------------------------------------------- 1 | # General: Proxy Hot Reload 2 | 3 | ```shell 4 | npx webpack serve --open 5 | ``` 6 | 7 | Enables hot reloading for proxy config. If function is provided instead of 8 | object, dev server calls it on each request to get proxy config and replaces proxy middleware if config was changed. 9 | 10 | ## What should happen 11 | 12 | 1. The script should open `http://localhost:8080/` in your default browser. 13 | 2. You should see the text on the page itself change to read `Success!`. 14 | 3. Navigate to `http://localhost:8080/api/users`. 15 | 4. The page should display several JSON objects. 16 | 17 | While the server is running, open `proxy-config.js` and replace the following: 18 | 19 | ```js 20 | module.exports = { 21 | target: "http://jsonplaceholder.typicode.com/", 22 | pathRewrite: { 23 | "^/api": "", 24 | }, 25 | }; 26 | ``` 27 | 28 | with: 29 | 30 | ```js 31 | module.exports = { 32 | target: "http://reqres.in/", 33 | }; 34 | ``` 35 | 36 | A request to `http://localhost:8080/api/users` should return a response from `http://reqres.in/`. 37 | -------------------------------------------------------------------------------- /examples/general/proxy-hot-reload/app.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const target = document.querySelector("#target"); 4 | 5 | target.classList.add("pass"); 6 | target.innerHTML = "Success!"; 7 | -------------------------------------------------------------------------------- /examples/general/proxy-hot-reload/proxy-config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | /**/ 4 | module.exports = { 5 | target: "http://jsonplaceholder.typicode.com/", 6 | pathRewrite: { 7 | "^/api": "", 8 | }, 9 | }; 10 | /**/ 11 | 12 | // 13 | // Replace it with following and save the file: 14 | // 15 | 16 | /** / 17 | module.exports = { 18 | target: 'http://reqres.in/' 19 | }; 20 | /**/ 21 | -------------------------------------------------------------------------------- /examples/general/proxy-hot-reload/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const fs = require("fs"); 4 | // our setup function adds behind-the-scenes bits to the config that all of our 5 | // examples need 6 | const { setup } = require("../../util"); 7 | const proxyConfig = require("./proxy-config"); 8 | 9 | let proxyOptions = { 10 | context: "/api", 11 | target: proxyConfig.target, 12 | pathRewrite: proxyConfig.pathRewrite, 13 | changeOrigin: true, 14 | }; 15 | 16 | fs.watch("./proxy-config.js", () => { 17 | delete require.cache[require.resolve("./proxy-config")]; 18 | try { 19 | const newProxyConfig = require("./proxy-config"); 20 | if (proxyOptions.target !== newProxyConfig.target) { 21 | console.log("Proxy target changed:", newProxyConfig.target); 22 | proxyOptions = { 23 | context: "/api", 24 | target: newProxyConfig.target, 25 | pathRewrite: newProxyConfig.pathRewrite, 26 | changeOrigin: true, 27 | }; 28 | } 29 | } catch (e) { 30 | // ignore 31 | } 32 | }); 33 | 34 | module.exports = setup({ 35 | context: __dirname, 36 | entry: "./app.js", 37 | devServer: { 38 | proxy: [ 39 | function proxy() { 40 | return proxyOptions; 41 | }, 42 | ], 43 | }, 44 | }); 45 | -------------------------------------------------------------------------------- /examples/general/proxy-simple/README.md: -------------------------------------------------------------------------------- 1 | # General: Simple Proxy 2 | 3 | ```console 4 | npx webpack serve --open 5 | ``` 6 | 7 | In `webpack.config.js` there is a very simple configuration for a proxy. Note that this only works when proxying to a direct ip address. See the proxy-advanced example if you want to proxy to a domain. 8 | 9 | ## What Should Happen 10 | 11 | 1. The script should open `http://localhost:8080/` in your default browser. 12 | 2. You should see the text on the page itself change to read `Success!`. 13 | 3. Navigate to `http://localhost:8080/api/hey`. 14 | 4. Since the proxy target does not actually exist, the console/terminal should 15 | display an error that reads 16 | `[HPM] PROXY ERROR: ECONNREFUSED. localhost -> http://127.0.0.1:50545/api/hey`. 17 | -------------------------------------------------------------------------------- /examples/general/proxy-simple/app.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const target = document.querySelector("#target"); 4 | 5 | target.classList.add("pass"); 6 | target.innerHTML = "Success!"; 7 | -------------------------------------------------------------------------------- /examples/general/proxy-simple/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // our setup function adds behind-the-scenes bits to the config that all of our 4 | // examples need 5 | const { setup } = require("../../util"); 6 | 7 | module.exports = setup({ 8 | context: __dirname, 9 | entry: "./app.js", 10 | devServer: { 11 | proxy: { 12 | "/api": "http://127.0.0.1:50545", 13 | }, 14 | }, 15 | }); 16 | -------------------------------------------------------------------------------- /examples/general/universal-config/README.md: -------------------------------------------------------------------------------- 1 | # General: Webpack Universal Config 2 | 3 | This example demonstrates using a `webpack` config containing a `target: web` config and `target:node` config. 4 | 5 | ```console 6 | npx webpack serve --open 7 | ``` 8 | 9 | ## What Should Happen 10 | 11 | 1. The script should open `http://localhost:8080/` in your default browser. 12 | 2. You should see the text on the page itself change to read `[client.js, server.js]: Success!`. 13 | -------------------------------------------------------------------------------- /examples/general/universal-config/client.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const target = document.querySelector("#target"); 4 | 5 | if (!window.fetch) { 6 | target.classList.add("fail"); 7 | target.innerHTML = "fetch is not supported"; 8 | } else { 9 | fetch("/server.js") 10 | .then((res) => { 11 | if (res.status === 404) throw new Error("[server.js]: Not Found"); 12 | return res; 13 | }) 14 | .then((res) => res.text()) 15 | .then((res) => { 16 | if (res.includes("console.log('webpack-dev-server/server');")) { 17 | target.classList.add("pass"); 18 | target.innerHTML = "[client.js, server.js]: Success!"; 19 | } 20 | }) 21 | .catch((e) => { 22 | target.classList.add("fail"); 23 | target.innerHTML = e.message; 24 | }); 25 | } 26 | -------------------------------------------------------------------------------- /examples/general/universal-config/server.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | console.log("webpack-dev-server/server"); 4 | -------------------------------------------------------------------------------- /examples/general/universal-config/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const { setup } = require("../../util"); 4 | 5 | module.exports = [ 6 | setup({ 7 | mode: "development", 8 | entry: "./client.js", 9 | output: { 10 | filename: "client.js", 11 | }, 12 | context: __dirname, 13 | }), 14 | { 15 | mode: "development", 16 | target: "node", 17 | entry: "./server.js", 18 | output: { 19 | filename: "server.js", 20 | }, 21 | context: __dirname, 22 | node: false, 23 | }, 24 | ]; 25 | -------------------------------------------------------------------------------- /examples/general/webworker/README.md: -------------------------------------------------------------------------------- 1 | # General: WebWorker 2 | 3 | This example demonstrates using a WebWorker within an app run by `webpack-dev-server`. 4 | 5 | ```console 6 | npx webpack serve 7 | ``` 8 | 9 | ## What should happen 10 | 11 | 1. The main thread sends a message to the Worker. 12 | 2. The worker outputs the message in the console. 13 | 3. The worker sends a message back to the main thread. 14 | 4. The main thread posts the message in the console. 15 | 16 | No error, warning or other log traces should be in the console. 17 | -------------------------------------------------------------------------------- /examples/general/webworker/web.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | /* eslint-env browser */ 4 | 5 | const worker = new Worker("worker.bundle.js"); 6 | worker.onmessage = function onMessage(e) { 7 | console.log("[MAIN]", e); 8 | }; 9 | worker.postMessage({ 10 | hello: 111, 11 | }); 12 | -------------------------------------------------------------------------------- /examples/general/webworker/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // our setup function adds behind-the-scenes bits to the config that all of our 4 | // examples need 5 | const { setup } = require("../../util"); 6 | 7 | module.exports = [ 8 | setup({ 9 | devtool: "source-map", 10 | target: "web", 11 | entry: "./web.js", 12 | }), 13 | { 14 | devtool: "source-map", 15 | target: "webworker", 16 | entry: "./worker.js", 17 | output: { 18 | filename: "worker.bundle.js", 19 | path: __dirname, 20 | }, 21 | }, 22 | ]; 23 | -------------------------------------------------------------------------------- /examples/general/webworker/worker.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | /* eslint-env worker */ 4 | 5 | self.onmessage = function onMessage(e) { 6 | console.log("[WORKER]", e); 7 | self.postMessage({ 8 | hello: 222, 9 | }); 10 | }; 11 | -------------------------------------------------------------------------------- /examples/headers/array/README.md: -------------------------------------------------------------------------------- 1 | # headers option as an object 2 | 3 | Adds headers to all responses. 4 | 5 | **webpack.config.js** 6 | 7 | ```js 8 | module.exports = { 9 | // ... 10 | devServer: { 11 | headers: [ 12 | { 13 | key: "X-Foo", 14 | value: "value1", 15 | }, 16 | { 17 | key: "X-Bar", 18 | value: "value2", 19 | }, 20 | ], 21 | }, 22 | }; 23 | ``` 24 | 25 | To run this example use the following command: 26 | 27 | ```console 28 | npx webpack serve --open 29 | ``` 30 | 31 | ## What should happen 32 | 33 | 1. The script should open `http://localhost:8080/`. 34 | 2. You should see the text on the page itself change to read `Success!`. 35 | 3. Open the console in your browser's devtools and select the _Network_ tab. 36 | 4. Find `main.js`. The response headers should contain `X-Foo: value1` and `X-Bar: value2`. 37 | -------------------------------------------------------------------------------- /examples/headers/array/app.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const target = document.querySelector("#target"); 4 | 5 | target.classList.add("pass"); 6 | target.innerHTML = "Success!"; 7 | -------------------------------------------------------------------------------- /examples/headers/array/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // our setup function adds behind-the-scenes bits to the config that all of our 4 | // examples need 5 | const { setup } = require("../../util"); 6 | 7 | module.exports = setup({ 8 | context: __dirname, 9 | entry: "./app.js", 10 | devServer: { 11 | headers: [ 12 | { 13 | key: "X-Foo", 14 | value: "value1", 15 | }, 16 | { 17 | key: "X-Bar", 18 | value: "value2", 19 | }, 20 | ], 21 | }, 22 | }); 23 | -------------------------------------------------------------------------------- /examples/headers/function/README.md: -------------------------------------------------------------------------------- 1 | # headers option as a function 2 | 3 | Adds headers to all responses. 4 | 5 | **webpack.config.js** 6 | 7 | ```js 8 | module.exports = { 9 | // ... 10 | devServer: { 11 | headers: () => { 12 | return { "X-Custom-Header": ["key1=value1", "key2=value2"] }; 13 | }, 14 | }, 15 | }; 16 | ``` 17 | 18 | To run this example use the following command: 19 | 20 | ```console 21 | npx webpack serve --open 22 | ``` 23 | 24 | ## What should happen 25 | 26 | 1. The script should open `http://localhost:8080/`. 27 | 2. You should see the text on the page itself change to read `Success!`. 28 | 3. Open the console in your browser's devtools and select the _Network_ tab. 29 | 4. Find `main.js`. The response headers should contain `X-Custom-Header: key1=value1` and `X-Custom-Header: key2=value2`. 30 | -------------------------------------------------------------------------------- /examples/headers/function/app.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const target = document.querySelector("#target"); 4 | 5 | target.classList.add("pass"); 6 | target.innerHTML = "Success!"; 7 | -------------------------------------------------------------------------------- /examples/headers/function/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // our setup function adds behind-the-scenes bits to the config that all of our 4 | // examples need 5 | const { setup } = require("../../util"); 6 | 7 | module.exports = setup({ 8 | context: __dirname, 9 | entry: "./app.js", 10 | devServer: { 11 | headers: () => { 12 | return { "X-Custom-Header": ["key1=value1", "key2=value2"] }; 13 | }, 14 | }, 15 | }); 16 | -------------------------------------------------------------------------------- /examples/headers/object/README.md: -------------------------------------------------------------------------------- 1 | # headers option as an object 2 | 3 | Adds headers to all responses. 4 | 5 | **webpack.config.js** 6 | 7 | ```js 8 | module.exports = { 9 | // ... 10 | devServer: { 11 | headers: { 12 | "X-Custom-Header": "yes", 13 | }, 14 | }, 15 | }; 16 | ``` 17 | 18 | To run this example use the following command: 19 | 20 | ```console 21 | npx webpack serve --open 22 | ``` 23 | 24 | ## What should happen 25 | 26 | 1. The script should open `http://localhost:8080/`. 27 | 2. You should see the text on the page itself change to read `Success!`. 28 | 3. Open the console in your browser's devtools and select the _Network_ tab. 29 | 4. Find `main.js`. The response headers should contain `X-Custom-Header: yes`. 30 | -------------------------------------------------------------------------------- /examples/headers/object/app.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const target = document.querySelector("#target"); 4 | 5 | target.classList.add("pass"); 6 | target.innerHTML = "Success!"; 7 | -------------------------------------------------------------------------------- /examples/headers/object/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // our setup function adds behind-the-scenes bits to the config that all of our 4 | // examples need 5 | const { setup } = require("../../util"); 6 | 7 | module.exports = setup({ 8 | context: __dirname, 9 | entry: "./app.js", 10 | devServer: { 11 | headers: { 12 | "X-Custom-Header": "yes", 13 | }, 14 | }, 15 | }); 16 | -------------------------------------------------------------------------------- /examples/history-api-fallback/file.txt: -------------------------------------------------------------------------------- 1 | file 2 | -------------------------------------------------------------------------------- /examples/history-api-fallback/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // our setup function adds behind-the-scenes bits to the config that all of our 4 | // examples need 5 | const { setup } = require("../util"); 6 | 7 | module.exports = setup({ 8 | context: __dirname, 9 | entry: "./app.js", 10 | devServer: { 11 | historyApiFallback: true, 12 | }, 13 | }); 14 | -------------------------------------------------------------------------------- /examples/hmr/boolean/app.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | require("./example"); 4 | 5 | if (module.hot) { 6 | module.hot.accept((err) => { 7 | if (err) { 8 | console.error("Cannot apply HMR update.", err); 9 | } 10 | }); 11 | } 12 | -------------------------------------------------------------------------------- /examples/hmr/boolean/example.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const target = document.querySelector("#target"); 4 | 5 | target.innerHTML = 6 | "Modify and save /examples/hmr/example.js to update this element without reloading the page."; 7 | -------------------------------------------------------------------------------- /examples/hmr/boolean/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // our setup function adds behind-the-scenes bits to the config that all of our 4 | // examples need 5 | const { setup } = require("../../util"); 6 | 7 | module.exports = setup({ 8 | context: __dirname, 9 | entry: "./app.js", 10 | devServer: { 11 | hot: true, 12 | }, 13 | }); 14 | -------------------------------------------------------------------------------- /examples/hmr/only/README.md: -------------------------------------------------------------------------------- 1 | # Hot Module Reloading 2 | 3 | Hot Module Replacement (HMR) exchanges, adds, or removes modules while an application is running, without a full reload of the page. 4 | 5 | ## only 6 | 7 | Enables Hot Module Replacement without page refresh as a fallback in case of build failures. 8 | 9 | **webpack.config.js** 10 | 11 | ```js 12 | module.exports = { 13 | // ... 14 | devServer: { 15 | hot: "only", 16 | }, 17 | }; 18 | ``` 19 | 20 | Usage via CLI: 21 | 22 | ```console 23 | npx webpack serve --open --hot only 24 | ``` 25 | 26 | ## What Should Happen 27 | 28 | 1. The script should open `http://localhost:8080/` in your default browser. 29 | 2. In your editor, open `example.js` and change any part of the `innerHTML` string. 30 | 3. Open the console in your browser's devtools. 31 | 32 | In the devtools console you should see: 33 | 34 | ``` 35 | [webpack-dev-server] App updated. Recompiling... 36 | [webpack-dev-server] App hot update... 37 | [HMR] Checking for updates on the server... 38 | ⚠️ Ignored an update to unaccepted module ./example.js -> ./app.js 39 | [HMR] Nothing hot Updated. 40 | [HMR] App is up to date. 41 | ``` 42 | 43 | 5. Refresh the page and see the text on the page itself change to match your edits in `example.js`. 44 | -------------------------------------------------------------------------------- /examples/hmr/only/app.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | require("./example"); 4 | 5 | if (module.hot) { 6 | module.hot.accept((err) => { 7 | if (err) { 8 | console.error("Cannot apply HMR update.", err); 9 | } 10 | }); 11 | } 12 | -------------------------------------------------------------------------------- /examples/hmr/only/example.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const target = document.querySelector("#target"); 4 | 5 | target.innerHTML = 6 | "Modify and save /examples/hmr/example.js to update this element without reloading the page."; 7 | -------------------------------------------------------------------------------- /examples/hmr/only/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // our setup function adds behind-the-scenes bits to the config that all of our 4 | // examples need 5 | const { setup } = require("../../util"); 6 | 7 | module.exports = setup({ 8 | context: __dirname, 9 | entry: "./app.js", 10 | devServer: { 11 | hot: "only", 12 | }, 13 | }); 14 | -------------------------------------------------------------------------------- /examples/host-and-port/app.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const target = document.querySelector("#target"); 4 | 5 | target.classList.add("pass"); 6 | target.innerHTML = "Success!"; 7 | -------------------------------------------------------------------------------- /examples/host-and-port/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // our setup function adds behind-the-scenes bits to the config that all of our 4 | // examples need 5 | const { setup } = require("../util"); 6 | 7 | module.exports = setup({ 8 | context: __dirname, 9 | entry: "./app.js", 10 | }); 11 | -------------------------------------------------------------------------------- /examples/http2/boolean/README.md: -------------------------------------------------------------------------------- 1 | # http2 option 2 | 3 | Serve over HTTP/2 using [spdy](https://www.npmjs.com/package/spdy). This option is ignored for Node 15.0.0 and above, as `spdy` is broken for those versions. 4 | 5 | ## HTTP/2 with a self-signed certificate: 6 | 7 | ```js 8 | module.exports = { 9 | // ... 10 | devServer: { 11 | http2: true, 12 | }, 13 | }; 14 | ``` 15 | 16 | Usage via CLI: 17 | 18 | ```console 19 | npx webpack serve --open --http2 20 | ``` 21 | 22 | ### What Should Happen 23 | 24 | 1. The script should open `https://localhost:8080/` in your default browser. 25 | 2. You should see the text on the page itself change to read `Success!`. 26 | -------------------------------------------------------------------------------- /examples/http2/boolean/app.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const target = document.querySelector("#target"); 4 | 5 | target.classList.add("pass"); 6 | target.innerHTML = "Success!"; 7 | -------------------------------------------------------------------------------- /examples/http2/boolean/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // our setup function adds behind-the-scenes bits to the config that all of our 4 | // examples need 5 | const { setup } = require("../../util"); 6 | 7 | module.exports = setup({ 8 | context: __dirname, 9 | entry: "./app.js", 10 | devServer: { 11 | http2: true, 12 | }, 13 | }); 14 | -------------------------------------------------------------------------------- /examples/http2/with-https-configuration/README.md: -------------------------------------------------------------------------------- 1 | # http2 option 2 | 3 | Serve over HTTP/2 using [spdy](https://www.npmjs.com/package/spdy). This option is ignored for Node 15.0.0 and above, as `spdy` is broken for those versions. 4 | 5 | ## HTTP/2 with a custom certificate: 6 | 7 | Provide your own certificate using the [https](https://webpack.js.org/configuration/dev-server/#devserverhttps) option: 8 | 9 | ```js 10 | module.exports = { 11 | // ... 12 | devServer: { 13 | https: { 14 | key: "./ssl/server.key", 15 | pfx: "./ssl/server.pfx", 16 | cert: "./ssl/server.crt", 17 | ca: "./ssl/ca.pem", 18 | passphrase: "webpack-dev-server", 19 | }, 20 | }, 21 | }; 22 | ``` 23 | 24 | Usage via CLI: 25 | 26 | ```console 27 | npx webpack serve --open --http2 --https-key ./ssl/server.key --https-pfx ./ssl/server.pfx --https-cert ./ssl/server.crt --https-ca ./ssl/ca.pem --https-passphrase webpack-dev-server 28 | ``` 29 | 30 | ## What Should Happen 31 | 32 | 1. The script should open `https://localhost:8080/` in your default browser. 33 | 2. You should see the text on the page itself change to read `Success!`. 34 | -------------------------------------------------------------------------------- /examples/http2/with-https-configuration/app.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const target = document.querySelector("#target"); 4 | 5 | target.classList.add("pass"); 6 | target.innerHTML = "Success!"; 7 | -------------------------------------------------------------------------------- /examples/http2/with-https-configuration/ssl/server.crt: -------------------------------------------------------------------------------- 1 | -----BEGIN CERTIFICATE----- 2 | MIIDXTCCAkWgAwIBAgIJALz8gD/gAt0OMA0GCSqGSIb3DQEBCwUAMEUxCzAJBgNV 3 | BAYTAkFVMRMwEQYDVQQIDApTb21lLVN0YXRlMSEwHwYDVQQKDBhJbnRlcm5ldCBX 4 | aWRnaXRzIFB0eSBMdGQwHhcNMTgxMDIzMTgyMTQ5WhcNMTkxMDIzMTgyMTQ5WjBF 5 | MQswCQYDVQQGEwJBVTETMBEGA1UECAwKU29tZS1TdGF0ZTEhMB8GA1UECgwYSW50 6 | ZXJuZXQgV2lkZ2l0cyBQdHkgTHRkMIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIB 7 | CgKCAQEAxAUVLFM+K3XDLQkBi7xt0s1Ip7JoHYDskzUDQNHjjMkUq5kvC/hf5Ei1 8 | J6qruJs3Xqg86Nl4+ed4ynUajAkRRibhp0P1SG1tgPssIK6iC7g8heYuDy9WkFuM 9 | ie0513zjSn6bMEAK5TegxYAWCbaCZX/Fw9bDniabL/zuOv4sf8J4EPhsEENnH6sU 10 | E9HxPUgQmNt1Tbd0j1Cd5PXrSTLyfVPRh0m9QhXTUHuxsse8XSn9U2swduxJTWRI 11 | NmhffYn+O7kbJGI77xYr8u58Rsf3HCMI8DTKZNvQLChvvtLJ9ckyu7Q+T8emgklS 12 | tASm3V2UtnriaK/IQEhgSdxqVRib3QIDAQABo1AwTjAdBgNVHQ4EFgQUDZBhVKdb 13 | 3BRhLIhuuE522Vsul0IwHwYDVR0jBBgwFoAUDZBhVKdb3BRhLIhuuE522Vsul0Iw 14 | DAYDVR0TBAUwAwEB/zANBgkqhkiG9w0BAQsFAAOCAQEABh9WWZwWLgb9/DcTxL72 15 | 6pI96t4jiF79Q+pPefkaIIi0mE6yodWrTAsBQu9I6bNRaEcCSoiXkP2bqskD/UGg 16 | LwUFgSrDOAA3UjdHw3QU5g2NocduG7mcFwA40TB98sOsxsUyYlzSyWzoiQWwPYwb 17 | hek1djuWkqPXsTjlj54PTPN/SjTFmo4p5Ip6nbRf2nOREl7v0rJpGbJvXiCMYyd+ 18 | Zv+j4mRjCGo8ysMR2HjCUGkYReLAgKyyz3M7i8vevJhKslyOmy6Txn4F0nPVumaU 19 | DDIy4xXPW1STWfsmSYJfYW3wa0wk+pJQ3j2cTzkPQQ8gwpvM3U9DJl43uwb37v6I 20 | 7Q== 21 | -----END CERTIFICATE----- 22 | -------------------------------------------------------------------------------- /examples/http2/with-https-configuration/ssl/server.pfx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/webpack-dev-server/42208aab74c5b77382b8e8058e657e478ee62174/examples/http2/with-https-configuration/ssl/server.pfx -------------------------------------------------------------------------------- /examples/http2/with-https-configuration/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // our setup function adds behind-the-scenes bits to the config that all of our 4 | // examples need 5 | const { setup } = require("../../util"); 6 | 7 | module.exports = setup({ 8 | context: __dirname, 9 | entry: "./app.js", 10 | devServer: { 11 | http2: true, 12 | https: { 13 | key: "./ssl/server.key", 14 | pfx: "./ssl/server.pfx", 15 | cert: "./ssl/server.crt", 16 | ca: "./ssl/ca.pem", 17 | passphrase: "webpack-dev-server", 18 | }, 19 | }, 20 | }); 21 | -------------------------------------------------------------------------------- /examples/https/boolean/README.md: -------------------------------------------------------------------------------- 1 | # https 2 | 3 | You may choose to wish to run `webpack-dev-server` on `https`. 4 | 5 | ## boolean 6 | 7 | Use HTTPS protocol. 8 | 9 | ```js 10 | module.exports = { 11 | // ... 12 | devServer: { 13 | https: true, 14 | }, 15 | }; 16 | ``` 17 | 18 | Usage via CLI: 19 | 20 | ```console 21 | npx webpack serve --open --https 22 | ``` 23 | 24 | ## What Should Happen 25 | 26 | 1. The script should open `https://localhost:8080/` in your default browser. 27 | 2. You should see the text on the page itself change to read `Success!`. 28 | -------------------------------------------------------------------------------- /examples/https/boolean/app.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const target = document.querySelector("#target"); 4 | 5 | target.classList.add("pass"); 6 | target.innerHTML = "Success!"; 7 | -------------------------------------------------------------------------------- /examples/https/boolean/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // our setup function adds behind-the-scenes bits to the config that all of our 4 | // examples need 5 | const { setup } = require("../../util"); 6 | 7 | module.exports = setup({ 8 | context: __dirname, 9 | entry: "./app.js", 10 | devServer: { 11 | https: true, 12 | }, 13 | }); 14 | -------------------------------------------------------------------------------- /examples/https/object/app.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const target = document.querySelector("#target"); 4 | 5 | target.classList.add("pass"); 6 | target.innerHTML = "Success!"; 7 | -------------------------------------------------------------------------------- /examples/https/object/ssl/server.crt: -------------------------------------------------------------------------------- 1 | -----BEGIN CERTIFICATE----- 2 | MIIDXTCCAkWgAwIBAgIJALz8gD/gAt0OMA0GCSqGSIb3DQEBCwUAMEUxCzAJBgNV 3 | BAYTAkFVMRMwEQYDVQQIDApTb21lLVN0YXRlMSEwHwYDVQQKDBhJbnRlcm5ldCBX 4 | aWRnaXRzIFB0eSBMdGQwHhcNMTgxMDIzMTgyMTQ5WhcNMTkxMDIzMTgyMTQ5WjBF 5 | MQswCQYDVQQGEwJBVTETMBEGA1UECAwKU29tZS1TdGF0ZTEhMB8GA1UECgwYSW50 6 | ZXJuZXQgV2lkZ2l0cyBQdHkgTHRkMIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIB 7 | CgKCAQEAxAUVLFM+K3XDLQkBi7xt0s1Ip7JoHYDskzUDQNHjjMkUq5kvC/hf5Ei1 8 | J6qruJs3Xqg86Nl4+ed4ynUajAkRRibhp0P1SG1tgPssIK6iC7g8heYuDy9WkFuM 9 | ie0513zjSn6bMEAK5TegxYAWCbaCZX/Fw9bDniabL/zuOv4sf8J4EPhsEENnH6sU 10 | E9HxPUgQmNt1Tbd0j1Cd5PXrSTLyfVPRh0m9QhXTUHuxsse8XSn9U2swduxJTWRI 11 | NmhffYn+O7kbJGI77xYr8u58Rsf3HCMI8DTKZNvQLChvvtLJ9ckyu7Q+T8emgklS 12 | tASm3V2UtnriaK/IQEhgSdxqVRib3QIDAQABo1AwTjAdBgNVHQ4EFgQUDZBhVKdb 13 | 3BRhLIhuuE522Vsul0IwHwYDVR0jBBgwFoAUDZBhVKdb3BRhLIhuuE522Vsul0Iw 14 | DAYDVR0TBAUwAwEB/zANBgkqhkiG9w0BAQsFAAOCAQEABh9WWZwWLgb9/DcTxL72 15 | 6pI96t4jiF79Q+pPefkaIIi0mE6yodWrTAsBQu9I6bNRaEcCSoiXkP2bqskD/UGg 16 | LwUFgSrDOAA3UjdHw3QU5g2NocduG7mcFwA40TB98sOsxsUyYlzSyWzoiQWwPYwb 17 | hek1djuWkqPXsTjlj54PTPN/SjTFmo4p5Ip6nbRf2nOREl7v0rJpGbJvXiCMYyd+ 18 | Zv+j4mRjCGo8ysMR2HjCUGkYReLAgKyyz3M7i8vevJhKslyOmy6Txn4F0nPVumaU 19 | DDIy4xXPW1STWfsmSYJfYW3wa0wk+pJQ3j2cTzkPQQ8gwpvM3U9DJl43uwb37v6I 20 | 7Q== 21 | -----END CERTIFICATE----- 22 | -------------------------------------------------------------------------------- /examples/https/object/ssl/server.pfx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/webpack-dev-server/42208aab74c5b77382b8e8058e657e478ee62174/examples/https/object/ssl/server.pfx -------------------------------------------------------------------------------- /examples/https/object/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // our setup function adds behind-the-scenes bits to the config that all of our 4 | // examples need 5 | const { setup } = require("../../util"); 6 | 7 | module.exports = setup({ 8 | context: __dirname, 9 | entry: "./app.js", 10 | devServer: { 11 | https: { 12 | key: "./ssl/server.key", 13 | pfx: "./ssl/server.pfx", 14 | cert: "./ssl/server.crt", 15 | ca: "./ssl/ca.pem", 16 | passphrase: "webpack-dev-server", 17 | requestCert: true, 18 | }, 19 | }, 20 | }); 21 | -------------------------------------------------------------------------------- /examples/ipc/README.md: -------------------------------------------------------------------------------- 1 | # IPC 2 | 3 | The Unix socket to listen to (instead of a [host](../host-and-port/README.md)). 4 | 5 | ## true 6 | 7 | Setting it to `true` will listen to a socket at `/your-os-temp-dir/webpack-dev-server.sock`: 8 | 9 | **webpack.config.js** 10 | 11 | ```js 12 | module.exports = { 13 | // ... 14 | devServer: { 15 | ipc: true, 16 | }, 17 | }; 18 | ``` 19 | 20 | Usage via CLI: 21 | 22 | ```console 23 | npx webpack serve --ipc 24 | ``` 25 | 26 | ## string 27 | 28 | You can also listen to a different socket with: 29 | 30 | **webpack.config.js** 31 | 32 | ```js 33 | const path = require("path"); 34 | 35 | module.exports = { 36 | // ... 37 | devServer: { 38 | ipc: path.join(__dirname, "my-socket.sock"), 39 | }, 40 | }; 41 | ``` 42 | 43 | Usage via CLI: 44 | 45 | ```console 46 | npx webpack serve --ipc ./my-socket.sock 47 | ``` 48 | 49 | ## What Should Happen 50 | 51 | 1. The script should listen to the socket provided. 52 | 1. A proxy server should be created. 53 | 1. Go to `http://localhost:8080/`, you should see the text on the page itself change to read `Success!`. 54 | -------------------------------------------------------------------------------- /examples/ipc/app.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const target = document.querySelector("#target"); 4 | 5 | target.classList.add("pass"); 6 | target.innerHTML = "Success!"; 7 | -------------------------------------------------------------------------------- /examples/ipc/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const http = require("http"); 4 | const httpProxy = require("http-proxy"); 5 | // our setup function adds behind-the-scenes bits to the config that all of our 6 | // examples need 7 | const { setup } = require("../util"); 8 | 9 | module.exports = setup({ 10 | context: __dirname, 11 | entry: "./app.js", 12 | devServer: { 13 | webSocketServer: "ws", 14 | onAfterSetupMiddleware: (server) => { 15 | const proxyPort = 8080; 16 | const proxyHost = "127.0.0.1"; 17 | const proxy = httpProxy.createProxyServer({ 18 | target: { socketPath: server.options.ipc }, 19 | }); 20 | 21 | const proxyServer = http.createServer((request, response) => { 22 | // You can define here your custom logic to handle the request 23 | // and then proxy the request. 24 | proxy.web(request, response); 25 | }); 26 | 27 | proxyServer.on("upgrade", (request, socket, head) => { 28 | proxy.ws(request, socket, head); 29 | }); 30 | 31 | proxyServer.listen(proxyPort, proxyHost); 32 | }, 33 | }, 34 | }); 35 | -------------------------------------------------------------------------------- /examples/magic-html/app.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | if (window.location.href.endsWith("main")) { 4 | document.querySelector("body").innerHTML = 5 | "
You are viewing the magic HTML route!
"; 6 | } else { 7 | const target = document.querySelector("#target"); 8 | 9 | target.classList.add("pass"); 10 | target.innerHTML = "Success!"; 11 | } 12 | -------------------------------------------------------------------------------- /examples/magic-html/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // our setup function adds behind-the-scenes bits to the config that all of our 4 | // examples need 5 | const { setup } = require("../util"); 6 | 7 | module.exports = setup({ 8 | context: __dirname, 9 | entry: "./app.js", 10 | devServer: { 11 | magicHtml: true, 12 | }, 13 | }); 14 | -------------------------------------------------------------------------------- /examples/multi-compiler/README.md: -------------------------------------------------------------------------------- 1 | # Multi Compiler 2 | 3 | `webpack-dev-server` should be able to compile multiple webpack configs. 4 | 5 | ```shell 6 | npx webpack serve --open 7 | ``` 8 | 9 | ## What Should Happen 10 | 11 | 1. The script should open `http://localhost:8080/` in your default browser. 12 | 2. You should see the text on the page itself change to read `Success!`. 13 | 3. In `app.js` write code containing a syntax error and save the file. 14 | 4. The page should now refresh and show a full screen error overlay, displaying 15 | the syntax error. 16 | -------------------------------------------------------------------------------- /examples/multi-compiler/app.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const target = document.querySelector("#target"); 4 | 5 | target.classList.add("pass"); 6 | target.innerHTML = "Success!"; 7 | 8 | // This results in an error: 9 | // if(!window) require("test"); 10 | -------------------------------------------------------------------------------- /examples/multi-compiler/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // our setup function adds behind-the-scenes bits to the config that all of our 4 | // examples need 5 | const { setup } = require("../util"); 6 | 7 | module.exports = [ 8 | setup({ 9 | context: __dirname, 10 | entry: "./app.js", 11 | }), 12 | ]; 13 | -------------------------------------------------------------------------------- /examples/node-false/README.md: -------------------------------------------------------------------------------- 1 | # Webpack `node` Option 2 | 3 | ```console 4 | npx webpack serve --open 5 | ``` 6 | 7 | ## What should happen 8 | 9 | 1. The script should open `http://localhost:8080/` in your default browser. 10 | 2. You should see the text on the page itself change to read `Success!`. 11 | -------------------------------------------------------------------------------- /examples/node-false/app.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const target = document.querySelector("#target"); 4 | 5 | target.classList.add("pass"); 6 | target.innerHTML = "Success!"; 7 | -------------------------------------------------------------------------------- /examples/node-false/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // our setup function adds behind-the-scenes bits to the config that all of our 4 | // examples need 5 | const { setup } = require("../util"); 6 | 7 | module.exports = setup({ 8 | context: __dirname, 9 | entry: "./app.js", 10 | node: false, 11 | }); 12 | -------------------------------------------------------------------------------- /examples/on-after-setup-middleware/README.md: -------------------------------------------------------------------------------- 1 | # onAfterSetupMiddleware 2 | 3 | Provides the ability to execute custom middleware after all other middleware internally within the server. 4 | 5 | **webpack.config.js** 6 | 7 | ```js 8 | module.exports = { 9 | // ... 10 | devServer: { 11 | onAfterSetupMiddleware: (devServer) => { 12 | devServer.app.get("/after/some/path", (_, response) => { 13 | response.send("after"); 14 | }); 15 | }, 16 | }, 17 | }; 18 | ``` 19 | 20 | To run this example use the following command: 21 | 22 | ```console 23 | npx webpack serve --open 24 | ``` 25 | 26 | ## What Should Happen 27 | 28 | 1. The script should open `http://localhost:8080/` in your default browser. 29 | 2. You should see the text on the page itself change to read `Success!`. 30 | 3. Go to `http://localhost:8080/after/some/path`, you should see the text on the page itself change to read `after`. 31 | -------------------------------------------------------------------------------- /examples/on-after-setup-middleware/app.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const target = document.querySelector("#target"); 4 | 5 | target.classList.add("pass"); 6 | target.innerHTML = "Success!"; 7 | -------------------------------------------------------------------------------- /examples/on-after-setup-middleware/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // our setup function adds behind-the-scenes bits to the config that all of our 4 | // examples need 5 | const { setup } = require("../util"); 6 | 7 | module.exports = setup({ 8 | context: __dirname, 9 | entry: "./app.js", 10 | devServer: { 11 | onAfterSetupMiddleware: (devServer) => { 12 | devServer.app.get("/after/some/path", (_, response) => { 13 | response.send("after"); 14 | }); 15 | }, 16 | }, 17 | }); 18 | -------------------------------------------------------------------------------- /examples/on-before-setup-middleware/README.md: -------------------------------------------------------------------------------- 1 | # onBeforeSetupMiddleware 2 | 3 | Provides the ability to execute custom middleware prior to all other middleware internally within the server. 4 | 5 | **webpack.config.js** 6 | 7 | ```js 8 | module.exports = { 9 | // ... 10 | devServer: { 11 | onBeforeSetupMiddleware: (devServer) => { 12 | devServer.app.get("/before/some/path", (_, response) => { 13 | response.send("before"); 14 | }); 15 | }, 16 | }, 17 | }; 18 | ``` 19 | 20 | To run this example use the following command: 21 | 22 | ```console 23 | npx webpack serve --open 24 | ``` 25 | 26 | ## What Should Happen 27 | 28 | 1. The script should open `http://localhost:8080/` in your default browser. 29 | 2. You should see the text on the page itself change to read `Success!`. 30 | 3. Go to `http://localhost:8080/before/some/path`, you should see the text on the page itself change to read `before`. 31 | -------------------------------------------------------------------------------- /examples/on-before-setup-middleware/app.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const target = document.querySelector("#target"); 4 | 5 | target.classList.add("pass"); 6 | target.innerHTML = "Success!"; 7 | -------------------------------------------------------------------------------- /examples/on-before-setup-middleware/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // our setup function adds behind-the-scenes bits to the config that all of our 4 | // examples need 5 | const { setup } = require("../util"); 6 | 7 | module.exports = setup({ 8 | context: __dirname, 9 | entry: "./app.js", 10 | devServer: { 11 | onBeforeSetupMiddleware: (devServer) => { 12 | devServer.app.get("/before/some/path", (_, response) => { 13 | response.send("before"); 14 | }); 15 | }, 16 | }, 17 | }); 18 | -------------------------------------------------------------------------------- /examples/on-listening/README.md: -------------------------------------------------------------------------------- 1 | # onListening 2 | 3 | Provides the ability to execute a custom function when webpack-dev-server starts listening for connections on a port. 4 | 5 | **webpack.config.js** 6 | 7 | ```js 8 | module.exports = { 9 | // ... 10 | devServer: { 11 | onListening: (devServer) => { 12 | const port = devServer.server.address().port; 13 | console.log("Listening on port:", port); 14 | }, 15 | }, 16 | }; 17 | ``` 18 | 19 | To run this example use the following command: 20 | 21 | ```console 22 | npx webpack serve --open 23 | ``` 24 | 25 | ## What Should Happen 26 | 27 | 1. The script should open `http://localhost:8080/` in your default browser. 28 | 2. You should see the text on the page itself change to read `Success!`. 29 | 3. Check the terminal output, you should see `Listening on port: 8080` in the output. 30 | -------------------------------------------------------------------------------- /examples/on-listening/app.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const target = document.querySelector("#target"); 4 | 5 | target.classList.add("pass"); 6 | target.innerHTML = "Success!"; 7 | -------------------------------------------------------------------------------- /examples/on-listening/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // our setup function adds behind-the-scenes bits to the config that all of our 4 | // examples need 5 | const { setup } = require("../util"); 6 | 7 | module.exports = setup({ 8 | context: __dirname, 9 | entry: "./app.js", 10 | devServer: { 11 | onListening: (devServer) => { 12 | const port = devServer.server.address().port; 13 | console.log("Listening on port:", port); 14 | }, 15 | }, 16 | }); 17 | -------------------------------------------------------------------------------- /examples/open-target-multiple/README.md: -------------------------------------------------------------------------------- 1 | # Open Target Option (Multiple) 2 | 3 | **webpack.config.js** 4 | 5 | ```js 6 | module.exports = { 7 | // ... 8 | devServer: { 9 | open: { 10 | target: ["/example1.html", "example2.html"], 11 | }, 12 | }, 13 | }; 14 | ``` 15 | 16 | Usage via CLI: 17 | 18 | ```console 19 | npx webpack serve --open-target example1.html --open-target example2.html 20 | ``` 21 | 22 | Some applications may consist of multiple pages. During development it may 23 | be useful to directly open multiple pages at the same time. The pages to open 24 | may be specified as the argument to the `open-target` option. 25 | 26 | ## What Should Happen 27 | 28 | The script should open `http://localhost:8080/example1.html` and 29 | `http://localhost:8080/example2.html` in your default browser. 30 | You should see the text on the page itself change to read `Success!`. 31 | -------------------------------------------------------------------------------- /examples/open-target-multiple/app1.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const target = document.querySelector("#target"); 4 | 5 | if (window.location.href.endsWith("example1.html")) { 6 | target.classList.add("pass"); 7 | target.innerHTML = "Success!"; 8 | } else { 9 | target.classList.add("fail"); 10 | target.innerHTML = "Houston, we have a problem."; 11 | } 12 | -------------------------------------------------------------------------------- /examples/open-target-multiple/app2.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const target = document.querySelector("#target"); 4 | 5 | if (window.location.href.endsWith("example2.html")) { 6 | target.classList.add("pass"); 7 | target.innerHTML = "Success!"; 8 | } else { 9 | target.classList.add("fail"); 10 | target.innerHTML = "Houston, we have a problem."; 11 | } 12 | -------------------------------------------------------------------------------- /examples/open-target-multiple/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const HtmlWebpackPlugin = require("html-webpack-plugin"); 4 | // our setup function adds behind-the-scenes bits to the config that all of our 5 | // examples need 6 | const { setup } = require("../util"); 7 | 8 | module.exports = [ 9 | setup({ 10 | context: __dirname, 11 | entry: "./app1.js", 12 | output: { 13 | filename: "app1.js", 14 | }, 15 | plugins: [ 16 | new HtmlWebpackPlugin({ 17 | filename: "example1.html", 18 | template: "../../.assets/layout.html", 19 | title: "Open Target (Multiple) / Example / Page 1", 20 | }), 21 | ], 22 | }), 23 | { 24 | context: __dirname, 25 | entry: "./app2.js", 26 | output: { 27 | filename: "app2.js", 28 | }, 29 | plugins: [ 30 | new HtmlWebpackPlugin({ 31 | filename: "example2.html", 32 | template: "../../.assets/layout.html", 33 | title: "Open Target (Multiple) / Example / Page 2", 34 | }), 35 | ], 36 | }, 37 | ]; 38 | -------------------------------------------------------------------------------- /examples/open-target/app.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const target = document.querySelector("#target"); 4 | 5 | if (window.location.href.endsWith("example.html#page1")) { 6 | target.classList.add("pass"); 7 | target.innerHTML = "Success!"; 8 | } else { 9 | target.classList.add("fail"); 10 | target.innerHTML = "Houston, we have a problem."; 11 | } 12 | -------------------------------------------------------------------------------- /examples/open-target/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const HtmlWebpackPlugin = require("html-webpack-plugin"); 4 | // our setup function adds behind-the-scenes bits to the config that all of our 5 | // examples need 6 | const { setup } = require("../util"); 7 | 8 | module.exports = setup({ 9 | context: __dirname, 10 | entry: "./app.js", 11 | plugins: [ 12 | new HtmlWebpackPlugin({ 13 | filename: "example.html", 14 | template: "../../.assets/layout.html", 15 | title: "Open Target / Example", 16 | }), 17 | ], 18 | }); 19 | -------------------------------------------------------------------------------- /examples/proxy/README.md: -------------------------------------------------------------------------------- 1 | # proxy 2 | 3 | Proxying some URLs can be useful when you have a separate API backend development server and you want to send API requests on the same domain. 4 | 5 | **webpack.config.js** 6 | 7 | ```js 8 | module.exports = { 9 | // ... 10 | devServer: { 11 | proxy: { 12 | "/proxy": { 13 | target: "http://localhost:5000", 14 | }, 15 | }, 16 | }, 17 | }; 18 | ``` 19 | 20 | To run this example use the following command: 21 | 22 | ```console 23 | npx webpack serve --open 24 | ``` 25 | 26 | ## What Should Happen 27 | 28 | 1. The script start a proxy server on `http://localhost:5000/` and open `http://localhost:8080/` in your default browser. 29 | 2. You should see the text on the page itself change to read `Success! Now visit /proxy`. 30 | 3. Now visit the `/proxy` route by clicking on the `/proxy` text, you should see the text on the page itself change to read `response from proxy`. 31 | -------------------------------------------------------------------------------- /examples/proxy/app.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const target = document.querySelector("#target"); 4 | 5 | target.classList.add("pass"); 6 | target.innerHTML = "Success! Now visit /proxy"; 7 | -------------------------------------------------------------------------------- /examples/proxy/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const express = require("express"); 4 | // our setup function adds behind-the-scenes bits to the config that all of our 5 | // examples need 6 | const { setup } = require("../util"); 7 | 8 | async function listenProxyServer() { 9 | const proxyApp = express(); 10 | 11 | proxyApp.get("/proxy", (req, res) => { 12 | res.send("response from proxy"); 13 | }); 14 | 15 | await new Promise((resolve) => { 16 | proxyApp.listen(5000, () => { 17 | resolve(); 18 | }); 19 | }); 20 | } 21 | 22 | module.exports = setup({ 23 | context: __dirname, 24 | entry: "./app.js", 25 | devServer: { 26 | onBeforeSetupMiddleware: async () => { 27 | await listenProxyServer(); 28 | }, 29 | proxy: { 30 | "/proxy": { 31 | target: "http://localhost:5000", 32 | }, 33 | }, 34 | }, 35 | }); 36 | -------------------------------------------------------------------------------- /examples/server/https/app.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const target = document.querySelector("#target"); 4 | 5 | target.classList.add("pass"); 6 | target.innerHTML = "Success!"; 7 | -------------------------------------------------------------------------------- /examples/server/https/ssl/server.crt: -------------------------------------------------------------------------------- 1 | -----BEGIN CERTIFICATE----- 2 | MIIDXTCCAkWgAwIBAgIJALz8gD/gAt0OMA0GCSqGSIb3DQEBCwUAMEUxCzAJBgNV 3 | BAYTAkFVMRMwEQYDVQQIDApTb21lLVN0YXRlMSEwHwYDVQQKDBhJbnRlcm5ldCBX 4 | aWRnaXRzIFB0eSBMdGQwHhcNMTgxMDIzMTgyMTQ5WhcNMTkxMDIzMTgyMTQ5WjBF 5 | MQswCQYDVQQGEwJBVTETMBEGA1UECAwKU29tZS1TdGF0ZTEhMB8GA1UECgwYSW50 6 | ZXJuZXQgV2lkZ2l0cyBQdHkgTHRkMIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIB 7 | CgKCAQEAxAUVLFM+K3XDLQkBi7xt0s1Ip7JoHYDskzUDQNHjjMkUq5kvC/hf5Ei1 8 | J6qruJs3Xqg86Nl4+ed4ynUajAkRRibhp0P1SG1tgPssIK6iC7g8heYuDy9WkFuM 9 | ie0513zjSn6bMEAK5TegxYAWCbaCZX/Fw9bDniabL/zuOv4sf8J4EPhsEENnH6sU 10 | E9HxPUgQmNt1Tbd0j1Cd5PXrSTLyfVPRh0m9QhXTUHuxsse8XSn9U2swduxJTWRI 11 | NmhffYn+O7kbJGI77xYr8u58Rsf3HCMI8DTKZNvQLChvvtLJ9ckyu7Q+T8emgklS 12 | tASm3V2UtnriaK/IQEhgSdxqVRib3QIDAQABo1AwTjAdBgNVHQ4EFgQUDZBhVKdb 13 | 3BRhLIhuuE522Vsul0IwHwYDVR0jBBgwFoAUDZBhVKdb3BRhLIhuuE522Vsul0Iw 14 | DAYDVR0TBAUwAwEB/zANBgkqhkiG9w0BAQsFAAOCAQEABh9WWZwWLgb9/DcTxL72 15 | 6pI96t4jiF79Q+pPefkaIIi0mE6yodWrTAsBQu9I6bNRaEcCSoiXkP2bqskD/UGg 16 | LwUFgSrDOAA3UjdHw3QU5g2NocduG7mcFwA40TB98sOsxsUyYlzSyWzoiQWwPYwb 17 | hek1djuWkqPXsTjlj54PTPN/SjTFmo4p5Ip6nbRf2nOREl7v0rJpGbJvXiCMYyd+ 18 | Zv+j4mRjCGo8ysMR2HjCUGkYReLAgKyyz3M7i8vevJhKslyOmy6Txn4F0nPVumaU 19 | DDIy4xXPW1STWfsmSYJfYW3wa0wk+pJQ3j2cTzkPQQ8gwpvM3U9DJl43uwb37v6I 20 | 7Q== 21 | -----END CERTIFICATE----- 22 | -------------------------------------------------------------------------------- /examples/server/https/ssl/server.pfx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/webpack-dev-server/42208aab74c5b77382b8e8058e657e478ee62174/examples/server/https/ssl/server.pfx -------------------------------------------------------------------------------- /examples/server/https/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // our setup function adds behind-the-scenes bits to the config that all of our 4 | // examples need 5 | const { setup } = require("../../util"); 6 | 7 | module.exports = setup({ 8 | context: __dirname, 9 | entry: "./app.js", 10 | devServer: { 11 | server: { 12 | type: "https", 13 | options: { 14 | key: "./ssl/server.key", 15 | pfx: "./ssl/server.pfx", 16 | cert: "./ssl/server.crt", 17 | ca: "./ssl/ca.pem", 18 | passphrase: "webpack-dev-server", 19 | }, 20 | }, 21 | }, 22 | }); 23 | -------------------------------------------------------------------------------- /examples/server/spdy/app.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const target = document.querySelector("#target"); 4 | 5 | target.classList.add("pass"); 6 | target.innerHTML = "Success!"; 7 | -------------------------------------------------------------------------------- /examples/server/spdy/ssl/server.crt: -------------------------------------------------------------------------------- 1 | -----BEGIN CERTIFICATE----- 2 | MIIDXTCCAkWgAwIBAgIJALz8gD/gAt0OMA0GCSqGSIb3DQEBCwUAMEUxCzAJBgNV 3 | BAYTAkFVMRMwEQYDVQQIDApTb21lLVN0YXRlMSEwHwYDVQQKDBhJbnRlcm5ldCBX 4 | aWRnaXRzIFB0eSBMdGQwHhcNMTgxMDIzMTgyMTQ5WhcNMTkxMDIzMTgyMTQ5WjBF 5 | MQswCQYDVQQGEwJBVTETMBEGA1UECAwKU29tZS1TdGF0ZTEhMB8GA1UECgwYSW50 6 | ZXJuZXQgV2lkZ2l0cyBQdHkgTHRkMIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIB 7 | CgKCAQEAxAUVLFM+K3XDLQkBi7xt0s1Ip7JoHYDskzUDQNHjjMkUq5kvC/hf5Ei1 8 | J6qruJs3Xqg86Nl4+ed4ynUajAkRRibhp0P1SG1tgPssIK6iC7g8heYuDy9WkFuM 9 | ie0513zjSn6bMEAK5TegxYAWCbaCZX/Fw9bDniabL/zuOv4sf8J4EPhsEENnH6sU 10 | E9HxPUgQmNt1Tbd0j1Cd5PXrSTLyfVPRh0m9QhXTUHuxsse8XSn9U2swduxJTWRI 11 | NmhffYn+O7kbJGI77xYr8u58Rsf3HCMI8DTKZNvQLChvvtLJ9ckyu7Q+T8emgklS 12 | tASm3V2UtnriaK/IQEhgSdxqVRib3QIDAQABo1AwTjAdBgNVHQ4EFgQUDZBhVKdb 13 | 3BRhLIhuuE522Vsul0IwHwYDVR0jBBgwFoAUDZBhVKdb3BRhLIhuuE522Vsul0Iw 14 | DAYDVR0TBAUwAwEB/zANBgkqhkiG9w0BAQsFAAOCAQEABh9WWZwWLgb9/DcTxL72 15 | 6pI96t4jiF79Q+pPefkaIIi0mE6yodWrTAsBQu9I6bNRaEcCSoiXkP2bqskD/UGg 16 | LwUFgSrDOAA3UjdHw3QU5g2NocduG7mcFwA40TB98sOsxsUyYlzSyWzoiQWwPYwb 17 | hek1djuWkqPXsTjlj54PTPN/SjTFmo4p5Ip6nbRf2nOREl7v0rJpGbJvXiCMYyd+ 18 | Zv+j4mRjCGo8ysMR2HjCUGkYReLAgKyyz3M7i8vevJhKslyOmy6Txn4F0nPVumaU 19 | DDIy4xXPW1STWfsmSYJfYW3wa0wk+pJQ3j2cTzkPQQ8gwpvM3U9DJl43uwb37v6I 20 | 7Q== 21 | -----END CERTIFICATE----- 22 | -------------------------------------------------------------------------------- /examples/server/spdy/ssl/server.pfx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/webpack-dev-server/42208aab74c5b77382b8e8058e657e478ee62174/examples/server/spdy/ssl/server.pfx -------------------------------------------------------------------------------- /examples/server/spdy/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // our setup function adds behind-the-scenes bits to the config that all of our 4 | // examples need 5 | const { setup } = require("../../util"); 6 | 7 | module.exports = setup({ 8 | context: __dirname, 9 | entry: "./app.js", 10 | devServer: { 11 | server: { 12 | type: "spdy", 13 | options: { 14 | key: "./ssl/server.key", 15 | pfx: "./ssl/server.pfx", 16 | cert: "./ssl/server.crt", 17 | ca: "./ssl/ca.pem", 18 | passphrase: "webpack-dev-server", 19 | }, 20 | }, 21 | }, 22 | }); 23 | -------------------------------------------------------------------------------- /examples/setup-middlewares/app.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const target = document.querySelector("#target"); 4 | 5 | target.classList.add("pass"); 6 | target.innerHTML = "Success!"; 7 | -------------------------------------------------------------------------------- /examples/setup-middlewares/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // our setup function adds behind-the-scenes bits to the config that all of our 4 | // examples need 5 | const { setup } = require("../util"); 6 | 7 | module.exports = setup({ 8 | context: __dirname, 9 | entry: "./app.js", 10 | devServer: { 11 | setupMiddlewares: (middlewares, devServer) => { 12 | if (!devServer) { 13 | throw new Error("webpack-dev-server is not defined"); 14 | } 15 | 16 | devServer.app.get("/setup-middleware/some/path", (_, response) => { 17 | response.send("setup-middlewares option GET"); 18 | }); 19 | 20 | middlewares.push({ 21 | name: "hello-world-test-one", 22 | // `path` is optional 23 | path: "/foo/bar", 24 | middleware: (req, res) => { 25 | res.send("Foo Bar!"); 26 | }, 27 | }); 28 | 29 | middlewares.push((req, res) => { 30 | res.send("Hello World!"); 31 | }); 32 | 33 | return middlewares; 34 | }, 35 | }, 36 | }); 37 | -------------------------------------------------------------------------------- /examples/watch-static/app.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const target = document.querySelector("#target"); 4 | 5 | target.classList.add("pass"); 6 | target.innerHTML = "Success!"; 7 | -------------------------------------------------------------------------------- /examples/watch-static/assets/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |

Static

8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /examples/watch-static/css/styles.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | color: blue; 3 | } 4 | -------------------------------------------------------------------------------- /examples/watch-static/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // our setup function adds behind-the-scenes bits to the config that all of our 4 | // examples need 5 | const { setup } = require("../util"); 6 | 7 | module.exports = setup({ 8 | context: __dirname, 9 | entry: "./app.js", 10 | devServer: { 11 | static: ["assets", "css"], 12 | }, 13 | }); 14 | -------------------------------------------------------------------------------- /examples/web-socket-server/sockjs/README.md: -------------------------------------------------------------------------------- 1 | # web-socket-server (sockjs) 2 | 3 | To create a custom server implementation. 4 | 5 | ## sockjs 6 | 7 | This mode uses [SockJS-node](https://github.com/sockjs/sockjs-node) as a server. 8 | 9 | **webpack.config.js** 10 | 11 | ```js 12 | module.exports = { 13 | // ... 14 | devServer: { 15 | webSocketServer: "sockjs", 16 | }, 17 | }; 18 | ``` 19 | 20 | Usage via CLI: 21 | 22 | ```console 23 | npx webpack serve --web-socket-server sockjs --open 24 | ``` 25 | 26 | ### What Should Happen 27 | 28 | 1. The script should open `http://localhost:8080/` in your default browser. 29 | 2. You should see the text on the page itself change to read `Success!`. 30 | -------------------------------------------------------------------------------- /examples/web-socket-server/sockjs/app.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const target = document.querySelector("#target"); 4 | 5 | target.classList.add("pass"); 6 | target.innerHTML = "Success!"; 7 | -------------------------------------------------------------------------------- /examples/web-socket-server/sockjs/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // our setup function adds behind-the-scenes bits to the config that all of our 4 | // examples need 5 | const { setup } = require("../../util"); 6 | 7 | module.exports = setup({ 8 | context: __dirname, 9 | entry: "./app.js", 10 | devServer: { 11 | webSocketServer: "sockjs", 12 | }, 13 | }); 14 | -------------------------------------------------------------------------------- /examples/web-socket-server/ws/README.md: -------------------------------------------------------------------------------- 1 | # web-socket-server (ws) 2 | 3 | To create a custom server implementation. 4 | 5 | ## ws 6 | 7 | This mode uses [ws](https://github.com/websockets/ws) as a server. 8 | 9 | **webpack.config.js** 10 | 11 | ```js 12 | module.exports = { 13 | // ... 14 | devServer: { 15 | webSocketServer: "ws", 16 | }, 17 | }; 18 | ``` 19 | 20 | Usage via CLI: 21 | 22 | ```console 23 | npx webpack serve --web-socket-server ws --open 24 | ``` 25 | 26 | ### What Should Happen 27 | 28 | 1. The script should open `http://localhost:8080/` in your default browser. 29 | 2. You should see the text on the page itself change to read `Success!`. 30 | -------------------------------------------------------------------------------- /examples/web-socket-server/ws/app.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const target = document.querySelector("#target"); 4 | 5 | target.classList.add("pass"); 6 | target.innerHTML = "Success!"; 7 | -------------------------------------------------------------------------------- /examples/web-socket-server/ws/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // our setup function adds behind-the-scenes bits to the config that all of our 4 | // examples need 5 | const { setup } = require("../../util"); 6 | 7 | module.exports = setup({ 8 | context: __dirname, 9 | entry: "./app.js", 10 | devServer: { 11 | webSocketServer: "ws", 12 | }, 13 | }); 14 | -------------------------------------------------------------------------------- /globalSetupTest.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // eslint-disable-next-line import/no-extraneous-dependencies 4 | const tcpPortUsed = require("tcp-port-used"); 5 | const { version } = require("webpack"); 6 | const ports = require("./test/ports-map"); 7 | 8 | // eslint-disable-next-line no-console 9 | console.log(`\n Running tests for webpack @${version} \n`); 10 | 11 | async function validatePorts() { 12 | const samples = []; 13 | 14 | Object.keys(ports).forEach((key) => { 15 | const value = ports[key]; 16 | const arr = Array.isArray(value) ? value : [value]; 17 | 18 | arr.forEach((port) => { 19 | const check = tcpPortUsed.check(port, "localhost").then((inUse) => { 20 | if (inUse) { 21 | throw new Error(`${port} has already used. [${key}]`); 22 | } 23 | }); 24 | 25 | samples.push(check); 26 | }); 27 | }); 28 | 29 | try { 30 | await Promise.all(samples); 31 | } catch (e) { 32 | // eslint-disable-next-line no-console 33 | console.error(e); 34 | process.exit(1); 35 | } 36 | } 37 | 38 | module.exports = validatePorts; 39 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | module.exports = { 4 | testURL: "http://localhost/", 5 | collectCoverage: false, 6 | coveragePathIgnorePatterns: [ 7 | "/node_modules/", 8 | "/test/", 9 | "/client/", 10 | ], 11 | testPathIgnorePatterns: ["/bin/this/process-arguments.js"], 12 | snapshotResolver: "/test/helpers/snapshotResolver.js", 13 | setupFilesAfterEnv: ["/setupTest.js"], 14 | globalSetup: "/globalSetupTest.js", 15 | }; 16 | -------------------------------------------------------------------------------- /lib/servers/BaseServer.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // base class that users should extend if they are making their own 4 | // server implementation 5 | module.exports = class BaseServer { 6 | constructor(server) { 7 | this.server = server; 8 | this.clients = []; 9 | } 10 | }; 11 | -------------------------------------------------------------------------------- /lint-staged.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | module.exports = { 4 | "*": ["prettier --write --ignore-unknown"], 5 | "*.js": ["eslint --cache --fix"], 6 | }; 7 | -------------------------------------------------------------------------------- /setupTest.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | process.env.CHOKIDAR_USEPOLLING = true; 4 | 5 | jest.setTimeout(140000); 6 | -------------------------------------------------------------------------------- /test/cli/__snapshots__/historyApiFallback-option.test.js.snap.webpack4: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`"historyApiFallback" CLI option should work using "--history-api-fallback" 1`] = ` 4 | " [webpack-dev-server] Project is running at: 5 | Loopback: http://localhost:/, http://:/, http://[]:/ 6 | [webpack-dev-server] On Your Network (IPv4): http://:/ 7 | [webpack-dev-server] On Your Network (IPv6): http://[]:/ 8 | [webpack-dev-server] Content not from webpack is served from '/public' directory 9 | [webpack-dev-server] 404s will fallback to '/index.html'" 10 | `; 11 | 12 | exports[`"historyApiFallback" CLI option should work using "--no-history-api-fallback" 1`] = ` 13 | " [webpack-dev-server] Project is running at: 14 | Loopback: http://localhost:/, http://:/, http://[]:/ 15 | [webpack-dev-server] On Your Network (IPv4): http://:/ 16 | [webpack-dev-server] On Your Network (IPv6): http://[]:/ 17 | [webpack-dev-server] Content not from webpack is served from '/public' directory" 18 | `; 19 | -------------------------------------------------------------------------------- /test/cli/__snapshots__/historyApiFallback-option.test.js.snap.webpack5: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`"historyApiFallback" CLI option should work using "--history-api-fallback" 1`] = ` 4 | " [webpack-dev-server] Project is running at: 5 | Loopback: http://localhost:/, http://:/, http://[]:/ 6 | [webpack-dev-server] On Your Network (IPv4): http://:/ 7 | [webpack-dev-server] On Your Network (IPv6): http://[]:/ 8 | [webpack-dev-server] Content not from webpack is served from '/public' directory 9 | [webpack-dev-server] 404s will fallback to '/index.html'" 10 | `; 11 | 12 | exports[`"historyApiFallback" CLI option should work using "--no-history-api-fallback" 1`] = ` 13 | " [webpack-dev-server] Project is running at: 14 | Loopback: http://localhost:/, http://:/, http://[]:/ 15 | [webpack-dev-server] On Your Network (IPv4): http://:/ 16 | [webpack-dev-server] On Your Network (IPv6): http://[]:/ 17 | [webpack-dev-server] Content not from webpack is served from '/public' directory" 18 | `; 19 | -------------------------------------------------------------------------------- /test/cli/__snapshots__/http2-option.test.js.snap.webpack4: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`"http2" CLI option should work using "--http2" 1`] = ` 4 | " [webpack-dev-server] Generating SSL certificate... 5 | [webpack-dev-server] SSL certificate: /node_modules/.cache/webpack-dev-server/server.pem 6 | [webpack-dev-server] Project is running at: 7 | Loopback: https://localhost:/, https://:/, https://[]:/ 8 | [webpack-dev-server] On Your Network (IPv4): https://:/ 9 | [webpack-dev-server] On Your Network (IPv6): https://[]:/ 10 | [webpack-dev-server] Content not from webpack is served from '/public' directory" 11 | `; 12 | 13 | exports[`"http2" CLI option should work using "--no-http2" 1`] = ` 14 | " [webpack-dev-server] Project is running at: 15 | Loopback: http://localhost:/, http://:/, http://[]:/ 16 | [webpack-dev-server] On Your Network (IPv4): http://:/ 17 | [webpack-dev-server] On Your Network (IPv6): http://[]:/ 18 | [webpack-dev-server] Content not from webpack is served from '/public' directory" 19 | `; 20 | -------------------------------------------------------------------------------- /test/cli/__snapshots__/http2-option.test.js.snap.webpack5: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`"http2" CLI option should work using "--http2" 1`] = ` 4 | " [webpack-dev-server] Generating SSL certificate... 5 | [webpack-dev-server] SSL certificate: /node_modules/.cache/webpack-dev-server/server.pem 6 | [webpack-dev-server] Project is running at: 7 | Loopback: https://localhost:/, https://:/, https://[]:/ 8 | [webpack-dev-server] On Your Network (IPv4): https://:/ 9 | [webpack-dev-server] On Your Network (IPv6): https://[]:/ 10 | [webpack-dev-server] Content not from webpack is served from '/public' directory" 11 | `; 12 | 13 | exports[`"http2" CLI option should work using "--no-http2" 1`] = ` 14 | " [webpack-dev-server] Project is running at: 15 | Loopback: http://localhost:/, http://:/, http://[]:/ 16 | [webpack-dev-server] On Your Network (IPv4): http://:/ 17 | [webpack-dev-server] On Your Network (IPv6): http://[]:/ 18 | [webpack-dev-server] Content not from webpack is served from '/public' directory" 19 | `; 20 | -------------------------------------------------------------------------------- /test/cli/__snapshots__/ipc-option.test.js.snap.webpack4: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`"ipc" CLI option should work using "--ipc": stderr 1`] = ` 4 | " [webpack-dev-server] Project is running at: \\"/webpack-dev-server.sock\\" 5 | [webpack-dev-server] Content not from webpack is served from '/public' directory" 6 | `; 7 | 8 | exports[`"ipc" CLI option should work using "--ipc=": stderr 1`] = ` 9 | " [webpack-dev-server] Project is running at: \\"/webpack-dev-server.cli.sock\\" 10 | [webpack-dev-server] Content not from webpack is served from '/public' directory" 11 | `; 12 | -------------------------------------------------------------------------------- /test/cli/__snapshots__/ipc-option.test.js.snap.webpack5: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`"ipc" CLI option should work using "--ipc": stderr 1`] = ` 4 | " [webpack-dev-server] Project is running at: \\"/webpack-dev-server.sock\\" 5 | [webpack-dev-server] Content not from webpack is served from '/public' directory" 6 | `; 7 | 8 | exports[`"ipc" CLI option should work using "--ipc=": stderr 1`] = ` 9 | " [webpack-dev-server] Project is running at: \\"/webpack-dev-server.cli.sock\\" 10 | [webpack-dev-server] Content not from webpack is served from '/public' directory" 11 | `; 12 | -------------------------------------------------------------------------------- /test/cli/__snapshots__/port-option.test.js.snap.webpack4: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`"port" CLI option should work using "--port ": stderr 1`] = ` 4 | " [webpack-dev-server] Project is running at: 5 | Loopback: http://localhost:/, http://:/, http://[]:/ 6 | [webpack-dev-server] On Your Network (IPv4): http://:/ 7 | [webpack-dev-server] On Your Network (IPv6): http://[]:/ 8 | [webpack-dev-server] Content not from webpack is served from '/public' directory" 9 | `; 10 | 11 | exports[`"port" CLI option should work using "--port auto": stderr 1`] = ` 12 | " [webpack-dev-server] Project is running at: 13 | Loopback: http://localhost:/, http://:/, http://[]:/ 14 | [webpack-dev-server] On Your Network (IPv4): http://:/ 15 | [webpack-dev-server] On Your Network (IPv6): http://[]:/ 16 | [webpack-dev-server] Content not from webpack is served from '/public' directory" 17 | `; 18 | -------------------------------------------------------------------------------- /test/cli/__snapshots__/port-option.test.js.snap.webpack5: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`"port" CLI option should work using "--port ": stderr 1`] = ` 4 | " [webpack-dev-server] Project is running at: 5 | Loopback: http://localhost:/, http://:/, http://[]:/ 6 | [webpack-dev-server] On Your Network (IPv4): http://:/ 7 | [webpack-dev-server] On Your Network (IPv6): http://[]:/ 8 | [webpack-dev-server] Content not from webpack is served from '/public' directory" 9 | `; 10 | 11 | exports[`"port" CLI option should work using "--port auto": stderr 1`] = ` 12 | " [webpack-dev-server] Project is running at: 13 | Loopback: http://localhost:/, http://:/, http://[]:/ 14 | [webpack-dev-server] On Your Network (IPv4): http://:/ 15 | [webpack-dev-server] On Your Network (IPv6): http://[]:/ 16 | [webpack-dev-server] Content not from webpack is served from '/public' directory" 17 | `; 18 | -------------------------------------------------------------------------------- /test/cli/compress-option.test.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const { testBin } = require("../helpers/test-bin"); 4 | const port = require("../ports-map")["cli-compress"]; 5 | 6 | describe('"compress" CLI option', () => { 7 | it('should work using "--compress"', async () => { 8 | const { exitCode } = await testBin(["--port", port, "--compress"]); 9 | 10 | expect(exitCode).toEqual(0); 11 | }); 12 | 13 | it('should work using "--no-compress"', async () => { 14 | const { exitCode } = await testBin(["--port", port, "--no-compress"]); 15 | 16 | expect(exitCode).toEqual(0); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /test/cli/historyApiFallback-option.test.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const { testBin, normalizeStderr } = require("../helpers/test-bin"); 4 | const port = require("../ports-map")["cli-history-api-fallback"]; 5 | 6 | describe('"historyApiFallback" CLI option', () => { 7 | it('should work using "--history-api-fallback"', async () => { 8 | const { exitCode, stderr } = await testBin([ 9 | "--port", 10 | port, 11 | "--history-api-fallback", 12 | ]); 13 | 14 | expect(exitCode).toEqual(0); 15 | expect(normalizeStderr(stderr, { ipv6: true })).toMatchSnapshot(); 16 | }); 17 | 18 | it('should work using "--no-history-api-fallback"', async () => { 19 | const { exitCode, stderr } = await testBin([ 20 | "--port", 21 | port, 22 | "--no-history-api-fallback", 23 | ]); 24 | 25 | expect(exitCode).toEqual(0); 26 | expect(normalizeStderr(stderr, { ipv6: true })).toMatchSnapshot(); 27 | }); 28 | }); 29 | -------------------------------------------------------------------------------- /test/cli/hot-option.test.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const { testBin } = require("../helpers/test-bin"); 4 | const port = require("../ports-map")["cli-hot"]; 5 | 6 | describe('"hot" CLI option', () => { 7 | it('should work using "--hot"', async () => { 8 | const { exitCode, stdout } = await testBin([ 9 | "--port", 10 | port, 11 | "--hot", 12 | "--stats=detailed", 13 | ]); 14 | 15 | expect(exitCode).toEqual(0); 16 | expect(stdout).toContain("webpack/hot/dev-server.js"); 17 | }); 18 | 19 | it('should work using "--no-hot"', async () => { 20 | const { exitCode, stdout } = await testBin([ 21 | "--port", 22 | port, 23 | "--no-hot", 24 | "--stats=detailed", 25 | ]); 26 | 27 | expect(exitCode).toEqual(0); 28 | expect(stdout).not.toContain("webpack/hot/dev-server.js"); 29 | }); 30 | 31 | it('should work using "--hot only"', async () => { 32 | const { exitCode, stdout } = await testBin([ 33 | "--port", 34 | port, 35 | "--hot", 36 | "only", 37 | ]); 38 | 39 | expect(exitCode).toEqual(0); 40 | expect(stdout).toContain("/hot/only-dev-server.js"); 41 | }); 42 | }); 43 | -------------------------------------------------------------------------------- /test/cli/http2-option.test.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const del = require("del"); 4 | const Server = require("../../lib/Server"); 5 | const { testBin, normalizeStderr } = require("../helpers/test-bin"); 6 | const port = require("../ports-map")["cli-http2"]; 7 | 8 | const defaultCertificateDir = Server.findCacheDir(); 9 | 10 | describe('"http2" CLI option', () => { 11 | beforeEach(async () => { 12 | await del([defaultCertificateDir]); 13 | }); 14 | 15 | it('should work using "--http2"', async () => { 16 | const { exitCode, stderr } = await testBin(["--port", port, "--http2"]); 17 | 18 | expect(exitCode).toEqual(0); 19 | expect( 20 | normalizeStderr(stderr, { ipv6: true, https: true }) 21 | ).toMatchSnapshot(); 22 | }); 23 | 24 | it('should work using "--no-http2"', async () => { 25 | const { exitCode, stderr } = await testBin(["--port", port, "--no-http2"]); 26 | 27 | expect(exitCode).toEqual(0); 28 | expect(normalizeStderr(stderr, { ipv6: true })).toMatchSnapshot(); 29 | }); 30 | }); 31 | -------------------------------------------------------------------------------- /test/cli/ipc-option.test.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const path = require("path"); 4 | const os = require("os"); 5 | const { testBin, normalizeStderr } = require("../helpers/test-bin"); 6 | 7 | describe('"ipc" CLI option', () => { 8 | it('should work using "--ipc"', async () => { 9 | const { exitCode, stderr } = await testBin(["--ipc"]); 10 | 11 | expect(exitCode).toEqual(0); 12 | expect(normalizeStderr(stderr)).toMatchSnapshot("stderr"); 13 | }); 14 | 15 | it('should work using "--ipc="', async () => { 16 | const isWindows = process.platform === "win32"; 17 | const pipePrefix = isWindows ? "\\\\.\\pipe\\" : os.tmpdir(); 18 | const pipeName = `webpack-dev-server.cli.sock`; 19 | const ipc = path.join(pipePrefix, pipeName); 20 | 21 | const { exitCode, stderr } = await testBin(["--ipc", ipc]); 22 | 23 | expect(exitCode).toEqual(0); 24 | expect(normalizeStderr(stderr)).toMatchSnapshot("stderr"); 25 | }); 26 | }); 27 | -------------------------------------------------------------------------------- /test/cli/liveReload-option.test.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const { testBin } = require("../helpers/test-bin"); 4 | const port = require("../ports-map")["cli-live-reload"]; 5 | 6 | describe('"liveReload" CLI option', () => { 7 | it('should work using "--live-reload"', async () => { 8 | const { exitCode } = await testBin(["--port", port, "--live-reload"]); 9 | 10 | expect(exitCode).toEqual(0); 11 | }); 12 | 13 | it('should work using "--no-live-reload"', async () => { 14 | const { exitCode } = await testBin(["--port", port, "--no-live-reload"]); 15 | 16 | expect(exitCode).toEqual(0); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /test/cli/magicHtml-option.test.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const { testBin } = require("../helpers/test-bin"); 4 | const port = require("../ports-map")["cli-magic-html"]; 5 | 6 | describe('"liveReload" CLI option', () => { 7 | it('should work using "--magic-html"', async () => { 8 | const { exitCode } = await testBin(["--port", port, "--magic-html"]); 9 | 10 | expect(exitCode).toEqual(0); 11 | }); 12 | 13 | it('should work using "--no-magic-html"', async () => { 14 | const { exitCode } = await testBin(["--port", port, "--no-magic-html"]); 15 | 16 | expect(exitCode).toEqual(0); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /test/cli/port-option.test.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const { testBin, normalizeStderr } = require("../helpers/test-bin"); 4 | const port = require("../ports-map")["cli-port-option"]; 5 | 6 | describe('"port" CLI option', () => { 7 | it('should work using "--port "', async () => { 8 | const { exitCode, stderr } = await testBin(["--port", port]); 9 | 10 | expect(exitCode).toEqual(0); 11 | expect(normalizeStderr(stderr, { ipv6: true })).toMatchSnapshot("stderr"); 12 | }); 13 | 14 | it(`should work using "--port auto"`, async () => { 15 | const { exitCode, stderr } = await testBin(["--port", "auto"]); 16 | 17 | expect(exitCode).toEqual(0); 18 | expect(normalizeStderr(stderr, { ipv6: true })).toMatchSnapshot("stderr"); 19 | }); 20 | }); 21 | -------------------------------------------------------------------------------- /test/cli/webSocketServer-option.test.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const { testBin } = require("../helpers/test-bin"); 4 | const port = require("../ports-map")["cli-web-socket-server"]; 5 | 6 | describe('"webSocketServer" CLI option', () => { 7 | it('should work using "--web-socket-server sockjs"', async () => { 8 | const { exitCode } = await testBin([ 9 | "--port", 10 | port, 11 | "--web-socket-server", 12 | "sockjs", 13 | ]); 14 | 15 | expect(exitCode).toEqual(0); 16 | }); 17 | 18 | it('should work using "--web-socket-server ws"', async () => { 19 | const { exitCode } = await testBin([ 20 | "--port", 21 | port, 22 | "--web-socket-server", 23 | "ws", 24 | ]); 25 | 26 | expect(exitCode).toEqual(0); 27 | }); 28 | 29 | it('should work using "--web-socket-server-type ws"', async () => { 30 | const { exitCode } = await testBin([ 31 | "--port", 32 | port, 33 | "--web-socket-server-type", 34 | "ws", 35 | ]); 36 | 37 | expect(exitCode).toEqual(0); 38 | }); 39 | 40 | it('should work using "--web-socket-server-type sockjs"', async () => { 41 | const { exitCode } = await testBin([ 42 | "--port", 43 | port, 44 | "--web-socket-server-type", 45 | "sockjs", 46 | ]); 47 | 48 | expect(exitCode).toEqual(0); 49 | }); 50 | }); 51 | -------------------------------------------------------------------------------- /test/client/clients/__snapshots__/SockJSClient.test.js.snap.webpack4: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`SockJSClient client should open, receive message, and close 1`] = ` 4 | Array [ 5 | "open", 6 | "hello world", 7 | "close", 8 | ] 9 | `; 10 | -------------------------------------------------------------------------------- /test/client/clients/__snapshots__/SockJSClient.test.js.snap.webpack5: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`SockJSClient client should open, receive message, and close 1`] = ` 4 | Array [ 5 | "open", 6 | "hello world", 7 | "close", 8 | ] 9 | `; 10 | -------------------------------------------------------------------------------- /test/client/clients/__snapshots__/WebsocketClient.test.js.snap.webpack4: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`WebsocketClient client should open, receive message, and close 1`] = ` 4 | Array [ 5 | "open", 6 | "hello world", 7 | "close", 8 | ] 9 | `; 10 | -------------------------------------------------------------------------------- /test/client/clients/__snapshots__/WebsocketClient.test.js.snap.webpack5: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`WebsocketClient client should open, receive message, and close 1`] = ` 4 | Array [ 5 | "open", 6 | "hello world", 7 | "close", 8 | ] 9 | `; 10 | -------------------------------------------------------------------------------- /test/client/utils/__snapshots__/getCurrentScriptSource.test.js.snap.webpack4: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`'getCurrentScriptSource' function should fail when 'document.currentScript' doesn't exist and no 'script' tags 1`] = `[Error: [webpack-dev-server] Failed to get current script source.]`; 4 | 5 | exports[`'getCurrentScriptSource' function should fail when 'document.scripts' doesn't exist and no scripts 1`] = `[Error: [webpack-dev-server] Failed to get current script source.]`; 6 | 7 | exports[`'getCurrentScriptSource' function should fail when no scripts with the 'scr' attribute 1`] = `[Error: [webpack-dev-server] Failed to get current script source.]`; 8 | -------------------------------------------------------------------------------- /test/client/utils/__snapshots__/getCurrentScriptSource.test.js.snap.webpack5: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`'getCurrentScriptSource' function should fail when 'document.currentScript' doesn't exist and no 'script' tags 1`] = `[Error: [webpack-dev-server] Failed to get current script source.]`; 4 | 5 | exports[`'getCurrentScriptSource' function should fail when 'document.scripts' doesn't exist and no scripts 1`] = `[Error: [webpack-dev-server] Failed to get current script source.]`; 6 | 7 | exports[`'getCurrentScriptSource' function should fail when no scripts with the 'scr' attribute 1`] = `[Error: [webpack-dev-server] Failed to get current script source.]`; 8 | -------------------------------------------------------------------------------- /test/client/utils/__snapshots__/log.test.js.snap.webpack4: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`'log' function should set log level via setLogLevel 1`] = ` 4 | Array [ 5 | Array [ 6 | Object { 7 | "level": "none", 8 | }, 9 | ], 10 | Array [ 11 | Object { 12 | "level": "error", 13 | }, 14 | ], 15 | Array [ 16 | Object { 17 | "level": "warn", 18 | }, 19 | ], 20 | Array [ 21 | Object { 22 | "level": "info", 23 | }, 24 | ], 25 | Array [ 26 | Object { 27 | "level": "log", 28 | }, 29 | ], 30 | Array [ 31 | Object { 32 | "level": "verbose", 33 | }, 34 | ], 35 | ] 36 | `; 37 | -------------------------------------------------------------------------------- /test/client/utils/__snapshots__/log.test.js.snap.webpack5: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`'log' function should set log level via setLogLevel 1`] = ` 4 | Array [ 5 | Array [ 6 | Object { 7 | "level": "none", 8 | }, 9 | ], 10 | Array [ 11 | Object { 12 | "level": "error", 13 | }, 14 | ], 15 | Array [ 16 | Object { 17 | "level": "warn", 18 | }, 19 | ], 20 | Array [ 21 | Object { 22 | "level": "info", 23 | }, 24 | ], 25 | Array [ 26 | Object { 27 | "level": "log", 28 | }, 29 | ], 30 | Array [ 31 | Object { 32 | "level": "verbose", 33 | }, 34 | ], 35 | ] 36 | `; 37 | -------------------------------------------------------------------------------- /test/client/utils/__snapshots__/reloadApp.test.js.snap.webpack4: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`'reloadApp' function should run hot 1`] = `"App hot update..."`; 4 | 5 | exports[`'reloadApp' function should run hot 2`] = `"webpackHotUpdate"`; 6 | 7 | exports[`'reloadApp' function should run hot 3`] = ` 8 | Array [ 9 | "webpackHotUpdatehash", 10 | "*", 11 | ] 12 | `; 13 | 14 | exports[`'reloadApp' function should run liveReload when protocol is about: 1`] = `"App updated. Reloading..."`; 15 | 16 | exports[`'reloadApp' function should run liveReload when protocol is http: 1`] = `"App updated. Reloading..."`; 17 | -------------------------------------------------------------------------------- /test/client/utils/__snapshots__/reloadApp.test.js.snap.webpack5: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`'reloadApp' function should run hot 1`] = `"App hot update..."`; 4 | 5 | exports[`'reloadApp' function should run hot 2`] = `"webpackHotUpdate"`; 6 | 7 | exports[`'reloadApp' function should run hot 3`] = ` 8 | Array [ 9 | "webpackHotUpdatehash", 10 | "*", 11 | ] 12 | `; 13 | 14 | exports[`'reloadApp' function should run liveReload when protocol is about: 1`] = `"App updated. Reloading..."`; 15 | 16 | exports[`'reloadApp' function should run liveReload when protocol is http: 1`] = `"App updated. Reloading..."`; 17 | -------------------------------------------------------------------------------- /test/client/utils/__snapshots__/sendMessage.test.js.snap.webpack4: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`'sendMessage' function should run self.postMessage 1`] = ` 4 | Array [ 5 | Object { 6 | "data": "bar", 7 | "type": "webpackfoo", 8 | }, 9 | "*", 10 | ] 11 | `; 12 | -------------------------------------------------------------------------------- /test/client/utils/__snapshots__/sendMessage.test.js.snap.webpack5: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`'sendMessage' function should run self.postMessage 1`] = ` 4 | Array [ 5 | Object { 6 | "data": "bar", 7 | "type": "webpackfoo", 8 | }, 9 | "*", 10 | ] 11 | `; 12 | -------------------------------------------------------------------------------- /test/client/utils/sendMessage.test.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @jest-environment jsdom 3 | */ 4 | 5 | "use strict"; 6 | 7 | const sendMessage = require("../../../client-src/utils/sendMessage").default; 8 | 9 | describe("'sendMessage' function", () => { 10 | afterEach(() => { 11 | jest.resetAllMocks(); 12 | }); 13 | 14 | test("should run self.postMessage", () => { 15 | self.postMessage = jest.fn(); 16 | 17 | sendMessage("foo", "bar"); 18 | 19 | expect(self.postMessage).toBeCalled(); 20 | expect(self.postMessage.mock.calls[0]).toMatchSnapshot(); 21 | }); 22 | }); 23 | -------------------------------------------------------------------------------- /test/e2e/__snapshots__/client.test.js.snap.webpack4: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`client option configure client entry should disable client entry: console messages 1`] = `Array []`; 4 | 5 | exports[`client option configure client entry should disable client entry: page errors 1`] = `Array []`; 6 | 7 | exports[`client option configure client entry should disable client entry: response status 1`] = `200`; 8 | 9 | exports[`client option default behaviour responds with a 200 status code for /ws path: console messages 1`] = `Array []`; 10 | 11 | exports[`client option default behaviour responds with a 200 status code for /ws path: page errors 1`] = `Array []`; 12 | 13 | exports[`client option default behaviour responds with a 200 status code for /ws path: response status 1`] = `200`; 14 | 15 | exports[`client option should respect path option responds with a 200 status code for /foo/test/bar path: console messages 1`] = `Array []`; 16 | 17 | exports[`client option should respect path option responds with a 200 status code for /foo/test/bar path: page errors 1`] = `Array []`; 18 | 19 | exports[`client option should respect path option responds with a 200 status code for /foo/test/bar path: response status 1`] = `200`; 20 | -------------------------------------------------------------------------------- /test/e2e/__snapshots__/client.test.js.snap.webpack5: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`client option configure client entry should disable client entry: console messages 1`] = `Array []`; 4 | 5 | exports[`client option configure client entry should disable client entry: page errors 1`] = `Array []`; 6 | 7 | exports[`client option configure client entry should disable client entry: response status 1`] = `200`; 8 | 9 | exports[`client option default behaviour responds with a 200 status code for /ws path: console messages 1`] = `Array []`; 10 | 11 | exports[`client option default behaviour responds with a 200 status code for /ws path: page errors 1`] = `Array []`; 12 | 13 | exports[`client option default behaviour responds with a 200 status code for /ws path: response status 1`] = `200`; 14 | 15 | exports[`client option should respect path option responds with a 200 status code for /foo/test/bar path: console messages 1`] = `Array []`; 16 | 17 | exports[`client option should respect path option responds with a 200 status code for /foo/test/bar path: page errors 1`] = `Array []`; 18 | 19 | exports[`client option should respect path option responds with a 200 status code for /foo/test/bar path: response status 1`] = `200`; 20 | -------------------------------------------------------------------------------- /test/e2e/__snapshots__/mime-types.test.js.snap.webpack4: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`mimeTypes option as an object with a custom type should request file with different js mime type: console messages 1`] = `Array []`; 4 | 5 | exports[`mimeTypes option as an object with a custom type should request file with different js mime type: page errors 1`] = `Array []`; 6 | 7 | exports[`mimeTypes option as an object with a custom type should request file with different js mime type: response headers content-type 1`] = `"text/html; charset=utf-8"`; 8 | 9 | exports[`mimeTypes option as an object with a custom type should request file with different js mime type: response status 1`] = `200`; 10 | 11 | exports[`mimeTypes option as an object with a remapped type should request file with different js mime type: console messages 1`] = `Array []`; 12 | 13 | exports[`mimeTypes option as an object with a remapped type should request file with different js mime type: page errors 1`] = `Array []`; 14 | 15 | exports[`mimeTypes option as an object with a remapped type should request file with different js mime type: response headers content-type 1`] = `"text/plain; charset=utf-8"`; 16 | 17 | exports[`mimeTypes option as an object with a remapped type should request file with different js mime type: response status 1`] = `200`; 18 | -------------------------------------------------------------------------------- /test/e2e/__snapshots__/mime-types.test.js.snap.webpack5: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`mimeTypes option as an object with a custom type should request file with different js mime type: console messages 1`] = `Array []`; 4 | 5 | exports[`mimeTypes option as an object with a custom type should request file with different js mime type: page errors 1`] = `Array []`; 6 | 7 | exports[`mimeTypes option as an object with a custom type should request file with different js mime type: response headers content-type 1`] = `"text/html; charset=utf-8"`; 8 | 9 | exports[`mimeTypes option as an object with a custom type should request file with different js mime type: response status 1`] = `200`; 10 | 11 | exports[`mimeTypes option as an object with a remapped type should request file with different js mime type: console messages 1`] = `Array []`; 12 | 13 | exports[`mimeTypes option as an object with a remapped type should request file with different js mime type: page errors 1`] = `Array []`; 14 | 15 | exports[`mimeTypes option as an object with a remapped type should request file with different js mime type: response headers content-type 1`] = `"text/plain; charset=utf-8"`; 16 | 17 | exports[`mimeTypes option as an object with a remapped type should request file with different js mime type: response status 1`] = `200`; 18 | -------------------------------------------------------------------------------- /test/e2e/__snapshots__/module-federation.test.js.snap.webpack4: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`Module federation should work with multi compiler config should use the last entry export: console messages 1`] = `Array []`; 4 | 5 | exports[`Module federation should work with multi compiler config should use the last entry export: page errors 1`] = `Array []`; 6 | 7 | exports[`Module federation should work with object multi-entry config should support the named entry export: console messages 1`] = `Array []`; 8 | 9 | exports[`Module federation should work with object multi-entry config should support the named entry export: page errors 1`] = `Array []`; 10 | 11 | exports[`Module federation should work with object multi-entry config should use the last entry export: console messages 1`] = `Array []`; 12 | 13 | exports[`Module federation should work with object multi-entry config should use the last entry export: page errors 1`] = `Array []`; 14 | 15 | exports[`Module federation should work with simple multi-entry config should use the last entry export: console messages 1`] = `Array []`; 16 | 17 | exports[`Module federation should work with simple multi-entry config should use the last entry export: page errors 1`] = `Array []`; 18 | -------------------------------------------------------------------------------- /test/e2e/__snapshots__/transport-mode.test.js.snap.webpack4: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`transportMode client custom client on browser client logs correctly 1`] = ` 4 | Array [ 5 | "Hey.", 6 | "open", 7 | "liveReload", 8 | "[webpack-dev-server] Live Reloading enabled.", 9 | "overlay", 10 | "hash", 11 | "ok", 12 | "close", 13 | "[webpack-dev-server] Disconnected!", 14 | ] 15 | `; 16 | 17 | exports[`transportMode client sockjs on browser client logs correctly 1`] = ` 18 | Array [ 19 | "Hey.", 20 | "[webpack-dev-server] Live Reloading enabled.", 21 | "[webpack-dev-server] Disconnected!", 22 | ] 23 | `; 24 | 25 | exports[`transportMode client unspecified port on browser client logs correctly 1`] = ` 26 | Array [ 27 | "Hey.", 28 | "[webpack-dev-server] Live Reloading enabled.", 29 | "[webpack-dev-server] Disconnected!", 30 | ] 31 | `; 32 | 33 | exports[`transportMode client ws on browser client logs correctly 1`] = ` 34 | Array [ 35 | "Hey.", 36 | "[webpack-dev-server] Live Reloading enabled.", 37 | "[webpack-dev-server] Disconnected!", 38 | ] 39 | `; 40 | -------------------------------------------------------------------------------- /test/e2e/__snapshots__/transport-mode.test.js.snap.webpack5: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`transportMode client custom client on browser client logs correctly 1`] = ` 4 | Array [ 5 | "Hey.", 6 | "open", 7 | "liveReload", 8 | "[webpack-dev-server] Live Reloading enabled.", 9 | "overlay", 10 | "hash", 11 | "ok", 12 | "close", 13 | "[webpack-dev-server] Disconnected!", 14 | ] 15 | `; 16 | 17 | exports[`transportMode client sockjs on browser client logs correctly 1`] = ` 18 | Array [ 19 | "Hey.", 20 | "[webpack-dev-server] Live Reloading enabled.", 21 | "[webpack-dev-server] Disconnected!", 22 | ] 23 | `; 24 | 25 | exports[`transportMode client unspecified port on browser client logs correctly 1`] = ` 26 | Array [ 27 | "Hey.", 28 | "[webpack-dev-server] Live Reloading enabled.", 29 | "[webpack-dev-server] Disconnected!", 30 | ] 31 | `; 32 | 33 | exports[`transportMode client ws on browser client logs correctly 1`] = ` 34 | Array [ 35 | "Hey.", 36 | "[webpack-dev-server] Live Reloading enabled.", 37 | "[webpack-dev-server] Disconnected!", 38 | ] 39 | `; 40 | -------------------------------------------------------------------------------- /test/e2e/__snapshots__/universal-compiler.test.js.snap.webpack4: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`universal compiler client bundle should have the inlined the client runtime: console messages 1`] = `Array []`; 4 | 5 | exports[`universal compiler client bundle should have the inlined the client runtime: page errors 1`] = `Array []`; 6 | 7 | exports[`universal compiler server bundle should NOT have the inlined the client runtime: console messages 1`] = `Array []`; 8 | 9 | exports[`universal compiler server bundle should NOT have the inlined the client runtime: page errors 1`] = `Array []`; 10 | -------------------------------------------------------------------------------- /test/e2e/__snapshots__/universal-compiler.test.js.snap.webpack5: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`universal compiler client bundle should have the inlined the client runtime: console messages 1`] = `Array []`; 4 | 5 | exports[`universal compiler client bundle should have the inlined the client runtime: page errors 1`] = `Array []`; 6 | 7 | exports[`universal compiler server bundle should NOT have the inlined the client runtime: console messages 1`] = `Array []`; 8 | 9 | exports[`universal compiler server bundle should NOT have the inlined the client runtime: page errors 1`] = `Array []`; 10 | -------------------------------------------------------------------------------- /test/e2e/__snapshots__/web-socket-server.test.js.snap.webpack4: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`web socket server should work allow to disable: console messages 1`] = ` 4 | Array [ 5 | "Hey.", 6 | ] 7 | `; 8 | 9 | exports[`web socket server should work allow to disable: page errors 1`] = `Array []`; 10 | -------------------------------------------------------------------------------- /test/e2e/__snapshots__/web-socket-server.test.js.snap.webpack5: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`web socket server should work allow to disable: console messages 1`] = ` 4 | Array [ 5 | "Hey.", 6 | ] 7 | `; 8 | 9 | exports[`web socket server should work allow to disable: page errors 1`] = `Array []`; 10 | -------------------------------------------------------------------------------- /test/fixtures/cli-colors-default-stats/foo.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | console.log("i am foo!"); 4 | -------------------------------------------------------------------------------- /test/fixtures/cli-colors-default-stats/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const ExitOnDonePlugin = require("../../helpers/ExitOnDonePlugin"); 4 | 5 | module.exports = { 6 | mode: "development", 7 | context: __dirname, 8 | entry: "./foo.js", 9 | plugins: [new ExitOnDonePlugin()], 10 | }; 11 | -------------------------------------------------------------------------------- /test/fixtures/cli-colors-disabled/foo.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | console.log("i am foo!"); 4 | -------------------------------------------------------------------------------- /test/fixtures/cli-colors-disabled/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const ExitOnDonePlugin = require("../../helpers/ExitOnDonePlugin"); 4 | 5 | module.exports = { 6 | mode: "development", 7 | stats: { 8 | colors: false, 9 | }, 10 | context: __dirname, 11 | entry: "./foo.js", 12 | plugins: [new ExitOnDonePlugin()], 13 | }; 14 | -------------------------------------------------------------------------------- /test/fixtures/cli-colors-enabled/foo.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | console.log("i am foo!"); 4 | -------------------------------------------------------------------------------- /test/fixtures/cli-colors-enabled/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const ExitOnDonePlugin = require("../../helpers/ExitOnDonePlugin"); 4 | 5 | module.exports = { 6 | mode: "development", 7 | stats: { 8 | colors: true, 9 | }, 10 | context: __dirname, 11 | entry: "./foo.js", 12 | plugins: [new ExitOnDonePlugin()], 13 | }; 14 | -------------------------------------------------------------------------------- /test/fixtures/cli-empty-entry/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const ExitOnDonePlugin = require("../../helpers/ExitOnDonePlugin"); 4 | 5 | module.exports = { 6 | mode: "development", 7 | stats: { orphanModules: true, preset: "detailed" }, 8 | entry: {}, 9 | plugins: [new ExitOnDonePlugin()], 10 | }; 11 | -------------------------------------------------------------------------------- /test/fixtures/cli-entry-as-descriptor/foo.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | console.log("i am foo!"); 4 | -------------------------------------------------------------------------------- /test/fixtures/cli-entry-as-descriptor/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const ExitOnDonePlugin = require("../../helpers/ExitOnDonePlugin"); 4 | 5 | module.exports = { 6 | mode: "development", 7 | context: __dirname, 8 | entry: { 9 | main: { 10 | import: "./foo.js", 11 | }, 12 | }, 13 | plugins: [new ExitOnDonePlugin()], 14 | }; 15 | -------------------------------------------------------------------------------- /test/fixtures/cli-multi-entry/bar.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | console.log("I am bar"); 4 | -------------------------------------------------------------------------------- /test/fixtures/cli-multi-entry/foo.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | console.log("I am foo"); 4 | -------------------------------------------------------------------------------- /test/fixtures/cli-multi-entry/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const { resolve } = require("path"); 4 | const ExitOnDonePlugin = require("../../helpers/ExitOnDonePlugin"); 5 | 6 | module.exports = { 7 | mode: "development", 8 | stats: "detailed", 9 | context: __dirname, 10 | entry: { 11 | foo: resolve(__dirname, "./foo.js"), 12 | bar: resolve(__dirname, "./bar.js"), 13 | }, 14 | plugins: [new ExitOnDonePlugin()], 15 | }; 16 | -------------------------------------------------------------------------------- /test/fixtures/cli-promise-config/foo.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | console.log("i am foo!"); 4 | -------------------------------------------------------------------------------- /test/fixtures/cli-promise-config/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const { join } = require("path"); 4 | const ExitOnDonePlugin = require("../../helpers/ExitOnDonePlugin"); 5 | 6 | module.exports = () => 7 | new Promise((resolve) => { 8 | resolve({ 9 | mode: "development", 10 | entry: join(__dirname, "foo.js"), 11 | plugins: [new ExitOnDonePlugin()], 12 | }); 13 | }); 14 | -------------------------------------------------------------------------------- /test/fixtures/cli-single-entry/foo.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | console.log("I am foo"); 4 | -------------------------------------------------------------------------------- /test/fixtures/cli-single-entry/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const { resolve } = require("path"); 4 | const ExitOnDonePlugin = require("../../helpers/ExitOnDonePlugin"); 5 | 6 | module.exports = { 7 | mode: "development", 8 | stats: "detailed", 9 | entry: resolve(__dirname, "./foo.js"), 10 | plugins: [new ExitOnDonePlugin()], 11 | }; 12 | -------------------------------------------------------------------------------- /test/fixtures/cli-target-config/foo.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | console.log("I am foo"); 4 | -------------------------------------------------------------------------------- /test/fixtures/cli-target-config/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const { resolve } = require("path"); 4 | const ExitOnDonePlugin = require("../../helpers/ExitOnDonePlugin"); 5 | 6 | module.exports = { 7 | mode: "development", 8 | stats: "detailed", 9 | entry: resolve(__dirname, "./foo.js"), 10 | target: ["web"], 11 | plugins: [new ExitOnDonePlugin()], 12 | }; 13 | -------------------------------------------------------------------------------- /test/fixtures/cli-universal-compiler-config/client.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | console.log("Hello from the client"); 4 | -------------------------------------------------------------------------------- /test/fixtures/cli-universal-compiler-config/server.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | console.log("Hello from the server"); 4 | -------------------------------------------------------------------------------- /test/fixtures/cli-universal-compiler-config/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const ExitOnDonePlugin = require("../../helpers/ExitOnDonePlugin"); 4 | 5 | module.exports = [ 6 | { 7 | mode: "development", 8 | context: __dirname, 9 | stats: "none", 10 | entry: "./client.js", 11 | output: { 12 | path: "/", 13 | filename: "client.js", 14 | }, 15 | }, 16 | { 17 | mode: "development", 18 | context: __dirname, 19 | target: "node", 20 | stats: "none", 21 | entry: "./server.js", 22 | output: { 23 | path: "/", 24 | filename: "server.js", 25 | }, 26 | plugins: [new ExitOnDonePlugin()], 27 | }, 28 | ]; 29 | -------------------------------------------------------------------------------- /test/fixtures/cli/foo.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | console.log("i am foo!"); 4 | -------------------------------------------------------------------------------- /test/fixtures/cli/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const ExitOnDonePlugin = require("../../helpers/ExitOnDonePlugin"); 4 | 5 | module.exports = { 6 | mode: "development", 7 | stats: "detailed", 8 | context: __dirname, 9 | entry: "./foo.js", 10 | plugins: [new ExitOnDonePlugin()], 11 | }; 12 | -------------------------------------------------------------------------------- /test/fixtures/client-config/bar.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | console.log("Bar."); 4 | -------------------------------------------------------------------------------- /test/fixtures/client-config/foo.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | console.log("Hey."); 4 | -------------------------------------------------------------------------------- /test/fixtures/client-config/index.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /test/fixtures/client-config/static/foo.txt: -------------------------------------------------------------------------------- 1 | Text -------------------------------------------------------------------------------- /test/fixtures/custom-client/CustomSockJSClient.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const SockJS = require("sockjs-client/dist/sockjs"); 4 | 5 | module.exports = class SockJSClient { 6 | constructor(url) { 7 | this.sock = new SockJS( 8 | url.replace(/^ws:/i, "http://").replace(/^wss:/i, "https://") 9 | ); 10 | } 11 | 12 | onOpen(f) { 13 | this.sock.onopen = () => { 14 | console.log("open"); 15 | f(); 16 | }; 17 | } 18 | 19 | onClose(f) { 20 | this.sock.onclose = () => { 21 | console.log("close"); 22 | f(); 23 | }; 24 | } 25 | 26 | // call f with the message string as the first argument 27 | onMessage(f) { 28 | this.sock.onmessage = (e) => { 29 | const obj = JSON.parse(e.data); 30 | console.log(obj.type); 31 | f(e.data); 32 | }; 33 | } 34 | }; 35 | -------------------------------------------------------------------------------- /test/fixtures/dev-public-path/foo.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | console.log("i am foo!"); 4 | -------------------------------------------------------------------------------- /test/fixtures/dev-public-path/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const { join } = require("path"); 4 | 5 | module.exports = { 6 | mode: "development", 7 | entry: join(__dirname, "foo.js"), 8 | devServer: { 9 | devMiddleware: { 10 | publicPath: "/foo/bar", 11 | }, 12 | }, 13 | }; 14 | -------------------------------------------------------------------------------- /test/fixtures/dev-server/bar.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | console.log("I am bar"); 4 | -------------------------------------------------------------------------------- /test/fixtures/dev-server/client-custom-path-config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const { resolve } = require("path"); 4 | const ExitOnDonePlugin = require("../../helpers/ExitOnDonePlugin"); 5 | 6 | module.exports = { 7 | mode: "development", 8 | stats: "detailed", 9 | entry: resolve(__dirname, "./foo.js"), 10 | devServer: { 11 | webSocketServer: { 12 | type: "ws", 13 | options: { 14 | path: "/custom/path", 15 | }, 16 | }, 17 | }, 18 | plugins: [ExitOnDonePlugin], 19 | }; 20 | -------------------------------------------------------------------------------- /test/fixtures/dev-server/client-default-path-config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const { resolve } = require("path"); 4 | const ExitOnDonePlugin = require("../../helpers/ExitOnDonePlugin"); 5 | 6 | module.exports = { 7 | mode: "development", 8 | stats: "detailed", 9 | entry: resolve(__dirname, "./foo.js"), 10 | devServer: { 11 | webSocketServer: { 12 | type: "ws", 13 | }, 14 | }, 15 | plugins: [ExitOnDonePlugin], 16 | }; 17 | -------------------------------------------------------------------------------- /test/fixtures/dev-server/foo.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | console.log("I am foo"); 4 | -------------------------------------------------------------------------------- /test/fixtures/entry-as-function/foo.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | console.log("i am foo!"); 4 | -------------------------------------------------------------------------------- /test/fixtures/entry-as-function/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | module.exports = { 4 | mode: "development", 5 | context: __dirname, 6 | entry: () => "./foo.js", 7 | plugins: [ 8 | { 9 | apply(compiler) { 10 | compiler.hooks.done.tap("webpack-dev-server", (stats) => { 11 | let exitCode = 0; 12 | if (stats.hasErrors()) { 13 | exitCode = 1; 14 | } 15 | setTimeout(() => process.exit(exitCode)); 16 | }); 17 | }, 18 | }, 19 | ], 20 | infrastructureLogging: { 21 | level: "warn", 22 | }, 23 | }; 24 | -------------------------------------------------------------------------------- /test/fixtures/historyapifallback-2-config/bar.html: -------------------------------------------------------------------------------- 1 | Foobar 2 | -------------------------------------------------------------------------------- /test/fixtures/historyapifallback-2-config/foo.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | console.log("Hey."); 4 | -------------------------------------------------------------------------------- /test/fixtures/historyapifallback-2-config/other.html: -------------------------------------------------------------------------------- 1 | Other file 2 | -------------------------------------------------------------------------------- /test/fixtures/historyapifallback-2-config/random-file.txt: -------------------------------------------------------------------------------- 1 | Random file 2 | -------------------------------------------------------------------------------- /test/fixtures/historyapifallback-2-config/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | module.exports = { 4 | mode: "development", 5 | context: __dirname, 6 | stats: "none", 7 | entry: "./foo.js", 8 | output: { 9 | path: "/", 10 | }, 11 | infrastructureLogging: { 12 | level: "warn", 13 | }, 14 | }; 15 | -------------------------------------------------------------------------------- /test/fixtures/historyapifallback-3-config/bar.html: -------------------------------------------------------------------------------- 1 | In-memory file 2 | -------------------------------------------------------------------------------- /test/fixtures/historyapifallback-3-config/foo.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | require("./bar.html"); 4 | 5 | console.log("Hey."); 6 | -------------------------------------------------------------------------------- /test/fixtures/historyapifallback-3-config/index.html: -------------------------------------------------------------------------------- 1 | static file 2 | -------------------------------------------------------------------------------- /test/fixtures/historyapifallback-3-config/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const { version } = require("webpack"); 4 | 5 | let moduleRuleForHTML = {}; 6 | 7 | if (version.startsWith("5")) { 8 | moduleRuleForHTML = { 9 | test: /\.html$/, 10 | type: "asset/resource", 11 | generator: { 12 | filename: "index.html", 13 | }, 14 | }; 15 | } else { 16 | moduleRuleForHTML = { 17 | test: /\.html$/, 18 | loader: "file-loader", 19 | options: { name: "index.html" }, 20 | }; 21 | } 22 | 23 | module.exports = { 24 | mode: "development", 25 | context: __dirname, 26 | stats: "none", 27 | entry: "./foo.js", 28 | output: { 29 | path: "/", 30 | }, 31 | module: { 32 | rules: [ 33 | { 34 | ...moduleRuleForHTML, 35 | }, 36 | ], 37 | }, 38 | infrastructureLogging: { 39 | level: "warn", 40 | }, 41 | }; 42 | -------------------------------------------------------------------------------- /test/fixtures/historyapifallback-config/bar.html: -------------------------------------------------------------------------------- 1 | Foobar 2 | -------------------------------------------------------------------------------- /test/fixtures/historyapifallback-config/foo.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | require("./index.html"); 4 | require("./bar.html"); 5 | 6 | console.log("Hey."); 7 | -------------------------------------------------------------------------------- /test/fixtures/historyapifallback-config/index.html: -------------------------------------------------------------------------------- 1 | Heyyy 2 | -------------------------------------------------------------------------------- /test/fixtures/historyapifallback-config/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const { version } = require("webpack"); 4 | 5 | let moduleRuleForHTML = {}; 6 | 7 | if (version.startsWith("5")) { 8 | moduleRuleForHTML = { 9 | test: /\.html$/, 10 | type: "asset/resource", 11 | generator: { 12 | filename: "[name][ext]", 13 | }, 14 | }; 15 | } else { 16 | moduleRuleForHTML = { 17 | test: /\.html$/, 18 | loader: "file-loader", 19 | options: { name: "[name].[ext]" }, 20 | }; 21 | } 22 | 23 | module.exports = { 24 | mode: "development", 25 | context: __dirname, 26 | stats: "none", 27 | entry: "./foo.js", 28 | output: { 29 | path: "/", 30 | }, 31 | module: { 32 | rules: [ 33 | { 34 | ...moduleRuleForHTML, 35 | }, 36 | ], 37 | }, 38 | infrastructureLogging: { 39 | level: "warn", 40 | }, 41 | }; 42 | -------------------------------------------------------------------------------- /test/fixtures/https-certificate/ca-symlink.pem: -------------------------------------------------------------------------------- 1 | ca.pem -------------------------------------------------------------------------------- /test/fixtures/https-certificate/server-symlink.crt: -------------------------------------------------------------------------------- 1 | server.crt -------------------------------------------------------------------------------- /test/fixtures/https-certificate/server-symlink.key: -------------------------------------------------------------------------------- 1 | server.key -------------------------------------------------------------------------------- /test/fixtures/https-certificate/server-symlink.pfx: -------------------------------------------------------------------------------- 1 | server.pfx -------------------------------------------------------------------------------- /test/fixtures/https-certificate/server.crt: -------------------------------------------------------------------------------- 1 | -----BEGIN CERTIFICATE----- 2 | MIIDXTCCAkWgAwIBAgIJALz8gD/gAt0OMA0GCSqGSIb3DQEBCwUAMEUxCzAJBgNV 3 | BAYTAkFVMRMwEQYDVQQIDApTb21lLVN0YXRlMSEwHwYDVQQKDBhJbnRlcm5ldCBX 4 | aWRnaXRzIFB0eSBMdGQwHhcNMTgxMDIzMTgyMTQ5WhcNMTkxMDIzMTgyMTQ5WjBF 5 | MQswCQYDVQQGEwJBVTETMBEGA1UECAwKU29tZS1TdGF0ZTEhMB8GA1UECgwYSW50 6 | ZXJuZXQgV2lkZ2l0cyBQdHkgTHRkMIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIB 7 | CgKCAQEAxAUVLFM+K3XDLQkBi7xt0s1Ip7JoHYDskzUDQNHjjMkUq5kvC/hf5Ei1 8 | J6qruJs3Xqg86Nl4+ed4ynUajAkRRibhp0P1SG1tgPssIK6iC7g8heYuDy9WkFuM 9 | ie0513zjSn6bMEAK5TegxYAWCbaCZX/Fw9bDniabL/zuOv4sf8J4EPhsEENnH6sU 10 | E9HxPUgQmNt1Tbd0j1Cd5PXrSTLyfVPRh0m9QhXTUHuxsse8XSn9U2swduxJTWRI 11 | NmhffYn+O7kbJGI77xYr8u58Rsf3HCMI8DTKZNvQLChvvtLJ9ckyu7Q+T8emgklS 12 | tASm3V2UtnriaK/IQEhgSdxqVRib3QIDAQABo1AwTjAdBgNVHQ4EFgQUDZBhVKdb 13 | 3BRhLIhuuE522Vsul0IwHwYDVR0jBBgwFoAUDZBhVKdb3BRhLIhuuE522Vsul0Iw 14 | DAYDVR0TBAUwAwEB/zANBgkqhkiG9w0BAQsFAAOCAQEABh9WWZwWLgb9/DcTxL72 15 | 6pI96t4jiF79Q+pPefkaIIi0mE6yodWrTAsBQu9I6bNRaEcCSoiXkP2bqskD/UGg 16 | LwUFgSrDOAA3UjdHw3QU5g2NocduG7mcFwA40TB98sOsxsUyYlzSyWzoiQWwPYwb 17 | hek1djuWkqPXsTjlj54PTPN/SjTFmo4p5Ip6nbRf2nOREl7v0rJpGbJvXiCMYyd+ 18 | Zv+j4mRjCGo8ysMR2HjCUGkYReLAgKyyz3M7i8vevJhKslyOmy6Txn4F0nPVumaU 19 | DDIy4xXPW1STWfsmSYJfYW3wa0wk+pJQ3j2cTzkPQQ8gwpvM3U9DJl43uwb37v6I 20 | 7Q== 21 | -----END CERTIFICATE----- 22 | -------------------------------------------------------------------------------- /test/fixtures/https-certificate/server.pfx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/webpack-dev-server/42208aab74c5b77382b8e8058e657e478ee62174/test/fixtures/https-certificate/server.pfx -------------------------------------------------------------------------------- /test/fixtures/lazy-compilation-multiple-entries/one.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | console.log("One."); 4 | -------------------------------------------------------------------------------- /test/fixtures/lazy-compilation-multiple-entries/two.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | console.log("Two."); 4 | -------------------------------------------------------------------------------- /test/fixtures/lazy-compilation-single-entry/entry.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | console.log("Hey."); 4 | -------------------------------------------------------------------------------- /test/fixtures/mime-types-config/file.custom: -------------------------------------------------------------------------------- 1 | test 2 | -------------------------------------------------------------------------------- /test/fixtures/mime-types-config/foo.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | require("./file.custom"); 4 | 5 | console.log("Hey."); 6 | -------------------------------------------------------------------------------- /test/fixtures/mime-types-config/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const { version } = require("webpack"); 4 | 5 | let moduleRuleForCustom = {}; 6 | 7 | if (version.startsWith("5")) { 8 | moduleRuleForCustom = { 9 | test: /\.custom$/, 10 | type: "asset/resource", 11 | generator: { 12 | filename: "[name][ext]", 13 | }, 14 | }; 15 | } else { 16 | moduleRuleForCustom = { 17 | test: /\.custom$/, 18 | use: [ 19 | { 20 | loader: "file-loader", 21 | options: { 22 | name() { 23 | return "[name].[ext]"; 24 | }, 25 | }, 26 | }, 27 | ], 28 | }; 29 | } 30 | 31 | module.exports = { 32 | mode: "development", 33 | context: __dirname, 34 | stats: "none", 35 | entry: "./foo.js", 36 | output: { 37 | path: "/", 38 | }, 39 | node: false, 40 | infrastructureLogging: { 41 | level: "warn", 42 | }, 43 | module: { 44 | rules: [ 45 | { 46 | ...moduleRuleForCustom, 47 | }, 48 | ], 49 | }, 50 | }; 51 | -------------------------------------------------------------------------------- /test/fixtures/module-federation-config/entry1.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | module.exports = "entry1"; 4 | -------------------------------------------------------------------------------- /test/fixtures/module-federation-config/entry2.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | module.exports = "entry2"; 4 | -------------------------------------------------------------------------------- /test/fixtures/module-federation-config/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | module.exports = { 4 | mode: "development", 5 | target: "node", 6 | stats: "none", 7 | context: __dirname, 8 | entry: ["./entry1.js", "./entry2.js"], 9 | output: { 10 | path: "/", 11 | libraryTarget: "umd", 12 | }, 13 | infrastructureLogging: { 14 | level: "warn", 15 | }, 16 | }; 17 | -------------------------------------------------------------------------------- /test/fixtures/module-federation-config/webpack.multi.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | module.exports = [ 4 | { 5 | mode: "development", 6 | target: "node", 7 | context: __dirname, 8 | stats: "none", 9 | entry: ["./entry1.js", "./entry2.js"], 10 | output: { 11 | path: "/", 12 | libraryTarget: "umd", 13 | }, 14 | infrastructureLogging: { 15 | level: "warn", 16 | }, 17 | }, 18 | ]; 19 | -------------------------------------------------------------------------------- /test/fixtures/module-federation-config/webpack.object-entry.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | module.exports = { 4 | mode: "development", 5 | target: "node", 6 | stats: "none", 7 | context: __dirname, 8 | entry: { 9 | foo: "./entry1.js", 10 | main: ["./entry1.js", "./entry2.js"], 11 | }, 12 | output: { 13 | path: "/", 14 | libraryTarget: "umd", 15 | }, 16 | infrastructureLogging: { 17 | level: "warn", 18 | }, 19 | }; 20 | -------------------------------------------------------------------------------- /test/fixtures/module-federation-config/webpack.plugin.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const ModuleFederationPlugin = 4 | require("webpack").container.ModuleFederationPlugin; 5 | 6 | module.exports = { 7 | mode: "development", 8 | target: "node", 9 | stats: "none", 10 | context: __dirname, 11 | entry: ["./entry1.js"], 12 | plugins: [ 13 | new ModuleFederationPlugin({ 14 | name: "app1", 15 | library: { type: "var", name: "app1" }, 16 | filename: "remoteEntry.js", 17 | exposes: { 18 | "./entry1": "./entry1", 19 | }, 20 | }), 21 | ], 22 | infrastructureLogging: { 23 | level: "warn", 24 | }, 25 | }; 26 | -------------------------------------------------------------------------------- /test/fixtures/multi-compiler-one-configuration/foo.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | console.log("Hey."); 4 | -------------------------------------------------------------------------------- /test/fixtures/multi-compiler-one-configuration/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const webpack = require("webpack"); 4 | 5 | const isWebpack5 = webpack.version.startsWith("5"); 6 | 7 | module.exports = [ 8 | { 9 | target: "web", 10 | mode: "development", 11 | context: __dirname, 12 | stats: "none", 13 | entry: "./foo.js", 14 | output: { 15 | path: "/", 16 | }, 17 | node: false, 18 | infrastructureLogging: isWebpack5 19 | ? { 20 | level: "info", 21 | stream: { 22 | write: () => {}, 23 | }, 24 | } 25 | : { 26 | level: "info", 27 | }, 28 | }, 29 | ]; 30 | -------------------------------------------------------------------------------- /test/fixtures/multi-compiler-two-configurations/one.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | console.log("one"); 4 | -------------------------------------------------------------------------------- /test/fixtures/multi-compiler-two-configurations/two.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | console.log("two"); 4 | -------------------------------------------------------------------------------- /test/fixtures/multi-compiler-two-configurations/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const webpack = require("webpack"); 4 | 5 | const isWebpack5 = webpack.version.startsWith("5"); 6 | 7 | module.exports = [ 8 | { 9 | target: "web", 10 | name: "one", 11 | mode: "development", 12 | context: __dirname, 13 | entry: "./one.js", 14 | stats: "none", 15 | output: { 16 | path: "/", 17 | filename: "one-[name].js", 18 | }, 19 | infrastructureLogging: isWebpack5 20 | ? { 21 | level: "info", 22 | stream: { 23 | write: () => {}, 24 | }, 25 | } 26 | : { 27 | level: "info", 28 | }, 29 | }, 30 | { 31 | target: "web", 32 | name: "two", 33 | mode: "development", 34 | context: __dirname, 35 | entry: "./two.js", 36 | stats: "none", 37 | output: { 38 | path: "/", 39 | filename: "two-[name].js", 40 | }, 41 | infrastructureLogging: isWebpack5 42 | ? { 43 | level: "info", 44 | stream: { 45 | write: () => {}, 46 | }, 47 | } 48 | : { 49 | level: "info", 50 | }, 51 | }, 52 | ]; 53 | -------------------------------------------------------------------------------- /test/fixtures/multi-public-path-config/bar.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | console.log("Hey."); 4 | -------------------------------------------------------------------------------- /test/fixtures/multi-public-path-config/baz.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | console.log("Hey."); 4 | -------------------------------------------------------------------------------- /test/fixtures/multi-public-path-config/foo.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | require("./test.html"); 4 | -------------------------------------------------------------------------------- /test/fixtures/multi-public-path-config/test.html: -------------------------------------------------------------------------------- 1 | hello 2 | -------------------------------------------------------------------------------- /test/fixtures/overlay-config/foo.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/webpack-dev-server/42208aab74c5b77382b8e8058e657e478ee62174/test/fixtures/overlay-config/foo.js -------------------------------------------------------------------------------- /test/fixtures/overlay-config/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const webpack = require("webpack"); 4 | 5 | const isWebpack5 = webpack.version.startsWith("5"); 6 | 7 | module.exports = { 8 | mode: "development", 9 | context: __dirname, 10 | stats: "none", 11 | entry: "./foo.js", 12 | output: { 13 | path: "/", 14 | }, 15 | infrastructureLogging: isWebpack5 16 | ? { 17 | level: "info", 18 | stream: { 19 | write: () => {}, 20 | }, 21 | } 22 | : { 23 | level: "info", 24 | }, 25 | }; 26 | -------------------------------------------------------------------------------- /test/fixtures/provide-plugin-custom/foo.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // 'npm run prepare' must be run for this to work during testing 4 | const CustomClient = require("../../fixtures/custom-client/CustomSockJSClient"); 5 | 6 | window.expectedClient = CustomClient; 7 | // eslint-disable-next-line camelcase, no-undef 8 | window.injectedClient = __webpack_dev_server_client__; 9 | -------------------------------------------------------------------------------- /test/fixtures/provide-plugin-custom/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const webpack = require("webpack"); 4 | 5 | const isWebpack5 = webpack.version.startsWith("5"); 6 | 7 | module.exports = { 8 | mode: "development", 9 | context: __dirname, 10 | stats: "none", 11 | entry: "./foo.js", 12 | output: { 13 | path: "/", 14 | }, 15 | node: false, 16 | infrastructureLogging: isWebpack5 17 | ? { 18 | level: "info", 19 | stream: { 20 | write: () => {}, 21 | }, 22 | } 23 | : { 24 | level: "info", 25 | }, 26 | }; 27 | -------------------------------------------------------------------------------- /test/fixtures/provide-plugin-default/foo.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // 'npm run prepare' must be run for this to work during testing 4 | const WebsocketClient = 5 | require("../../../client/clients/WebSocketClient").default; 6 | 7 | window.expectedClient = WebsocketClient; 8 | // eslint-disable-next-line camelcase, no-undef 9 | window.injectedClient = __webpack_dev_server_client__.default; 10 | -------------------------------------------------------------------------------- /test/fixtures/provide-plugin-default/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const webpack = require("webpack"); 4 | 5 | const isWebpack5 = webpack.version.startsWith("5"); 6 | 7 | module.exports = { 8 | mode: "development", 9 | context: __dirname, 10 | stats: "none", 11 | entry: "./foo.js", 12 | output: { 13 | path: "/", 14 | }, 15 | node: false, 16 | infrastructureLogging: isWebpack5 17 | ? { 18 | level: "info", 19 | stream: { 20 | write: () => {}, 21 | }, 22 | } 23 | : { 24 | level: "info", 25 | }, 26 | }; 27 | -------------------------------------------------------------------------------- /test/fixtures/provide-plugin-sockjs-config/foo.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // 'npm run prepare' must be run for this to work during testing 4 | const SockJSClient = require("../../../client/clients/SockJSClient").default; 5 | 6 | window.expectedClient = SockJSClient; 7 | // eslint-disable-next-line camelcase, no-undef 8 | window.injectedClient = __webpack_dev_server_client__.default; 9 | -------------------------------------------------------------------------------- /test/fixtures/provide-plugin-sockjs-config/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const webpack = require("webpack"); 4 | 5 | const isWebpack5 = webpack.version.startsWith("5"); 6 | 7 | module.exports = { 8 | mode: "development", 9 | context: __dirname, 10 | stats: "none", 11 | entry: "./foo.js", 12 | output: { 13 | path: "/", 14 | }, 15 | node: false, 16 | infrastructureLogging: isWebpack5 17 | ? { 18 | level: "info", 19 | stream: { 20 | write: () => {}, 21 | }, 22 | } 23 | : { 24 | level: "info", 25 | }, 26 | }; 27 | -------------------------------------------------------------------------------- /test/fixtures/provide-plugin-ws-config/foo.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // 'npm run prepare' must be run for this to work during testing 4 | const WebsocketClient = 5 | require("../../../client/clients/WebSocketClient").default; 6 | 7 | window.expectedClient = WebsocketClient; 8 | // eslint-disable-next-line camelcase, no-undef 9 | window.injectedClient = __webpack_dev_server_client__.default; 10 | -------------------------------------------------------------------------------- /test/fixtures/provide-plugin-ws-config/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const webpack = require("webpack"); 4 | 5 | const isWebpack5 = webpack.version.startsWith("5"); 6 | 7 | module.exports = { 8 | mode: "development", 9 | context: __dirname, 10 | stats: "none", 11 | entry: "./foo.js", 12 | output: { 13 | path: "/", 14 | }, 15 | node: false, 16 | infrastructureLogging: isWebpack5 17 | ? { 18 | level: "info", 19 | stream: { 20 | write: () => {}, 21 | }, 22 | } 23 | : { 24 | level: "info", 25 | }, 26 | }; 27 | -------------------------------------------------------------------------------- /test/fixtures/proxy-config/foo.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | console.log("Hey."); 4 | -------------------------------------------------------------------------------- /test/fixtures/proxy-config/index.html: -------------------------------------------------------------------------------- 1 | Hello 2 | -------------------------------------------------------------------------------- /test/fixtures/proxy-config/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | module.exports = { 4 | mode: "development", 5 | context: __dirname, 6 | stats: "none", 7 | entry: "./foo.js", 8 | output: { 9 | path: "/", 10 | }, 11 | infrastructureLogging: { 12 | level: "warn", 13 | }, 14 | }; 15 | -------------------------------------------------------------------------------- /test/fixtures/reload-config-2/foo.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // eslint-disable-next-line import/no-unresolved 4 | require("./main.css"); 5 | -------------------------------------------------------------------------------- /test/fixtures/reload-config-2/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const webpack = require("webpack"); 4 | 5 | const isWebpack5 = webpack.version.startsWith("5"); 6 | 7 | module.exports = { 8 | mode: "development", 9 | context: __dirname, 10 | stats: "none", 11 | entry: "./foo.js", 12 | output: { 13 | path: "/", 14 | }, 15 | module: { 16 | rules: [ 17 | { 18 | test: /\.css$/, 19 | use: [{ loader: "style-loader" }, { loader: "css-loader" }], 20 | }, 21 | ], 22 | }, 23 | node: false, 24 | infrastructureLogging: isWebpack5 25 | ? { 26 | level: "info", 27 | stream: { 28 | write: () => {}, 29 | }, 30 | } 31 | : { 32 | level: "info", 33 | }, 34 | }; 35 | -------------------------------------------------------------------------------- /test/fixtures/reload-config/foo.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // eslint-disable-next-line import/no-unresolved 4 | require("./main.css"); 5 | -------------------------------------------------------------------------------- /test/fixtures/reload-config/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const webpack = require("webpack"); 4 | 5 | const isWebpack5 = webpack.version.startsWith("5"); 6 | 7 | module.exports = { 8 | mode: "development", 9 | context: __dirname, 10 | entry: "./foo.js", 11 | stats: "none", 12 | output: { 13 | path: "/", 14 | }, 15 | module: { 16 | rules: [ 17 | { 18 | test: /\.css$/, 19 | use: [{ loader: "style-loader" }, { loader: "css-loader" }], 20 | }, 21 | ], 22 | }, 23 | infrastructureLogging: isWebpack5 24 | ? { 25 | level: "info", 26 | stream: { 27 | write: () => {}, 28 | }, 29 | } 30 | : { 31 | level: "info", 32 | }, 33 | }; 34 | -------------------------------------------------------------------------------- /test/fixtures/schema/webpack.config.simple.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | module.exports = { 4 | mode: "development", 5 | context: __dirname, 6 | entry: "./foo.js", 7 | output: { 8 | path: "/", 9 | }, 10 | infrastructureLogging: { 11 | level: "warn", 12 | }, 13 | }; 14 | -------------------------------------------------------------------------------- /test/fixtures/simple-config-other/foo.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | console.log( 4 | "Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Long Line." 5 | ); 6 | -------------------------------------------------------------------------------- /test/fixtures/simple-config-other/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | module.exports = { 4 | mode: "development", 5 | context: __dirname, 6 | stats: "none", 7 | entry: "./foo.js", 8 | output: { 9 | path: "/", 10 | }, 11 | node: false, 12 | infrastructureLogging: { 13 | level: "warn", 14 | }, 15 | }; 16 | -------------------------------------------------------------------------------- /test/fixtures/simple-config/foo.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | console.log("Hey."); 4 | -------------------------------------------------------------------------------- /test/fixtures/simple-config/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const webpack = require("webpack"); 4 | 5 | const isWebpack5 = webpack.version.startsWith("5"); 6 | 7 | module.exports = { 8 | mode: "development", 9 | context: __dirname, 10 | stats: "none", 11 | entry: "./foo.js", 12 | output: { 13 | path: "/", 14 | }, 15 | node: false, 16 | infrastructureLogging: isWebpack5 17 | ? { 18 | level: "info", 19 | stream: { 20 | write: () => {}, 21 | }, 22 | } 23 | : { 24 | level: "info", 25 | }, 26 | }; 27 | -------------------------------------------------------------------------------- /test/fixtures/static-config/foo.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | console.log("Hey."); 4 | -------------------------------------------------------------------------------- /test/fixtures/static-config/other/foo.html: -------------------------------------------------------------------------------- 1 | Foo! 2 | -------------------------------------------------------------------------------- /test/fixtures/static-config/public/assets/example.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/webpack-dev-server/42208aab74c5b77382b8e8058e657e478ee62174/test/fixtures/static-config/public/assets/example.txt -------------------------------------------------------------------------------- /test/fixtures/static-config/public/assets/other.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/webpack-dev-server/42208aab74c5b77382b8e8058e657e478ee62174/test/fixtures/static-config/public/assets/other.txt -------------------------------------------------------------------------------- /test/fixtures/static-config/public/bar/index.html: -------------------------------------------------------------------------------- 1 | Heyo 2 | -------------------------------------------------------------------------------- /test/fixtures/static-config/public/foo.wasm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/webpack-dev-server/42208aab74c5b77382b8e8058e657e478ee62174/test/fixtures/static-config/public/foo.wasm -------------------------------------------------------------------------------- /test/fixtures/static-config/public/index.html: -------------------------------------------------------------------------------- 1 | Heyo. 2 | -------------------------------------------------------------------------------- /test/fixtures/static-config/public/node_modules/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/webpack-dev-server/42208aab74c5b77382b8e8058e657e478ee62174/test/fixtures/static-config/public/node_modules/.gitkeep -------------------------------------------------------------------------------- /test/fixtures/static-config/public/other.html: -------------------------------------------------------------------------------- 1 | Other html 2 | -------------------------------------------------------------------------------- /test/fixtures/static-config/static/index.html: -------------------------------------------------------------------------------- 1 | Heyo. 2 | -------------------------------------------------------------------------------- /test/fixtures/static-config/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | module.exports = { 4 | mode: "development", 5 | context: __dirname, 6 | stats: "none", 7 | entry: "./foo.js", 8 | output: { 9 | publicPath: "/", 10 | }, 11 | infrastructureLogging: { 12 | level: "warn", 13 | }, 14 | }; 15 | -------------------------------------------------------------------------------- /test/fixtures/static/foo.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | console.log("i am foo!"); 4 | -------------------------------------------------------------------------------- /test/fixtures/static/static/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 10 | Document 11 | 12 | 13 | Test 14 | 15 | 16 | -------------------------------------------------------------------------------- /test/fixtures/static/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const path = require("path"); 4 | 5 | module.exports = { 6 | mode: "development", 7 | entry: path.resolve(__dirname, "foo.js"), 8 | devServer: { 9 | static: path.resolve(__dirname, "static"), 10 | }, 11 | }; 12 | -------------------------------------------------------------------------------- /test/fixtures/universal-compiler-config/browser.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | console.log("Hello from the browser"); 4 | -------------------------------------------------------------------------------- /test/fixtures/universal-compiler-config/server.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | console.log("Hello from the server"); 4 | -------------------------------------------------------------------------------- /test/fixtures/universal-compiler-config/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const webpack = require("webpack"); 4 | 5 | const isWebpack5 = webpack.version.startsWith("5"); 6 | 7 | module.exports = [ 8 | { 9 | name: "browser", 10 | mode: "development", 11 | context: __dirname, 12 | stats: "none", 13 | entry: "./browser.js", 14 | output: { 15 | path: "/", 16 | filename: "browser.js", 17 | }, 18 | infrastructureLogging: isWebpack5 19 | ? { 20 | level: "info", 21 | stream: { 22 | write: () => {}, 23 | }, 24 | } 25 | : { 26 | level: "info", 27 | }, 28 | }, 29 | { 30 | name: "server", 31 | mode: "development", 32 | context: __dirname, 33 | target: "node", 34 | stats: "none", 35 | entry: "./server.js", 36 | output: { 37 | path: "/", 38 | filename: "server.js", 39 | }, 40 | infrastructureLogging: isWebpack5 41 | ? { 42 | level: "info", 43 | stream: { 44 | write: () => {}, 45 | }, 46 | } 47 | : { 48 | level: "info", 49 | }, 50 | }, 51 | ]; 52 | -------------------------------------------------------------------------------- /test/helpers/ExitOnDonePlugin.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | module.exports = class ExitOnDonePlugin { 4 | // eslint-disable-next-line class-methods-use-this 5 | apply(compiler) { 6 | compiler.hooks.done.tap("webpack-dev-server", (stats) => { 7 | let exitCode = 0; 8 | 9 | if (stats.hasErrors()) { 10 | exitCode = 1; 11 | } 12 | 13 | setTimeout(() => process.exit(exitCode)); 14 | }); 15 | } 16 | }; 17 | -------------------------------------------------------------------------------- /test/helpers/conditional-test.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const isWindows = process.platform === "win32"; 4 | 5 | function skipTestOnWindows(reason) { 6 | if (isWindows) { 7 | test.skip(reason, () => {}); 8 | } 9 | return isWindows; 10 | } 11 | 12 | module.exports.skipTestOnWindows = skipTestOnWindows; 13 | -------------------------------------------------------------------------------- /test/helpers/custom-http.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const customHTTP = require("http"); 4 | 5 | module.exports = customHTTP; 6 | -------------------------------------------------------------------------------- /test/helpers/isWebpack5.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const webpack = require("webpack"); 4 | 5 | const isWebpack5 = webpack.version[0] === "5"; 6 | 7 | module.exports = isWebpack5; 8 | -------------------------------------------------------------------------------- /test/helpers/normalize-options.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | function normalizeOptions(options) { 4 | const normalizedOptions = {}; 5 | 6 | // eslint-disable-next-line guard-for-in 7 | for (const propertyName in options) { 8 | let value = options[propertyName]; 9 | 10 | if (Array.isArray(value)) { 11 | value = value.map((item) => { 12 | if (Buffer.isBuffer(item)) { 13 | return ""; 14 | } else if ( 15 | typeof item.pem !== "undefined" && 16 | Buffer.isBuffer(item.pem) 17 | ) { 18 | item.pem = ""; 19 | } else if ( 20 | typeof item.buf !== "undefined" && 21 | Buffer.isBuffer(item.buf) 22 | ) { 23 | item.buf = ""; 24 | } 25 | 26 | return item; 27 | }); 28 | } else if (Buffer.isBuffer(value)) { 29 | value = ""; 30 | } 31 | 32 | normalizedOptions[propertyName] = value; 33 | } 34 | 35 | return normalizedOptions; 36 | } 37 | 38 | module.exports = normalizeOptions; 39 | -------------------------------------------------------------------------------- /test/helpers/run-browser.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const puppeteer = require("puppeteer"); 4 | const { puppeteerArgs } = require("./puppeteer-constants"); 5 | 6 | function runBrowser(config) { 7 | const options = { 8 | viewport: { 9 | width: 500, 10 | height: 500, 11 | }, 12 | userAgent: "", 13 | ...config, 14 | }; 15 | 16 | return new Promise((resolve, reject) => { 17 | let page; 18 | let browser; 19 | 20 | puppeteer 21 | .launch({ 22 | headless: true, 23 | // because of invalid localhost certificate 24 | ignoreHTTPSErrors: true, 25 | // args come from: https://github.com/alixaxel/chrome-aws-lambda/blob/master/source/index.js 26 | args: puppeteerArgs, 27 | }) 28 | .then((launchedBrowser) => { 29 | browser = launchedBrowser; 30 | 31 | return browser.newPage(); 32 | }) 33 | .then((newPage) => { 34 | page = newPage; 35 | page.emulate(options); 36 | 37 | resolve({ page, browser }); 38 | }) 39 | .catch(reject); 40 | }); 41 | } 42 | 43 | module.exports = runBrowser; 44 | -------------------------------------------------------------------------------- /test/helpers/snapshotResolver.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const path = require("path"); 4 | const webpack = require("webpack"); 5 | 6 | const [webpackVersion] = webpack.version; 7 | const snapshotExtension = `.snap.webpack${webpackVersion}`; 8 | 9 | module.exports = { 10 | resolveSnapshotPath: (testPath) => 11 | path.join( 12 | path.dirname(testPath), 13 | "__snapshots__", 14 | `${path.basename(testPath)}${snapshotExtension}` 15 | ), 16 | resolveTestPath: (snapshotPath) => 17 | snapshotPath 18 | .replace(`${path.sep}__snapshots__`, "") 19 | .slice(0, -snapshotExtension.length), 20 | testPathForConsistencyCheck: path.join( 21 | "consistency_check", 22 | "__tests__", 23 | "example.test.js" 24 | ), 25 | }; 26 | -------------------------------------------------------------------------------- /test/server/__snapshots__/Server.test.js.snap.webpack4: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`Server DevServerPlugin add hot option 1`] = ` 4 | Array [ 5 | Array [ 6 | "client", 7 | "index.js?protocol=ws%3A&hostname=localhost&port=8124&pathname=%2Fws&logging=info&reconnect=10", 8 | ], 9 | Array [ 10 | "node_modules", 11 | "webpack", 12 | "hot", 13 | "dev-server.js", 14 | ], 15 | Array [ 16 | "foo.js", 17 | ], 18 | ] 19 | `; 20 | 21 | exports[`Server DevServerPlugin add hot-only option 1`] = ` 22 | Array [ 23 | Array [ 24 | "client", 25 | "index.js?protocol=ws%3A&hostname=localhost&port=8124&pathname=%2Fws&logging=info&reconnect=10", 26 | ], 27 | Array [ 28 | "node_modules", 29 | "webpack", 30 | "hot", 31 | "only-dev-server.js", 32 | ], 33 | Array [ 34 | "foo.js", 35 | ], 36 | ] 37 | `; 38 | 39 | exports[`Server DevServerPlugin should create and run server with old parameters order and log deprecation warning: oldparam 1`] = ` 40 | Array [ 41 | Array [ 42 | "client", 43 | "index.js?protocol=ws%3A&hostname=localhost&port=8124&pathname=%2Fws&logging=info&reconnect=10", 44 | ], 45 | Array [ 46 | "node_modules", 47 | "webpack", 48 | "hot", 49 | "dev-server.js", 50 | ], 51 | Array [ 52 | "foo.js", 53 | ], 54 | ] 55 | `; 56 | -------------------------------------------------------------------------------- /test/server/__snapshots__/Server.test.js.snap.webpack5: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`Server DevServerPlugin add hot option 1`] = ` 4 | Array [ 5 | Array [ 6 | "client", 7 | "index.js?protocol=ws%3A&hostname=localhost&port=8124&pathname=%2Fws&logging=info&reconnect=10", 8 | ], 9 | Array [ 10 | "node_modules", 11 | "webpack", 12 | "hot", 13 | "dev-server.js", 14 | ], 15 | Array [ 16 | "foo.js", 17 | ], 18 | ] 19 | `; 20 | 21 | exports[`Server DevServerPlugin add hot-only option 1`] = ` 22 | Array [ 23 | Array [ 24 | "client", 25 | "index.js?protocol=ws%3A&hostname=localhost&port=8124&pathname=%2Fws&logging=info&reconnect=10", 26 | ], 27 | Array [ 28 | "node_modules", 29 | "webpack", 30 | "hot", 31 | "only-dev-server.js", 32 | ], 33 | Array [ 34 | "foo.js", 35 | ], 36 | ] 37 | `; 38 | 39 | exports[`Server DevServerPlugin should create and run server with old parameters order and log deprecation warning: oldparam 1`] = ` 40 | Array [ 41 | Array [ 42 | "client", 43 | "index.js?protocol=ws%3A&hostname=localhost&port=8124&pathname=%2Fws&logging=info&reconnect=10", 44 | ], 45 | Array [ 46 | "node_modules", 47 | "webpack", 48 | "hot", 49 | "dev-server.js", 50 | ], 51 | Array [ 52 | "foo.js", 53 | ], 54 | ] 55 | `; 56 | -------------------------------------------------------------------------------- /test/server/__snapshots__/webSocketServer-option.test.js.snap.webpack4: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`webSocketServer server passed to server with a bad host header results in an error 1`] = ` 4 | Array [ 5 | "open", 6 | "{\\"type\\":\\"error\\",\\"data\\":\\"Invalid Host/Origin header\\"}", 7 | "close", 8 | ] 9 | `; 10 | 11 | exports[`webSocketServer server passed to server without a header results in an error 1`] = ` 12 | Array [ 13 | "open", 14 | "{\\"type\\":\\"error\\",\\"data\\":\\"Invalid Host/Origin header\\"}", 15 | "close", 16 | ] 17 | `; 18 | -------------------------------------------------------------------------------- /test/server/__snapshots__/webSocketServer-option.test.js.snap.webpack5: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`webSocketServer server passed to server with a bad host header results in an error 1`] = ` 4 | Array [ 5 | "open", 6 | "{\\"type\\":\\"error\\",\\"data\\":\\"Invalid Host/Origin header\\"}", 7 | "close", 8 | ] 9 | `; 10 | 11 | exports[`webSocketServer server passed to server without a header results in an error 1`] = ` 12 | Array [ 13 | "open", 14 | "{\\"type\\":\\"error\\",\\"data\\":\\"Invalid Host/Origin header\\"}", 15 | "close", 16 | ] 17 | `; 18 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2017", 4 | "module": "commonjs", 5 | "lib": ["es2017", "dom"], 6 | "allowJs": true, 7 | "checkJs": true, 8 | "noEmit": true, 9 | "strict": false, 10 | "noImplicitThis": true, 11 | "alwaysStrict": true, 12 | "types": ["node"], 13 | "esModuleInterop": true 14 | }, 15 | "include": ["bin/webpack-dev-server.js"] 16 | } 17 | --------------------------------------------------------------------------------