fix(init): resolve localhost IP family for devServer allowedHosts

[ThierryRakotomanana]

Summary

When host: "localhost" is set in the generated webpack.config.js, webpack-dev-server lets the OS decide at bind time whether localhost resolves to 127.0.0.1 (IPv4) or ::1 (IPv6).
On Windows 10/11 with modern network stacks, IPv6 is often prioritized, meaning localhost → ::1. If allowedHosts is not explicitly set, webpack-dev-server's security checks can block WebSocket connections. This is precisely why you might see those persistent disconnection loops in the console as shown on the image bellow

Ipv4	Ipv6

What kind of change does this PR introduce?

This PR esolve the OS-preferred IP family. By asking the system's native DNS what it actually prefers in the moment, we can grab the primary IP family and include it directly in the allowedHosts list.
This makes the template adaptable to your specific environment. Whether you have IPv6 at the top of your priority list or you’ve switched back to IPv4, the server will recognize the address it's running on and allow the traffic through smoothly.

Did you add tests for your changes?
I've update the snapshot test in init

Does this PR introduce a breaking change?
not really, just a fix and features to detect the local IP adress bound by the OS

If relevant, what needs to be documented once your changes are merged or what have you already documented?
Not necesserary

Use of AI
Partly, in order to understand the real issue.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 6eac902

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 25.80%. Comparing base (c76ab1c) to head (6eac902).

❗ There is a different number of reports uploaded between BASE (c76ab1c) and HEAD (6eac902). Click for more details.

HEAD has 12 uploads less than BASE

Flag	BASE (c76ab1c)	HEAD (6eac902)
	13	1

Additional details and impacted files

@@             Coverage Diff             @@
##             main    #4715       +/-   ##
===========================================
- Coverage   91.43%   25.80%   -65.63%     
===========================================
  Files          14       14               
  Lines        4716     4716               
  Branches      679      122      -557     
===========================================
- Hits         4312     1217     -3095     
- Misses        402     3497     +3095     
  Partials        2        2               

see 13 files with indirect coverage changes

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update c76ab1c...6eac902. Read the comment docs.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[alexander-akait]

We don't need to do it, it is out of scope our basic generation

[ThierryRakotomanana]

@alexander-akait okay, Just out of curiosity, isn't it counter-intuitive that the server runs on localhost but blocks the IP address it’s bound to? Neither 127.0.0.1 nor ::1 are actually blocked by default, so it feels a bit strange for new users

[alexander-akait]

@ThierryRakotomanana Sorry I don't understand you, we are not blocking 127.0.0.1/::1/localhost

[ThierryRakotomanana]

@alexander-akait My PR description might have been unclear, sorry for that, so to simplify: currently, when running a fresh project via the cli npx create-webpack-app and starting the server with npm run serve, the server only listens on localhost.
If a user tries to access the server via 127.0.0.1 (IPv4) or ::1 (IPv6), depending on the IP family OS priority, this happens inside the console on the browser side :

index.js:642 [webpack-dev-server] Disconnected!
index.js:642 [webpack-dev-server] Trying to reconnect...
installHook.js:1 [webpack-dev-server] Invalid Host/Origin header

a loop who alway tray do reconnect to the server, as shown in the attached image, I've put on the PR description. I have confirmed this behavior across different OS : Windows 10, WSL, and native Ubuntu, and use different version of Node.
The issue is that the server strictly expects the string 'localhost' and rejects IP addresses.
My change addresses this by adding dynamicly allowedHosts to 127.0.0.1 or ::1(depending on the OS/environment preference). So everytime a new user install it, he does'nt have to retype this config to the webpack.config.js

[ThierryRakotomanana]

When attempting to access the application via a IP address (e.g., 127.0.0.1 or ::1) instead of the localhost

Ipv4	Ipv6