Skip to content

Webpack dev server URL should be displayed more prominently #4907

Open
@octogonz

Description

@octogonz

Feature Proposal

I work in a large monorepo, so when I launch the Webpack dev server, the localhost URL is unpredictable. Different apps may use different ports.

Webpack helpfully prints the URL into the console log, so that you can easily click on it to launch the Chrome web browser. It looks like this:

image

Currently this message is only printed once. After several incremental rebuilds, the message scrolls off the screen and gets lost. The workaround is to kill and restart the dev server, but for large projects this can mean waiting several minutes for initialization.

Suggested improvement: After every incremental rebuild, print the URL last.

How should this be implemented

A minor change to the logging code:

webpack-dev-server/lib/Server.js

    if (this.options.ipc) {
      this.logger.info(
        `Project is running at: "${
          /** @type {import("http").Server} */
          (this.server).address()
        }"`
      );
    } else {
      const protocol =
        /** @type {ServerConfiguration} */
        (this.options.server).type === "http" ? "http" : "https";
      const { address, port } =
        /** @type {import("net").AddressInfo} */
        (
          /** @type {import("http").Server} */
          (this.server).address()
        );

Feature Use Case

This change would make Webpack Dev Server easier to use.

Please paste the results of npx webpack-cli info here, and mention other relevant information

  System:
    OS: Windows 10 10.0.22621
    Memory: 3.51 GB / 12.29 GB
  Binaries:
    Node: 16.15.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD
    npm: 8.11.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 114.0.5735.134
    Edge: Spartan (44.22621.1848.0), Chromium (114.0.1823.41)
    Internet Explorer: 11.0.22621.1

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions