diff --git a/packages/create-webpack-app/templates/init/default/webpack.config.js.tpl b/packages/create-webpack-app/templates/init/default/webpack.config.js.tpl
index 9a08a008cde..a590fd86766 100644
--- a/packages/create-webpack-app/templates/init/default/webpack.config.js.tpl
+++ b/packages/create-webpack-app/templates/init/default/webpack.config.js.tpl
@@ -5,6 +5,18 @@ import { fileURLToPath } from "node:url";<% if (htmlWebpackPlugin) { %>
 import HtmlWebpackPlugin from "html-webpack-plugin";<% } %><% if (extractPlugin !== "No") { %>
 import MiniCssExtractPlugin from "mini-css-extract-plugin";<% } %><% if (workboxWebpackPlugin) { %>
 import WorkboxWebpackPlugin from "workbox-webpack-plugin";<% } %>
+<% const { execFileSync } = await import("node:child_process");
+let host;
+try {
+    const family = execFileSync(process.execPath, [
+        "--input-type=module", 
+        "--eval",
+        `import dns from "node:dns/promises";
+        const { family } = await dns.lookup("localhost");
+        process.stdout.write(String(family));`
+    ], { encoding: "utf8", timeout: 3000 }).trim();
+    host = family === "6" ? "::1" : "127.0.0.1";
+} catch { host = null; } %>
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -27,7 +39,8 @@ const config = {
     },<% if (devServer) { %>
     devServer: {
         open: true,
-        host: "localhost",
+        host: "localhost",<% if (host) { %>
+        allowedHosts: ["<%= host %>"],<% } %>
     },<% } %>
     plugins: [<% if (htmlWebpackPlugin) { %>
         new HtmlWebpackPlugin({
diff --git a/packages/create-webpack-app/templates/init/react/webpack.config.js.tpl b/packages/create-webpack-app/templates/init/react/webpack.config.js.tpl
index 512f4dc6b0a..64080bab489 100644
--- a/packages/create-webpack-app/templates/init/react/webpack.config.js.tpl
+++ b/packages/create-webpack-app/templates/init/react/webpack.config.js.tpl
@@ -5,6 +5,18 @@ import { fileURLToPath } from "node:url";<% if (htmlWebpackPlugin) { %>
 import HtmlWebpackPlugin from "html-webpack-plugin";<% } %><% if (extractPlugin !== "No") { %>
 import MiniCssExtractPlugin from "mini-css-extract-plugin";<% } %><% if (workboxWebpackPlugin) { %>
 import WorkboxWebpackPlugin from "workbox-webpack-plugin";<% } %>
+<% const { execFileSync } = await import("node:child_process")
+let host;
+try {
+    const family = execFileSync(process.execPath, [
+        "--input-type=module", 
+        "--eval",
+        `import dns from "node:dns/promises";
+        const { family } = await dns.lookup("localhost");
+        process.stdout.write(String(family));`
+    ], { encoding: "utf8", timeout: 3000 }).trim();
+    host = family === "6" ? "::1" : "127.0.0.1";
+} catch { host = null; } %>
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -27,7 +39,8 @@ const config = {
     },<% if (devServer) { %>
     devServer: {
         open: true,
-        host: "localhost",
+        host: "localhost",<% if (host) { %>
+        allowedHosts: ["<%= host %>"],<% } %>
     },<% } %>
     plugins: [<% if (htmlWebpackPlugin) { %>
         new HtmlWebpackPlugin({
diff --git a/packages/create-webpack-app/templates/init/svelte/webpack.config.js.tpl b/packages/create-webpack-app/templates/init/svelte/webpack.config.js.tpl
index ef0fc202556..da1d6752a3e 100644
--- a/packages/create-webpack-app/templates/init/svelte/webpack.config.js.tpl
+++ b/packages/create-webpack-app/templates/init/svelte/webpack.config.js.tpl
@@ -5,6 +5,18 @@ import { fileURLToPath } from "node:url";<% if (htmlWebpackPlugin) { %>
 import HtmlWebpackPlugin from "html-webpack-plugin";<% } %><% if (extractPlugin !== "No") { %>
 import MiniCssExtractPlugin from "mini-css-extract-plugin";<% } %><% if (workboxWebpackPlugin) { %>
 import WorkboxWebpackPlugin from "workbox-webpack-plugin";<% } %>
+<% const { execFileSync } = await import("node:child_process")
+let host;
+try {
+    const family = execFileSync(process.execPath, [
+        "--input-type=module", 
+        "--eval",
+        `import dns from "node:dns/promises";
+        const { family } = await dns.lookup("localhost");
+        process.stdout.write(String(family));`
+    ], { encoding: "utf8", timeout: 3000 }).trim();
+    host = family === "6" ? "::1" : "127.0.0.1";
+} catch { host = null; } %>
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -27,7 +39,8 @@ const config = {
     },<% if (devServer) { %>
     devServer: {
         open: true,
-        host: "localhost",
+        host: "localhost",<% if (host) { %>
+        allowedHosts: ["<%= host %>"],<% } %>
     },<% } %>
     plugins: [<% if (htmlWebpackPlugin) { %>
         new HtmlWebpackPlugin({
diff --git a/packages/create-webpack-app/templates/init/vue/webpack.config.js.tpl b/packages/create-webpack-app/templates/init/vue/webpack.config.js.tpl
index 0d954a2ff67..f9a0958808d 100644
--- a/packages/create-webpack-app/templates/init/vue/webpack.config.js.tpl
+++ b/packages/create-webpack-app/templates/init/vue/webpack.config.js.tpl
@@ -6,6 +6,18 @@ import { fileURLToPath } from "node:url";<% if (htmlWebpackPlugin) { %>
 import HtmlWebpackPlugin from "html-webpack-plugin";<% } %><% if (extractPlugin !== "No") { %>
 import MiniCssExtractPlugin from "mini-css-extract-plugin";<% } %><% if (workboxWebpackPlugin) { %>
 import WorkboxWebpackPlugin from "workbox-webpack-plugin";<% } %>
+<% const { execFileSync } = await import("node:child_process")
+let host;
+try {
+    const family = execFileSync(process.execPath, [
+        "--input-type=module", 
+        "--eval",
+        `import dns from "node:dns/promises";
+        const { family } = await dns.lookup("localhost");
+        process.stdout.write(String(family));`
+    ], { encoding: "utf8", timeout: 3000 }).trim();
+    host = family === "6" ? "::1" : "127.0.0.1";
+} catch { host = null; } %>
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -28,7 +40,8 @@ const config = {
     },<% if (devServer) { %>
     devServer: {
         open: true,
-        host: "localhost",
+        host: "localhost",<% if (host) { %>
+        allowedHosts: ["<%= host %>"],<% } %>
     },<% } %>
     plugins: [
         new VueLoaderPlugin(),<% if (htmlWebpackPlugin) { %>
diff --git a/test/create-webpack-app/init/__snapshots__/init.test.js.snap.webpack5 b/test/create-webpack-app/init/__snapshots__/init.test.js.snap.webpack5
index b4073ebfa32..5d70fc69435 100644
--- a/test/create-webpack-app/init/__snapshots__/init.test.js.snap.webpack5
+++ b/test/create-webpack-app/init/__snapshots__/init.test.js.snap.webpack5
@@ -86,6 +86,7 @@ const config = {
     devServer: {
         open: true,
         host: "localhost",
+        allowedHosts: ["::1"],
     },
     plugins: [
         // Add your plugins here
@@ -394,6 +395,7 @@ const config = {
     devServer: {
         open: true,
         host: "localhost",
+        allowedHosts: ["::1"],
     },
     plugins: [
         new HtmlWebpackPlugin({
@@ -481,6 +483,7 @@ const config = {
     devServer: {
         open: true,
         host: "localhost",
+        allowedHosts: ["::1"],
     },
     plugins: [
         new HtmlWebpackPlugin({
@@ -566,6 +569,7 @@ const config = {
     devServer: {
         open: true,
         host: "localhost",
+        allowedHosts: ["::1"],
     },
     plugins: [
         new HtmlWebpackPlugin({
@@ -653,6 +657,7 @@ const config = {
     devServer: {
         open: true,
         host: "localhost",
+        allowedHosts: ["::1"],
     },
     plugins: [
         new HtmlWebpackPlugin({
@@ -740,6 +745,7 @@ const config = {
     devServer: {
         open: true,
         host: "localhost",
+        allowedHosts: ["::1"],
     },
     plugins: [
         new HtmlWebpackPlugin({
@@ -891,6 +897,7 @@ const config = {
     devServer: {
         open: true,
         host: "localhost",
+        allowedHosts: ["::1"],
     },
     plugins: [
         new HtmlWebpackPlugin({
@@ -1010,6 +1017,7 @@ const config = {
     devServer: {
         open: true,
         host: "localhost",
+        allowedHosts: ["::1"],
     },
     plugins: [
         new HtmlWebpackPlugin({
@@ -1221,6 +1229,7 @@ const config = {
     devServer: {
         open: true,
         host: "localhost",
+        allowedHosts: ["::1"],
     },
     plugins: [
         new VueLoaderPlugin(),