Merge branch 'master' of https://github.com/webpack/webpack-dev-server

� Conflicts:
�	lib/utils/DevServerPlugin.js
�	test/server/utils/DevServerPlugin.test.js

Author: jeromeh

.github/workflows/nodejs.yml

@@ -78,19 +78,25 @@ jobs:
         if: matrix.os == 'windows-latest'
         run: npm i -g npm
 
+      - name: Get npm cache directory
+        id: npm-cache-dir
+        run: |
+          echo "::set-output name=dir::$(npm config get cache)"
+
       - name: Cache Node.js modules
         id: cache
         uses: actions/cache@v2
         with:
-          # npm cache files are stored in `~/.npm` on Linux/macOS
-          path: ~/.npm
-          key: ${{ runner.OS }}-${{ matrix.node-version }}-${{ hashFiles('**/package-lock.json') }}
+          path: ${{ steps.npm-cache-dir.outputs.dir }}
+          key: ${{ runner.os }}-${{ matrix.webpack-version }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-${{ matrix.webpack-version }}-node-
 
       - name: Install dependencies
-        if: steps.cache.outputs.cache-hit != 'true'
         run: npm ci
 
       - name: Install webpack ${{ matrix.webpack-version }}
+        if: matrix.webpack-version == '4'
         run: npm i webpack@${{ matrix.webpack-version }}
 
       - name: Link webpack-dev-server

CODE_OF_CONDUCT.md

@@ -0,0 +1,7 @@
+## Code of Conduct
+
+At webpack and webpack/webpack-cli repository we follow the [JSFoundation Code of Conduct][1].
+Please adhere to the guidelines there and feel free to report any violation of them to the **@webpack/core-team**,
+**@webpack/dev-server-team**, or <[email protected]>.
+
+[1]: https://github.com/openjs-foundation/code-and-learn/blob/main/CODE_OF_CONDUCT.md

CONTRIBUTING.md

@@ -10,18 +10,24 @@ Following these guidelines helps to communicate that you respect the time of the
 
 - There are hooks to add your own features, so we should not add less-common features.
 - The workflow should be to start webpack-dev-server as a separate process, next to the "normal" server and to request the script from this server or to proxy from dev-server to "normal" server (because webpack blocks the event queue too much while compiling which can affect "normal" server).
-- A user should not try to implement stuff that accesses the webpack filesystem. This lead to bugs (the middleware does it while blocking requests until the compilation has finished, the blocking is important).
+- A user should not try to implement stuff that accesses the webpack filesystem. This leads to bugs (the middleware does it while blocking requests until the compilation has finished, the blocking is important).
 - It should be a development only tool. Compiling in production is bad, one should precompile and deliver the compiled assets.
 - Processing options and stats display is delegated to webpack, so webpack-dev-server/middleware should not do much with it. This also helps us to keep up-to-date with webpack updates.
 - The communication library (`SockJS`) should not be exposed to the user.
 
 ## Submitting a Pull Request
 
-Good pull requests, such as patches, improvements, and new features, are a fantastic help. They should remain focused in scope and not contain unrelated commits.
+- Good pull requests, such as patches, improvements, and new features, are a fantastic help. They should remain focused in scope and not contain unrelated commits.
 
-It is advised to first create an issue (if there is not one already) before making a pull request. This way the maintainers can first discuss with you if they agree and it also helps with providing some context.
+- It is advised to first create an issue (if there is not one already) before making a pull request. This way the maintainers can first discuss with you if they agree and it also helps with providing some context.
 
-Run the relevant [examples](https://github.com/webpack/webpack-dev-server/tree/master/examples) to see if all functionality still works. When introducing new functionality, also add an example. This helps the maintainers to understand it and check if it still works.
+- Run the relevant [examples](https://github.com/webpack/webpack-dev-server/tree/master/examples) to see if all functionality still works. When introducing new functionality, also add an example. This helps the maintainers to understand it and check if it still works.
+
+- Write tests.
+
+- Follow the existing coding style.
+
+- Make sure your PR's description contains GitHub's special keyword references that automatically close the related issue when the PR is merged. ([More info](https://github.com/blog/1506-closing-issues-via-pull-requests))
 
 ## Setting Up a Local Copy
 
@@ -31,7 +37,7 @@ Run the relevant [examples](https://github.com/webpack/webpack-dev-server/tree/m
 
 3. Run `npm link && npm link webpack-dev-server` to link the current project to `node_modules`.
 
-Once it is done, you can modify any file locally. In the `examples/` directory you'll find a lot of examples with instructions on how to run it. This can be very handy when testing if your code works.
+Once it is done, you can modify any file locally. In the `examples/` directory you'll find a lot of examples with instructions on how to run them. This can be very handy when testing if your code works.
 
 If you are modifying a file in the `client/` directory, be sure to run `npm run build:client` after it. This will recompile the files.
 

README.md

@@ -58,7 +58,60 @@ The easiest way to use it is with the [webpack CLI](https://webpack.js.org/api/c
 node_modules/.bin/webpack serve
 ```
 
-_**Note**: Many CLI options are available with `webpack serve`. Explore this [link](https://webpack.js.org/configuration/dev-server/)._
+Following options are available with `webpack serve`:
+
+```
+Usage: webpack serve|s [entries...] [options]
+
+Options:
+  -c, --config <value...>    Provide path to a webpack configuration file e.g. ./webpack.config.js.
+  --config-name <value...>   Name of the configuration to use.
+  -m, --merge                Merge two or more configurations using 'webpack-merge'.
+  --env <value...>           Environment passed to the configuration when it is a function.
+  --progress [value]         Print compilation progress during build.
+  -j, --json [value]         Prints result as JSON or store it in a file.
+  -d, --devtool <value>      Determine source maps to use.
+  --no-devtool               Do not generate source maps.
+  --entry <value...>         The entry point(s) of your application e.g. ./src/main.js.
+  --mode <value>             Defines the mode to pass to webpack.
+  --name <value>             Name of the configuration. Used when loading multiple configurations.
+  -o, --output-path <value>  Output location of the file generated by webpack e.g. ./dist/.
+  --stats [value]            It instructs webpack on how to treat the stats e.g. verbose.
+  --no-stats                 Disable stats output.
+  -t, --target <value...>    Sets the build target e.g. node.
+  --watch-options-stdin      Stop watching when stdin stream has ended.
+  --no-watch-options-stdin   Do not stop watching when stdin stream has ended.
+  --host <value>             The hostname/ip address the server will bind to.
+  --port <value>             The port server will listen to.
+  --static [value...]        A directory to serve static content from.
+  --no-static                Negative 'static' option.
+  --live-reload              Enables live reloading on changing files.
+  --no-live-reload           Disables live reloading on changing files.
+  --https                    Use HTTPS protocol.
+  --http2                    Use HTTP/2, must be used with HTTPS.
+  --bonjour                  Broadcasts the server via ZeroConf networking on start.
+  --client-progress          Print compilation progress in percentage in the browser.
+  --hot-only                 Do not refresh page if HMR fails.
+  --setup-exit-signals       Close and exit the process on SIGINT and SIGTERM.
+  --no-setup-exit-signals    Do not close and exit the process on SIGNIT and SIGTERM.
+  --stdin                    Close when stdin ends.
+  --open [value]             Open the default browser, or optionally specify a browser name.
+  --use-local-ip             Open default browser with local IP.
+  --open-page <value...>     Open default browser with the specified page.
+  --client-logging <value>   Log level in the browser (none, error, warn, info, log, verbose).
+  --history-api-fallback     Fallback to /index.html for Single Page Applications.
+  --compress                 Enable gzip compression.
+  --public <value>           The public hostname/ip address of the server.
+  --firewall <value...>      Enable/disable firewall, or set hosts that are allowed to access the dev server.
+
+Global options:
+  --color                    Enable colors on console.
+  --no-color                 Disable colors on console.
+  -v, --version              Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and commands.
+  -h, --help [verbose]       Display help for commands and options.
+```
+
+_**Note**: For more information on above options explore this [link](https://webpack.js.org/configuration/dev-server/)._
 
 ### With NPM Scripts
 
@@ -108,7 +161,7 @@ needed modifications to the code for the module. Because of that, we ask users
 with general support, "how-to", or "why isn't this working" questions to try one
 of the other support channels that are available.
 
-Your first-stop-shop for support for webpack-dev-server should by the excellent
+Your first-stop-shop for support for webpack-dev-server should be the excellent
 [documentation][docs-url] for the module. If you see an opportunity for improvement
 of those docs, please head over to the [webpack.js.org repo][wjo-url] and open a
 pull request.

bin/cli-flags.js

@@ -5,12 +5,12 @@ module.exports = {
     {
       name: 'host',
       type: String,
-      description: 'The hostname/ip address the server will bind to',
+      description: 'The hostname/ip address the server will bind to.',
     },
     {
       name: 'port',
       type: Number,
-      description: 'The port',
+      description: 'The port server will listen to.',
     },
     {
       name: 'static',
@@ -22,28 +22,29 @@ module.exports = {
     {
       name: 'live-reload',
       type: Boolean,
-      description: 'Enables/Disables live reloading on changing files',
+      description: 'Enables live reloading on changing files.',
+      negatedDescription: 'Disables live reloading on changing files.',
       negative: true,
     },
     {
       name: 'https',
       type: Boolean,
-      description: 'HTTPS',
+      description: 'Use HTTPS protocol.',
     },
     {
       name: 'http2',
       type: Boolean,
-      description: 'HTTP/2, must be used with HTTPS',
+      description: 'Use HTTP/2, must be used with HTTPS.',
     },
     {
       name: 'bonjour',
       type: Boolean,
-      description: 'Broadcasts the server via ZeroConf networking on start',
+      description: 'Broadcasts the server via ZeroConf networking on start.',
     },
     {
       name: 'client-progress',
       type: Boolean,
-      description: 'Print compilation progress in percentage in the browser',
+      description: 'Print compilation progress in percentage in the browser.',
       processor(opts) {
         opts.client = opts.client || {};
         opts.client.progress = opts.clientProgress;
@@ -53,7 +54,7 @@ module.exports = {
     {
       name: 'hot-only',
       type: Boolean,
-      description: 'Do not refresh page if HMR fails',
+      description: 'Do not refresh page if HMR fails.',
       processor(opts) {
         opts.hot = 'only';
         delete opts.hotOnly;
@@ -62,36 +63,38 @@ module.exports = {
     {
       name: 'setup-exit-signals',
       type: Boolean,
-      description: 'Close and exit the process on SIGINT and SIGTERM',
+      description: 'Close and exit the process on SIGINT and SIGTERM.',
+      negatedDescription:
+        'Do not close and exit the process on SIGNIT and SIGTERM.',
       negative: true,
     },
     {
       name: 'stdin',
       type: Boolean,
-      description: 'close when stdin ends',
+      description: 'Close when stdin ends.',
     },
     {
       name: 'open',
       type: [String, Boolean],
       description:
-        'Open the default browser, or optionally specify a browser name',
+        'Open the default browser, or optionally specify a browser name.',
     },
     {
       name: 'use-local-ip',
       type: Boolean,
-      description: 'Open default browser with local IP',
+      description: 'Open default browser with local IP.',
     },
     {
       name: 'open-page',
       type: String,
-      description: 'Open default browser with the specified page',
+      description: 'Open default browser with the specified page.',
       multiple: true,
     },
     {
       name: 'client-logging',
       type: String,
       description:
-        'Log level in the browser (none, error, warn, info, log, verbose)',
+        'Log level in the browser (none, error, warn, info, log, verbose).',
       processor(opts) {
         opts.client = opts.client || {};
         opts.client.logging = opts.clientLogging;
@@ -106,18 +109,18 @@ module.exports = {
     {
       name: 'compress',
       type: Boolean,
-      description: 'Enable gzip compression',
+      description: 'Enable gzip compression.',
     },
     {
       name: 'public',
       type: String,
-      description: 'The public hostname/ip address of the server',
+      description: 'The public hostname/ip address of the server.',
     },
     {
       name: 'firewall',
       type: String,
       description:
-        'Enable/disable firewall, or set hosts that are allowed to access the dev server',
+        'Enable/disable firewall, or set hosts that are allowed to access the dev server.',
       multiple: true,
     },
   ],

client-src/default/index.js

@@ -125,7 +125,9 @@ const onSocketMessage = {
   },
   errors(errors) {
     log.error('Errors while compiling. Reload prevented.');
-    const strippedErrors = errors.map((error) => stripAnsi(error));
+    const strippedErrors = errors.map((error) =>
+      stripAnsi(error.message ? error.message : error)
+    );
     sendMessage('Errors', strippedErrors);
     for (let i = 0; i < strippedErrors.length; i++) {
       log.error(strippedErrors[i]);

client-src/default/utils/createSocketUrl.js

@@ -72,14 +72,21 @@ function getSocketUrl(urlParts, loc) {
   // all of these sock url params are optionally passed in through
   // resourceQuery, so we need to fall back to the default if
   // they are not provided
-  const host = query.host || hostname;
+  let host = query.host || hostname;
   const path = query.path || '/ws';
   let portOption = query.port || port;
 
   if (portOption === 'location') {
     portOption = loc.port;
   }
 
+  // In case the host is a raw IPv6 address, it can be enclosed in
+  // the brackets as the brackets are needed in the final URL string.
+  // Need to remove those as url.format blindly adds its own set of brackets
+  // if the host string contains colons. That would lead to non-working
+  // double brackets (e.g. [[::]]) host
+  host = typeof host === 'string' ? host.replace(/^\[(.*)\]$/, '$1') : host;
+
   return url.format({
     protocol,
     auth,

lib/Server.js

@@ -34,8 +34,8 @@ const setupExitSignals = require('./utils/setupExitSignals');
 const findPort = require('./utils/findPort');
 const schema = require('./options.json');
 
-if (!process.env.WEBPACK_DEV_SERVER) {
-  process.env.WEBPACK_DEV_SERVER = true;
+if (!process.env.WEBPACK_SERVE) {
+  process.env.WEBPACK_SERVE = true;
 }
 
 class Server {
@@ -588,14 +588,14 @@ class Server {
     const useColor = getColorsOption(getCompilerConfigArray(this.compiler));
 
     const protocol = this.options.https ? 'https' : 'http';
-    const { hostname, port } = this;
+    const { address: hostname, port } = this.server.address();
     const prettyPrintUrl = (newHostname) =>
       url.format({ protocol, hostname: newHostname, port, pathname: '/' });
 
     let prettyHostname;
     let lanUrlForTerminal;
 
-    if (hostname === '0.0.0.0' || hostname === '::') {
+    if (hostname === '0.0.0.0' || ip.isLoopback(hostname)) {
       prettyHostname = 'localhost';
 
       const localIP =
@@ -662,7 +662,7 @@ class Server {
       );
     }
 
-    if (this.options.open) {
+    if (this.options.open || this.options.openPage) {
       runOpen(localUrlForTerminal, this.options, this.logger);
     }
   }