diff --git a/.changeset/init-no-html-css-questions.md b/.changeset/init-no-html-css-questions.md
new file mode 100644
index 00000000000..589bd27f1ff
--- /dev/null
+++ b/.changeset/init-no-html-css-questions.md
@@ -0,0 +1,5 @@
+---
+"create-webpack-app": minor
+---
+
+feat: stop asking about HTML and CSS in `init`, scaffold TypeScript on webpack's own support, and keep one question for the CSS tools webpack does not cover (PostCSS, Sass, Less, Stylus, and each preprocessor with PostCSS)
diff --git a/.cspell.json b/.cspell.json
index dd262fb97b4..c79593fbea6 100644
--- a/.cspell.json
+++ b/.cspell.json
@@ -87,6 +87,7 @@
     "splitted",
     "Statsv",
     "styl",
+    "stylesheet",
     "Tanjiro",
     "tapable",
     "taskkill",
diff --git a/packages/create-webpack-app/README.md b/packages/create-webpack-app/README.md
index 6654d257426..96ca1f8f710 100644
--- a/packages/create-webpack-app/README.md
+++ b/packages/create-webpack-app/README.md
@@ -65,6 +65,11 @@ Available templates:
 - [`vue`](https://vuejs.org/)
 - [`svelte`](https://svelte.dev/)
 
+Every template scaffolds `index.html` as the entry point of the project and relies on
+webpack's built-in HTML and CSS support (webpack >= 5.109), so the generated projects
+carry no `html-webpack-plugin`, `css-loader`, `style-loader` or `mini-css-extract-plugin`.
+Picking Sass, Less, Stylus or PostCSS adds only that tool's loader on top.
+
 Available templates for `loader` and `plugin` generators:
 
 - `default` (used by default when nothing specified) - generate bootstrap code
diff --git a/packages/create-webpack-app/src/generators/init/default.ts b/packages/create-webpack-app/src/generators/init/default.ts
index 6175ba86848..75ee6d20e2d 100644
--- a/packages/create-webpack-app/src/generators/init/default.ts
+++ b/packages/create-webpack-app/src/generators/init/default.ts
@@ -3,6 +3,12 @@ import { fileURLToPath } from "node:url";
 import { type DynamicActionsFunction, type NodePlopAPI } from "node-plop";
 import { type ActionType, type Answers, type FileRecord } from "../../types.js";
 
+const STYLE_EXTENSIONS: Record<string, string> = {
+  SASS: "scss",
+  LESS: "less",
+  Stylus: "styl",
+};
+
 export default async function defaultInitGenerator(plop: NodePlopAPI) {
   const __dirname = dirname(fileURLToPath(import.meta.url));
 
@@ -28,15 +34,17 @@ export default async function defaultInitGenerator(plop: NodePlopAPI) {
         default: "none",
       },
       {
-        type: "confirm",
-        name: "devServer",
-        message: "Would you like to use Webpack Dev server?",
-        default: true,
+        type: "list",
+        name: "tsCompiler",
+        message: "How should TypeScript be compiled?",
+        choices: ["built-in", "ts-loader"],
+        default: "built-in",
+        when: (answers: Answers) => answers.langType === "Typescript",
       },
       {
         type: "confirm",
-        name: "html",
-        message: "Do you want to simplify the creation of HTML files for your bundle?",
+        name: "devServer",
+        message: "Would you like to use Webpack Dev server?",
         default: true,
       },
       {
@@ -47,33 +55,19 @@ export default async function defaultInitGenerator(plop: NodePlopAPI) {
       },
       {
         type: "list",
-        name: "cssType",
-        message: "Which of the following CSS solution do you want to use?",
-        choices: ["none", "CSS only", "SASS", "LESS", "Stylus"],
-        default: "CSS only",
-        filter: (input: string, answers: Answers) => {
-          if (input === "none") {
-            answers.isCSS = false;
-            answers.isPostCSS = false;
-          } else if (input === "CSS only") {
-            answers.isCSS = true;
-          }
-          return input;
-        },
-      },
-      {
-        type: "confirm",
-        name: "isCSS",
-        message: (answers: Answers) =>
-          `Will you be using CSS styles along with ${answers.cssType} in your project?`,
-        when: (answers: Answers) => answers.cssType !== "CSS only",
-        default: true,
-      },
-      {
-        type: "confirm",
-        name: "isPostCSS",
-        message: "Do you want to use PostCSS in your project?",
-        default: (answers: Answers) => answers.cssType === "CSS only",
+        name: "cssTool",
+        message: "Which CSS tool do you want to use?",
+        choices: [
+          "none",
+          "PostCSS",
+          "SASS",
+          "SASS with PostCSS",
+          "LESS",
+          "LESS with PostCSS",
+          "Stylus",
+          "Stylus with PostCSS",
+        ],
+        default: "none",
       },
       {
         type: "list",
@@ -92,12 +86,24 @@ export default async function defaultInitGenerator(plop: NodePlopAPI) {
     actions: function actions(answers: Answers) {
       const actions: ActionType[] = [];
 
+      // the config template reads this, so it has to be set whatever the language is
+      answers.useTsLoader = false;
+
       switch (answers.langType) {
         case "ES6":
           devDependencies.push("babel-loader", "@babel/core", "@babel/preset-env");
           break;
         case "Typescript":
-          devDependencies.push("typescript", "ts-loader");
+          // Type stripping covers erasable syntax only, so ts-loader stays on
+          // offer; either way `typescript` backs the editor and `check:types`
+          answers.useTsLoader = answers.tsCompiler === "ts-loader";
+
+          if (answers.useTsLoader) {
+            // ts-loader 9 (its latest) throws on TypeScript 7, so pin what it supports
+            devDependencies.push("typescript@5", "ts-loader");
+          } else {
+            devDependencies.push("typescript");
+          }
           break;
       }
 
@@ -109,22 +115,31 @@ export default async function defaultInitGenerator(plop: NodePlopAPI) {
         devDependencies.push("workbox-webpack-plugin");
       }
 
-      if (answers.isPostCSS) {
+      const cssTool = (answers.cssTool as string | undefined) ?? "none";
+      // PostCSS runs on its own or over a preprocessor, so both are read off the answer
+      const preprocessor = Object.keys(STYLE_EXTENSIONS).find((name) => cssTool.startsWith(name));
+
+      answers.usePostCSS = cssTool.includes("PostCSS");
+      answers.useSASS = preprocessor === "SASS";
+      answers.useLESS = preprocessor === "LESS";
+      answers.useStylus = preprocessor === "Stylus";
+      // The starter stylesheet is written in the language that was picked
+      answers.styleExtension = preprocessor ? STYLE_EXTENSIONS[preprocessor] : "css";
+
+      if (answers.usePostCSS) {
         devDependencies.push("postcss-loader", "postcss", "autoprefixer");
       }
 
-      if (answers.cssType !== "none") {
-        switch (answers.cssType) {
-          case "SASS":
-            devDependencies.push("sass-loader", "sass");
-            break;
-          case "LESS":
-            devDependencies.push("less-loader", "less");
-            break;
-          case "Stylus":
-            devDependencies.push("stylus-loader", "stylus");
-            break;
-        }
+      if (answers.useSASS) {
+        devDependencies.push("sass-loader", "sass");
+      }
+
+      if (answers.useLESS) {
+        devDependencies.push("less-loader", "less");
+      }
+
+      if (answers.useStylus) {
+        devDependencies.push("stylus-loader", "stylus");
       }
 
       const files: FileRecord[] = [
@@ -158,10 +173,15 @@ export default async function defaultInitGenerator(plop: NodePlopAPI) {
           break;
       }
 
-      if (answers.isPostCSS) {
+      if (answers.usePostCSS) {
         files.push({ filePath: "postcss.config.js", fileType: "text" });
       }
 
+      files.push({
+        filePath: `./src/styles.${answers.styleExtension}`,
+        fileType: "text",
+      });
+
       for (const file of files) {
         actions.push({
           type: "generate-files",
diff --git a/packages/create-webpack-app/src/generators/init/react.ts b/packages/create-webpack-app/src/generators/init/react.ts
index 69e93ae9532..23f70b2225e 100644
--- a/packages/create-webpack-app/src/generators/init/react.ts
+++ b/packages/create-webpack-app/src/generators/init/react.ts
@@ -3,6 +3,12 @@ import { fileURLToPath } from "node:url";
 import { type DynamicActionsFunction, type NodePlopAPI } from "node-plop";
 import { type ActionType, type Answers, type FileRecord } from "../../types.js";
 
+const STYLE_EXTENSIONS: Record<string, string> = {
+  SASS: "scss",
+  LESS: "less",
+  Stylus: "styl",
+};
+
 export default async function reactInitGenerator(plop: NodePlopAPI) {
   const __dirname = dirname(fileURLToPath(import.meta.url));
 
@@ -49,33 +55,19 @@ export default async function reactInitGenerator(plop: NodePlopAPI) {
       },
       {
         type: "list",
-        name: "cssType",
-        message: "Which of the following CSS solution do you want to use?",
-        choices: ["none", "CSS only", "SASS", "LESS", "Stylus"],
-        default: "CSS only",
-        filter: (input: string, answers: Answers) => {
-          if (input === "none") {
-            answers.isCSS = false;
-            answers.isPostCSS = false;
-          } else if (input === "CSS only") {
-            answers.isCSS = true;
-          }
-          return input;
-        },
-      },
-      {
-        type: "confirm",
-        name: "isCSS",
-        message: (answers: Answers) =>
-          `Will you be using CSS styles along with ${answers.cssType} in your project?`,
-        when: (answers: Answers) => answers.cssType !== "CSS only",
-        default: true,
-      },
-      {
-        type: "confirm",
-        name: "isPostCSS",
-        message: "Do you want to use PostCSS in your project?",
-        default: (answers: Answers) => answers.cssType === "CSS only",
+        name: "cssTool",
+        message: "Which CSS tool do you want to use?",
+        choices: [
+          "none",
+          "PostCSS",
+          "SASS",
+          "SASS with PostCSS",
+          "LESS",
+          "LESS with PostCSS",
+          "Stylus",
+          "Stylus with PostCSS",
+        ],
+        default: "none",
       },
       {
         type: "list",
@@ -94,7 +86,6 @@ export default async function reactInitGenerator(plop: NodePlopAPI) {
     actions: function actions(answers: Answers) {
       // setting some default values based on the answers
       const actions: ActionType[] = [];
-      answers.html = true;
       answers.devServer = true;
       switch (answers.langType) {
         case "ES6":
@@ -106,33 +97,39 @@ export default async function reactInitGenerator(plop: NodePlopAPI) {
           );
           break;
         case "Typescript":
-          devDependencies.push("typescript", "ts-loader", "@types/react", "@types/react-dom");
+          // ts-loader 9 (its latest) throws on TypeScript 7, so pin what it supports
+          devDependencies.push("typescript@5", "ts-loader", "@types/react", "@types/react-dom");
           break;
       }
-      if (answers.isPostCSS) {
+      if (answers.workboxWebpackPlugin) {
+        devDependencies.push("workbox-webpack-plugin");
+      }
+
+      const cssTool = (answers.cssTool as string | undefined) ?? "none";
+      // PostCSS runs on its own or over a preprocessor, so both are read off the answer
+      const preprocessor = Object.keys(STYLE_EXTENSIONS).find((name) => cssTool.startsWith(name));
+
+      answers.usePostCSS = cssTool.includes("PostCSS");
+      answers.useSASS = preprocessor === "SASS";
+      answers.useLESS = preprocessor === "LESS";
+      answers.useStylus = preprocessor === "Stylus";
+      // The starter stylesheet is written in the language that was picked
+      answers.styleExtension = preprocessor ? STYLE_EXTENSIONS[preprocessor] : "css";
+
+      if (answers.usePostCSS) {
         devDependencies.push("postcss-loader", "postcss", "autoprefixer");
       }
-      if (answers.cssType === "none") {
-        answers.isCSS = false;
-        answers.isPostCSS = false;
-      } else {
-        switch (answers.cssType) {
-          case "CSS only":
-            answers.isCSS = true;
-            break;
-          case "SASS":
-            devDependencies.push("sass-loader", "sass");
-            break;
-          case "LESS":
-            devDependencies.push("less-loader", "less");
-            break;
-          case "Stylus":
-            devDependencies.push("stylus-loader", "stylus");
-            break;
-        }
+
+      if (answers.useSASS) {
+        devDependencies.push("sass-loader", "sass");
       }
-      if (answers.workboxWebpackPlugin) {
-        devDependencies.push("workbox-webpack-plugin");
+
+      if (answers.useLESS) {
+        devDependencies.push("less-loader", "less");
+      }
+
+      if (answers.useStylus) {
+        devDependencies.push("stylus-loader", "stylus");
       }
 
       const files: FileRecord[] = [
@@ -173,21 +170,15 @@ export default async function reactInitGenerator(plop: NodePlopAPI) {
           break;
       }
 
-      switch (answers.cssType) {
-        case "CSS only":
-          files.push({ filePath: "./src/styles/global.css", fileType: "text" });
-          break;
-        case "SASS":
-          files.push({ filePath: "./src/styles/global.scss", fileType: "text" });
-          break;
-        case "LESS":
-          files.push({ filePath: "./src/styles/global.less", fileType: "text" });
-          break;
-        case "Stylus":
-          files.push({ filePath: "./src/styles/global.styl", fileType: "text" });
-          break;
+      if (answers.usePostCSS) {
+        files.push({ filePath: "postcss.config.js", fileType: "text" });
       }
 
+      files.push({
+        filePath: `./src/styles/global.${answers.styleExtension}`,
+        fileType: "text",
+      });
+
       for (const file of files) {
         actions.push({
           type: "generate-files",
diff --git a/packages/create-webpack-app/src/generators/init/svelte.ts b/packages/create-webpack-app/src/generators/init/svelte.ts
index 947fa9de2a4..0d8fedfdc1e 100644
--- a/packages/create-webpack-app/src/generators/init/svelte.ts
+++ b/packages/create-webpack-app/src/generators/init/svelte.ts
@@ -3,6 +3,12 @@ import { fileURLToPath } from "node:url";
 import { type DynamicActionsFunction, type NodePlopAPI } from "node-plop";
 import { type ActionType, type Answers, type FileRecord } from "../../types.js";
 
+const STYLE_EXTENSIONS: Record<string, string> = {
+  SASS: "scss",
+  LESS: "less",
+  Stylus: "styl",
+};
+
 export default async function svelteInitGenerator(plop: NodePlopAPI) {
   const __dirname = dirname(fileURLToPath(import.meta.url));
 
@@ -40,33 +46,19 @@ export default async function svelteInitGenerator(plop: NodePlopAPI) {
       },
       {
         type: "list",
-        name: "cssType",
-        message: "Which of the following CSS solution do you want to use?",
-        choices: ["none", "CSS only", "SASS", "LESS", "Stylus"],
-        default: "CSS only",
-        filter: (input: string, answers: Answers) => {
-          if (input === "none") {
-            answers.isCSS = false;
-            answers.isPostCSS = false;
-          } else if (input === "CSS only") {
-            answers.isCSS = true;
-          }
-          return input;
-        },
-      },
-      {
-        type: "confirm",
-        name: "isCSS",
-        message: (answers: Answers) =>
-          `Will you be using CSS styles along with ${answers.cssType} in your project?`,
-        when: (answers: Answers) => answers.cssType !== "CSS only",
-        default: true,
-      },
-      {
-        type: "confirm",
-        name: "isPostCSS",
-        message: "Do you want to use PostCSS in your project?",
-        default: (answers: Answers) => answers.cssType === "CSS only",
+        name: "cssTool",
+        message: "Which CSS tool do you want to use?",
+        choices: [
+          "none",
+          "PostCSS",
+          "SASS",
+          "SASS with PostCSS",
+          "LESS",
+          "LESS with PostCSS",
+          "Stylus",
+          "Stylus with PostCSS",
+        ],
+        default: "none",
       },
       {
         type: "list",
@@ -85,7 +77,6 @@ export default async function svelteInitGenerator(plop: NodePlopAPI) {
     actions: function actions(answers: Answers) {
       // setting some default values based on the answers
       const actions: ActionType[] = [];
-      answers.html = true;
       answers.devServer = true;
 
       switch (answers.langType) {
@@ -93,36 +84,40 @@ export default async function svelteInitGenerator(plop: NodePlopAPI) {
           devDependencies.push("babel-loader", "@babel/core", "@babel/preset-env");
           break;
         case "Typescript":
-          devDependencies.push("typescript", "ts-loader", "@tsconfig/svelte");
+          // ts-loader 9 (its latest) throws on TypeScript 7, so pin what it supports
+          devDependencies.push("typescript@5", "ts-loader", "@tsconfig/svelte");
           break;
       }
 
-      if (answers.isPostCSS) {
+      if (answers.workboxWebpackPlugin) {
+        devDependencies.push("workbox-webpack-plugin");
+      }
+
+      const cssTool = (answers.cssTool as string | undefined) ?? "none";
+      // PostCSS runs on its own or over a preprocessor, so both are read off the answer
+      const preprocessor = Object.keys(STYLE_EXTENSIONS).find((name) => cssTool.startsWith(name));
+
+      answers.usePostCSS = cssTool.includes("PostCSS");
+      answers.useSASS = preprocessor === "SASS";
+      answers.useLESS = preprocessor === "LESS";
+      answers.useStylus = preprocessor === "Stylus";
+      // The starter stylesheet is written in the language that was picked
+      answers.styleExtension = preprocessor ? STYLE_EXTENSIONS[preprocessor] : "css";
+
+      if (answers.usePostCSS) {
         devDependencies.push("postcss-loader", "postcss", "autoprefixer");
       }
 
-      if (answers.workboxWebpackPlugin) {
-        devDependencies.push("workbox-webpack-plugin");
+      if (answers.useSASS) {
+        devDependencies.push("sass-loader", "sass");
       }
 
-      if (answers.cssType === "none") {
-        answers.isCSS = false;
-        answers.isPostCSS = false;
-      } else {
-        switch (answers.cssType) {
-          case "CSS only":
-            answers.isCSS = true;
-            break;
-          case "SASS":
-            devDependencies.push("sass-loader", "sass");
-            break;
-          case "LESS":
-            devDependencies.push("less-loader", "less");
-            break;
-          case "Stylus":
-            devDependencies.push("stylus-loader", "stylus");
-            break;
-        }
+      if (answers.useLESS) {
+        devDependencies.push("less-loader", "less");
+      }
+
+      if (answers.useStylus) {
+        devDependencies.push("stylus-loader", "stylus");
       }
 
       const files: FileRecord[] = [
@@ -159,21 +154,15 @@ export default async function svelteInitGenerator(plop: NodePlopAPI) {
         files.push({ filePath: "./src/store/index.js", fileType: "text" });
       }
 
-      switch (answers.cssType) {
-        case "CSS only":
-          files.push({ filePath: "./src/styles/global.css", fileType: "text" });
-          break;
-        case "SASS":
-          files.push({ filePath: "./src/styles/global.scss", fileType: "text" });
-          break;
-        case "LESS":
-          files.push({ filePath: "./src/styles/global.less", fileType: "text" });
-          break;
-        case "Stylus":
-          files.push({ filePath: "./src/styles/global.styl", fileType: "text" });
-          break;
+      if (answers.usePostCSS) {
+        files.push({ filePath: "postcss.config.js", fileType: "text" });
       }
 
+      files.push({
+        filePath: `./src/styles/global.${answers.styleExtension}`,
+        fileType: "text",
+      });
+
       for (const file of files) {
         actions.push({
           type: "generate-files",
diff --git a/packages/create-webpack-app/src/generators/init/vue.ts b/packages/create-webpack-app/src/generators/init/vue.ts
index edc3b43a648..144d1a0ae0e 100644
--- a/packages/create-webpack-app/src/generators/init/vue.ts
+++ b/packages/create-webpack-app/src/generators/init/vue.ts
@@ -3,6 +3,12 @@ import { fileURLToPath } from "node:url";
 import { type DynamicActionsFunction, type NodePlopAPI } from "node-plop";
 import { type ActionType, type Answers, type FileRecord } from "../../types.js";
 
+const STYLE_EXTENSIONS: Record<string, string> = {
+  SASS: "scss",
+  LESS: "less",
+  Stylus: "styl",
+};
+
 export default async function vueInitGenerator(plop: NodePlopAPI) {
   const __dirname = dirname(fileURLToPath(import.meta.url));
 
@@ -48,33 +54,19 @@ export default async function vueInitGenerator(plop: NodePlopAPI) {
       },
       {
         type: "list",
-        name: "cssType",
-        message: "Which of the following CSS solution do you want to use?",
-        choices: ["none", "CSS only", "SASS", "LESS", "Stylus"],
-        default: "CSS only",
-        filter: (input: string, answers: Answers) => {
-          if (input === "none") {
-            answers.isCSS = false;
-            answers.isPostCSS = false;
-          } else if (input === "CSS only") {
-            answers.isCSS = true;
-          }
-          return input;
-        },
-      },
-      {
-        type: "confirm",
-        name: "isCSS",
-        message: (answers: Answers) =>
-          `Will you be using CSS styles along with ${answers.cssType} in your project?`,
-        when: (answers: Answers) => answers.cssType !== "CSS only",
-        default: true,
-      },
-      {
-        type: "confirm",
-        name: "isPostCSS",
-        message: "Do you want to use PostCSS in your project?",
-        default: (answers: Answers) => answers.cssType === "CSS only",
+        name: "cssTool",
+        message: "Which CSS tool do you want to use?",
+        choices: [
+          "none",
+          "PostCSS",
+          "SASS",
+          "SASS with PostCSS",
+          "LESS",
+          "LESS with PostCSS",
+          "Stylus",
+          "Stylus with PostCSS",
+        ],
+        default: "none",
       },
       {
         type: "list",
@@ -93,7 +85,6 @@ export default async function vueInitGenerator(plop: NodePlopAPI) {
     actions: function actions(answers: Answers) {
       // setting some default values based on the answers
       const actions: ActionType[] = [];
-      answers.html = true;
       answers.devServer = true;
 
       switch (answers.langType) {
@@ -101,7 +92,8 @@ export default async function vueInitGenerator(plop: NodePlopAPI) {
           devDependencies.push("babel-loader", "@babel/core", "@babel/preset-env");
           break;
         case "Typescript":
-          devDependencies.push("typescript", "ts-loader");
+          // ts-loader 9 (its latest) throws on TypeScript 7, so pin what it supports
+          devDependencies.push("typescript@5", "ts-loader");
           break;
       }
 
@@ -109,32 +101,35 @@ export default async function vueInitGenerator(plop: NodePlopAPI) {
         devDependencies.push("pinia");
       }
 
-      if (answers.isPostCSS) {
+      if (answers.workboxWebpackPlugin) {
+        devDependencies.push("workbox-webpack-plugin");
+      }
+
+      const cssTool = (answers.cssTool as string | undefined) ?? "none";
+      // PostCSS runs on its own or over a preprocessor, so both are read off the answer
+      const preprocessor = Object.keys(STYLE_EXTENSIONS).find((name) => cssTool.startsWith(name));
+
+      answers.usePostCSS = cssTool.includes("PostCSS");
+      answers.useSASS = preprocessor === "SASS";
+      answers.useLESS = preprocessor === "LESS";
+      answers.useStylus = preprocessor === "Stylus";
+      // The starter stylesheet is written in the language that was picked
+      answers.styleExtension = preprocessor ? STYLE_EXTENSIONS[preprocessor] : "css";
+
+      if (answers.usePostCSS) {
         devDependencies.push("postcss-loader", "postcss", "autoprefixer");
       }
 
-      if (answers.workboxWebpackPlugin) {
-        devDependencies.push("workbox-webpack-plugin");
+      if (answers.useSASS) {
+        devDependencies.push("sass-loader", "sass");
       }
 
-      if (answers.cssType === "none") {
-        answers.isCSS = false;
-        answers.isPostCSS = false;
-      } else {
-        switch (answers.cssType) {
-          case "CSS only":
-            answers.isCSS = true;
-            break;
-          case "SASS":
-            devDependencies.push("sass-loader", "sass");
-            break;
-          case "LESS":
-            devDependencies.push("less-loader", "less");
-            break;
-          case "Stylus":
-            devDependencies.push("stylus-loader", "stylus");
-            break;
-        }
+      if (answers.useLESS) {
+        devDependencies.push("less-loader", "less");
+      }
+
+      if (answers.useStylus) {
+        devDependencies.push("stylus-loader", "stylus");
       }
 
       const files: FileRecord[] = [
@@ -181,21 +176,15 @@ export default async function vueInitGenerator(plop: NodePlopAPI) {
         }
       }
 
-      switch (answers.cssType) {
-        case "CSS only":
-          files.push({ filePath: "./src/styles/global.css", fileType: "text" });
-          break;
-        case "SASS":
-          files.push({ filePath: "./src/styles/global.scss", fileType: "text" });
-          break;
-        case "LESS":
-          files.push({ filePath: "./src/styles/global.less", fileType: "text" });
-          break;
-        case "Stylus":
-          files.push({ filePath: "./src/styles/global.styl", fileType: "text" });
-          break;
+      if (answers.usePostCSS) {
+        files.push({ filePath: "postcss.config.js", fileType: "text" });
       }
 
+      files.push({
+        filePath: `./src/styles/global.${answers.styleExtension}`,
+        fileType: "text",
+      });
+
       for (const file of files) {
         actions.push({
           type: "generate-files",
diff --git a/packages/create-webpack-app/src/index.ts b/packages/create-webpack-app/src/index.ts
index 795cb913f13..8749367f6d7 100644
--- a/packages/create-webpack-app/src/index.ts
+++ b/packages/create-webpack-app/src/index.ts
@@ -17,11 +17,9 @@ const baseAnswers: Answers = {
   projectPath: process.cwd(),
   langType: "none",
   devServer: true,
-  html: true,
   workboxWebpackPlugin: true,
-  cssType: "none",
-  isCSS: false,
-  isPostCSS: false,
+  cssTool: "none",
+  tsCompiler: "built-in",
   packageManager: "npm",
 };
 const initValues: Record<string, Answers> = {
@@ -32,18 +30,15 @@ const initValues: Record<string, Answers> = {
     ...baseAnswers,
     langType: "ES6",
     useReactState: true,
-    cssType: "CSS only",
   },
   vue: {
     ...baseAnswers,
     langType: "ES6",
     useVueStore: true,
-    cssType: "CSS only",
   },
   svelte: {
     ...baseAnswers,
     langType: "ES6",
-    cssType: "CSS only",
   },
 };
 
diff --git a/packages/create-webpack-app/templates/init/default/README.md.tpl b/packages/create-webpack-app/templates/init/default/README.md.tpl
index 77c91681f17..c706ab547a7 100644
--- a/packages/create-webpack-app/templates/init/default/README.md.tpl
+++ b/packages/create-webpack-app/templates/init/default/README.md.tpl
@@ -13,3 +13,47 @@ yarn build
 ```
 
 to bundle your application
+
+## HTML and CSS
+
+`index.html` is the entry point of this project — webpack bundles every script and
+stylesheet the page references and emits the page as `dist/index.html`, with the
+references rewritten to the generated assets. Both are supported out of the box, so
+no loader or plugin is needed for `.html` and `.css` files.
+
+Sass, Less, Stylus and PostCSS keep that support and only add their own loader on
+top of it, as a `css/auto` rule:
+
+```js
+{
+    test: /\.s[ac]ss$/i,
+    type: "css/auto",
+    use: ["sass-loader"],
+}
+```
+
+They combine, too: webpack applies `use` right to left, so `["postcss-loader",
+"sass-loader"]` compiles the Sass first and runs PostCSS over the result.
+<% if (langType === "Typescript") { %>
+## TypeScript
+
+<% if (useTsLoader) { %>This project compiles TypeScript with `ts-loader`, which type
+checks as it builds and handles every TypeScript feature, `.tsx` included.
+
+webpack can also strip the types itself, with no loader at all — it is faster, but it
+covers erasable syntax only (types, generics, `import type`, casts) and checks nothing.
+Re-run `create-webpack-app` and answer `built-in` to that question to try it.<% } else { %>webpack strips the types itself (it needs Node.js >= 22.6), so this project has no
+TypeScript loader. Stripping is erasable syntax only — types, generics, `import type`
+and casts — so `enum`, `namespace`, parameter properties, decorator metadata and `.tsx`
+need a loader instead: re-run `create-webpack-app` and answer `ts-loader` to that
+question, which also type checks as it builds.<% } %>
+
+<% if (useTsLoader) { %>Either way, `tsconfig.json` is what your editor reads, and:<% } else { %>Nothing is type checked during the build. `tsconfig.json` is what your editor reads,
+and:<% } %>
+
+```bash
+npm run check:types
+```
+
+runs `tsc --noEmit` over the project.
+<% } %>
diff --git a/packages/create-webpack-app/templates/init/default/index.html.tpl b/packages/create-webpack-app/templates/init/default/index.html.tpl
index 4cf8cdb1986..099b4addcd9 100644
--- a/packages/create-webpack-app/templates/init/default/index.html.tpl
+++ b/packages/create-webpack-app/templates/init/default/index.html.tpl
@@ -3,11 +3,12 @@
     <head>
         <meta charset="utf-8" />
         <title>Webpack App</title>
+        <link rel="stylesheet" href="./src/styles.<%= styleExtension %>" />
+        <script defer src="<%= entryPoint %>"></script>
     </head>
     <body>
         <h1>Hello world!</h1>
-        <h2>Tip: Check your console</h2><% if (html) { %>
-        <script src="<%= entryPoint %>"></script><% } %>
+        <h2>Tip: Check your console</h2>
     </body>
     <% if (workboxWebpackPlugin) { %>
     <script>
diff --git a/packages/create-webpack-app/templates/init/default/package.json.tpl b/packages/create-webpack-app/templates/init/default/package.json.tpl
index 625b0b17ccf..495f3d06d28 100644
--- a/packages/create-webpack-app/templates/init/default/package.json.tpl
+++ b/packages/create-webpack-app/templates/init/default/package.json.tpl
@@ -2,13 +2,17 @@
   "version": "1.0.0",
   "description": "My webpack project",
   "name": "webpack-project",
-  "type": "module",
+  "type": "module",<% if (langType === "Typescript") { %>
+  "engines": {
+    "node": ">=22.6.0"
+  },<% } %>
   "scripts": {
     "build": "webpack --mode=production --config-node-env=production",
     "build:dev": "webpack --mode=development",
     <% if (devServer) { %>
       "serve": "webpack serve",
     <% } %>
-    "watch": "webpack --watch"
+    "watch": "webpack --watch"<% if (langType === "Typescript") { %>,
+    "check:types": "tsc --noEmit"<% } %>
   }
 }
diff --git a/packages/create-webpack-app/templates/init/default/postcss.config.js.tpl b/packages/create-webpack-app/templates/init/default/postcss.config.js.tpl
index dbcbc93781b..e84f66aad9e 100644
--- a/packages/create-webpack-app/templates/init/default/postcss.config.js.tpl
+++ b/packages/create-webpack-app/templates/init/default/postcss.config.js.tpl
@@ -1,7 +1,5 @@
-import autoprefixer from "autoprefixer";
-
 export default {
-  // Add you postcss configuration here
+  // Add your PostCSS configuration here
   // Learn more about it at https://github.com/webpack-contrib/postcss-loader#config-files
   plugins: [["autoprefixer"]],
 };
diff --git a/packages/create-webpack-app/templates/init/default/src/styles.css.tpl b/packages/create-webpack-app/templates/init/default/src/styles.css.tpl
new file mode 100644
index 00000000000..92993a7b3a0
--- /dev/null
+++ b/packages/create-webpack-app/templates/init/default/src/styles.css.tpl
@@ -0,0 +1,7 @@
+body {
+    margin: 0;
+    padding: 2rem;
+    font-family: system-ui, sans-serif;
+    color: #1c78c0;
+    background-color: #f5f7fa;
+}
diff --git a/packages/create-webpack-app/templates/init/default/src/styles.less.tpl b/packages/create-webpack-app/templates/init/default/src/styles.less.tpl
new file mode 100644
index 00000000000..be028fcce23
--- /dev/null
+++ b/packages/create-webpack-app/templates/init/default/src/styles.less.tpl
@@ -0,0 +1,10 @@
+@color-primary: #1c78c0;
+@color-background: #f5f7fa;
+
+body {
+    margin: 0;
+    padding: 2rem;
+    font-family: system-ui, sans-serif;
+    color: @color-primary;
+    background-color: @color-background;
+}
diff --git a/packages/create-webpack-app/templates/init/default/src/styles.scss.tpl b/packages/create-webpack-app/templates/init/default/src/styles.scss.tpl
new file mode 100644
index 00000000000..c3019025fef
--- /dev/null
+++ b/packages/create-webpack-app/templates/init/default/src/styles.scss.tpl
@@ -0,0 +1,10 @@
+$color-primary: #1c78c0;
+$color-background: #f5f7fa;
+
+body {
+    margin: 0;
+    padding: 2rem;
+    font-family: system-ui, sans-serif;
+    color: $color-primary;
+    background-color: $color-background;
+}
diff --git a/packages/create-webpack-app/templates/init/default/src/styles.styl.tpl b/packages/create-webpack-app/templates/init/default/src/styles.styl.tpl
new file mode 100644
index 00000000000..fd956493c0d
--- /dev/null
+++ b/packages/create-webpack-app/templates/init/default/src/styles.styl.tpl
@@ -0,0 +1,9 @@
+color-primary = #1c78c0
+color-background = #f5f7fa
+
+body
+    margin 0
+    padding 2rem
+    font-family system-ui, sans-serif
+    color color-primary
+    background-color color-background
diff --git a/packages/create-webpack-app/templates/init/default/webpack.config.tpl b/packages/create-webpack-app/templates/init/default/webpack.config.tpl
index 4433cf9d792..75b905ad0c6 100644
--- a/packages/create-webpack-app/templates/init/default/webpack.config.tpl
+++ b/packages/create-webpack-app/templates/init/default/webpack.config.tpl
@@ -12,13 +12,17 @@ const isProduction = process.env.NODE_ENV === "production";
 
 /** @type {import("webpack").Configuration} */
 const config <% if (langType === "Typescript") { %>: Configuration <% } %>= {
-    entry: <% if (html) { %>"./index.html"<% } else { %>"<%= entryPoint %>"<% } %>,
+    // The page itself is the entry: webpack bundles the scripts and stylesheets
+    // it references and emits it as `dist/index.html`.
+    entry: { index: "./index.html" },
     output: {
         path: path.resolve(__dirname, "dist"),
     },<% if (devServer) { %>
     devServer: {
         open: true,
-    },<% } %><% if (isCSS && isPostCSS) { %>
+    },<% } %><% if (usePostCSS) { %>
+    // The PostCSS rule registers a loader for `.css`, which turns off the
+    // automatic detection of webpack's built-in CSS support — ask for it
     experiments: {
         css: true,
     },<% } %>
@@ -27,41 +31,42 @@ const config <% if (langType === "Typescript") { %>: Configuration <% } %>= {
         // Learn more about plugins from https://webpack.js.org/configuration/plugins/
     ],
     module: {
-        rules: [<% if (langType == "ES6") { %>
-            {
-                test: /\.(js|jsx)$/i,
-                loader: "babel-loader",
-            },<% } %><% if (langType == "Typescript") { %>
+        rules: [<% if (useTsLoader) { %>
             {
                 test: /\.(ts|tsx)$/i,
                 loader: "ts-loader",
                 exclude: ["/node_modules/"],
-            },<% } %><%  if (isCSS && isPostCSS) { %>
+            },<% } %><% if (langType == "ES6") { %>
+            {
+                test: /\.(js|jsx)$/i,
+                loader: "babel-loader",
+            },<% } %><%  if (usePostCSS) { %>
             {
                 test: /\.css$/i,
                 type: "css/auto",
                 use: ["postcss-loader"],
-            },<% } %><%  if (cssType == "SASS") { %>
+            },<% } %><%  if (useSASS) { %>
             {
                 test: /\.s[ac]ss$/i,
                 type: "css/auto",
-                use: [<% if (isPostCSS) { %>"postcss-loader", <% } %>"sass-loader"],
-            },<% } %><%  if (cssType == "LESS") { %>
+                use: [<% if (usePostCSS) { %>"postcss-loader", <% } %>"sass-loader"],
+            },<% } %><%  if (useLESS) { %>
             {
                 test: /\.less$/i,
                 type: "css/auto",
-                use: [<% if (isPostCSS) { %>"postcss-loader", <% } %>"less-loader"],
-            },<% } %><%  if (cssType == "Stylus") { %>
+                use: [<% if (usePostCSS) { %>"postcss-loader", <% } %>"less-loader"],
+            },<% } %><%  if (useStylus) { %>
             {
                 test: /\.styl$/i,
                 type: "css/auto",
-                use: [<% if (isPostCSS) { %>"postcss-loader", <% } %>"stylus-loader"],
+                use: [<% if (usePostCSS) { %>"postcss-loader", <% } %>"stylus-loader"],
             },<% } %>
             {
                 test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
                 type: "asset",
             },
 
+            // HTML, CSS<% if (langType == "Typescript" && !useTsLoader) { %> and TypeScript<% } %> need no loader — webpack supports them out of the box
             // Add your rules for custom modules here
             // Learn more about loaders from https://webpack.js.org/loaders/
         ],
diff --git a/packages/create-webpack-app/templates/init/react/README.md.tpl b/packages/create-webpack-app/templates/init/react/README.md.tpl
index 77c91681f17..e5d0964ac16 100644
--- a/packages/create-webpack-app/templates/init/react/README.md.tpl
+++ b/packages/create-webpack-app/templates/init/react/README.md.tpl
@@ -13,3 +13,10 @@ yarn build
 ```
 
 to bundle your application
+
+## HTML and CSS
+
+`index.html` is the entry point of this project — webpack bundles every script and
+stylesheet the page references and emits the page as `dist/index.html`, with the
+references rewritten to the generated assets. Both are supported out of the box, so
+no loader or plugin is needed for `.html` and `.css` files.
diff --git a/packages/create-webpack-app/templates/init/react/index.d.ts.tpl b/packages/create-webpack-app/templates/init/react/index.d.ts.tpl
index 38ee1835c96..2e6f51f2c0b 100644
--- a/packages/create-webpack-app/templates/init/react/index.d.ts.tpl
+++ b/packages/create-webpack-app/templates/init/react/index.d.ts.tpl
@@ -1,3 +1,7 @@
+declare module "*.css";
+declare module "*.scss";
+declare module "*.less";
+declare module "*.styl";
 declare module "*.png";
 declare module "*.jpg";
 declare module "*.gif";
diff --git a/packages/create-webpack-app/templates/init/react/postcss.config.js.tpl b/packages/create-webpack-app/templates/init/react/postcss.config.js.tpl
new file mode 100644
index 00000000000..e84f66aad9e
--- /dev/null
+++ b/packages/create-webpack-app/templates/init/react/postcss.config.js.tpl
@@ -0,0 +1,5 @@
+export default {
+  // Add your PostCSS configuration here
+  // Learn more about it at https://github.com/webpack-contrib/postcss-loader#config-files
+  plugins: [["autoprefixer"]],
+};
diff --git a/packages/create-webpack-app/templates/init/react/src/index.jsx.tpl b/packages/create-webpack-app/templates/init/react/src/index.jsx.tpl
index 850922b4db8..3c163ea2e0e 100644
--- a/packages/create-webpack-app/templates/init/react/src/index.jsx.tpl
+++ b/packages/create-webpack-app/templates/init/react/src/index.jsx.tpl
@@ -1,11 +1,7 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import App from './App';
-<%  if (cssType == 'CSS only') { %>
-import "./styles/global.css";<% } if (cssType == 'SASS') { %>
-import "./styles/global.scss";<% } if (cssType == 'LESS') { %>
-import "./styles/global.less";<% } if (cssType == 'Stylus') { %>
-import "./styles/global.styl";<% } %>
+import "./styles/global.<%= styleExtension %>";
 
 const container = document.getElementById('root');
 const root = createRoot(container);
diff --git a/packages/create-webpack-app/templates/init/react/src/index.tsx.tpl b/packages/create-webpack-app/templates/init/react/src/index.tsx.tpl
index e2437f31bf1..b00d65c79e0 100644
--- a/packages/create-webpack-app/templates/init/react/src/index.tsx.tpl
+++ b/packages/create-webpack-app/templates/init/react/src/index.tsx.tpl
@@ -1,11 +1,7 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import App from './App';
-<%  if (cssType == 'CSS only') { %>
-import "./styles/global.css";<% } if (cssType == 'SASS') { %>
-import "./styles/global.scss";<% } if (cssType == 'LESS') { %>
-import "./styles/global.less";<% } if (cssType == 'Stylus') { %>
-import "./styles/global.styl";<% } %>
+import "./styles/global.<%= styleExtension %>";
 
 const container = document.getElementById('root') as HTMLElement;
 const root = createRoot(container);
diff --git a/packages/create-webpack-app/templates/init/react/webpack.config.tpl b/packages/create-webpack-app/templates/init/react/webpack.config.tpl
index 39c42a54796..d78179568fe 100644
--- a/packages/create-webpack-app/templates/init/react/webpack.config.tpl
+++ b/packages/create-webpack-app/templates/init/react/webpack.config.tpl
@@ -12,13 +12,17 @@ const isProduction = process.env.NODE_ENV === "production";
 
 /** @type {import("webpack").Configuration} */
 const config <% if (langType === "Typescript") { %>: Configuration <% } %>= {
-    entry: <% if (html) { %>"./index.html"<% } else { %>"<%= entry %>"<% } %>,
+    // The page itself is the entry: webpack bundles the scripts and stylesheets
+    // it references and emits it as `dist/index.html`.
+    entry: { index: "./index.html" },
     output: {
         path: path.resolve(__dirname, "dist"),
     },<% if (devServer) { %>
     devServer: {
         open: true,
-    },<% } %><% if (isCSS && isPostCSS) { %>
+    },<% } %><% if (usePostCSS) { %>
+    // The PostCSS rule registers a loader for `.css`, which turns off the
+    // automatic detection of webpack's built-in CSS support — ask for it
     experiments: {
         css: true,
     },<% } %>
@@ -42,32 +46,33 @@ const config <% if (langType === "Typescript") { %>: Configuration <% } %>= {
                 test: /\.(ts|tsx)$/i,
                 loader: "ts-loader",
                 exclude: ["/node_modules/"],
-            },<% } %><%  if (isCSS && isPostCSS) { %>
+            },<% } %><%  if (usePostCSS) { %>
             {
                 test: /\.css$/i,
                 type: "css/auto",
                 use: ["postcss-loader"],
-            },<% } %><%  if (cssType == "SASS") { %>
+            },<% } %><%  if (useSASS) { %>
             {
                 test: /\.s[ac]ss$/i,
                 type: "css/auto",
-                use: [<% if (isPostCSS) { %>"postcss-loader", <% } %>"sass-loader"],
-            },<% } %><%  if (cssType == "LESS") { %>
+                use: [<% if (usePostCSS) { %>"postcss-loader", <% } %>"sass-loader"],
+            },<% } %><%  if (useLESS) { %>
             {
                 test: /\.less$/i,
                 type: "css/auto",
-                use: [<% if (isPostCSS) { %>"postcss-loader", <% } %>"less-loader"],
-            },<% } %><%  if (cssType == "Stylus") { %>
+                use: [<% if (usePostCSS) { %>"postcss-loader", <% } %>"less-loader"],
+            },<% } %><%  if (useStylus) { %>
             {
                 test: /\.styl$/i,
                 type: "css/auto",
-                use: [<% if (isPostCSS) { %>"postcss-loader", <% } %>"stylus-loader"],
+                use: [<% if (usePostCSS) { %>"postcss-loader", <% } %>"stylus-loader"],
             },<% } %>
             {
                 test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
                 type: "asset",
             },
 
+            // HTML and CSS need no loader — webpack supports them out of the box
             // Add your rules for custom modules here
             // Learn more about loaders from https://webpack.js.org/loaders/
         ],
diff --git a/packages/create-webpack-app/templates/init/svelte/README.md.tpl b/packages/create-webpack-app/templates/init/svelte/README.md.tpl
index 77c91681f17..e5d0964ac16 100644
--- a/packages/create-webpack-app/templates/init/svelte/README.md.tpl
+++ b/packages/create-webpack-app/templates/init/svelte/README.md.tpl
@@ -13,3 +13,10 @@ yarn build
 ```
 
 to bundle your application
+
+## HTML and CSS
+
+`index.html` is the entry point of this project — webpack bundles every script and
+stylesheet the page references and emits the page as `dist/index.html`, with the
+references rewritten to the generated assets. Both are supported out of the box, so
+no loader or plugin is needed for `.html` and `.css` files.
diff --git a/packages/create-webpack-app/templates/init/svelte/postcss.config.js.tpl b/packages/create-webpack-app/templates/init/svelte/postcss.config.js.tpl
new file mode 100644
index 00000000000..e84f66aad9e
--- /dev/null
+++ b/packages/create-webpack-app/templates/init/svelte/postcss.config.js.tpl
@@ -0,0 +1,5 @@
+export default {
+  // Add your PostCSS configuration here
+  // Learn more about it at https://github.com/webpack-contrib/postcss-loader#config-files
+  plugins: [["autoprefixer"]],
+};
diff --git a/packages/create-webpack-app/templates/init/svelte/src/App.svelte.tpl b/packages/create-webpack-app/templates/init/svelte/src/App.svelte.tpl
index b6df249e87a..bd432615b52 100644
--- a/packages/create-webpack-app/templates/init/svelte/src/App.svelte.tpl
+++ b/packages/create-webpack-app/templates/init/svelte/src/App.svelte.tpl
@@ -15,7 +15,6 @@
   </div>
 </main>
 
-<% if (isCSS) { %>
 <style>
   :root {
     --color-primary: #1C78C0;
@@ -46,4 +45,3 @@
     background-color: #6EB8E0;
   }
 </style>
-<% } %>
diff --git a/packages/create-webpack-app/templates/init/svelte/src/index.d.ts.tpl b/packages/create-webpack-app/templates/init/svelte/src/index.d.ts.tpl
index d8c267b25a1..f2cecb9e3bc 100644
--- a/packages/create-webpack-app/templates/init/svelte/src/index.d.ts.tpl
+++ b/packages/create-webpack-app/templates/init/svelte/src/index.d.ts.tpl
@@ -1,3 +1,8 @@
 declare module '*.svelte' {
     export { SvelteComponentDev as default } from 'svelte/internal';
 }
+
+declare module '*.css';
+declare module '*.scss';
+declare module '*.less';
+declare module '*.styl';
diff --git a/packages/create-webpack-app/templates/init/svelte/src/main.js.tpl b/packages/create-webpack-app/templates/init/svelte/src/main.js.tpl
index 58e2b6bc94e..39eceaa80bd 100644
--- a/packages/create-webpack-app/templates/init/svelte/src/main.js.tpl
+++ b/packages/create-webpack-app/templates/init/svelte/src/main.js.tpl
@@ -1,13 +1,10 @@
+import { mount } from 'svelte';
 import App from './App.svelte';
 
-<%  if (cssType == 'CSS only') { %>
-import "./styles/global.css";<% } if (cssType == 'SASS') { %>
-import "./styles/global.scss";<% } if (cssType == 'LESS') { %>
-import "./styles/global.less";<% } if (cssType == 'Stylus') { %>
-import "./styles/global.styl";<% } %>
+import "./styles/global.<%= styleExtension %>";
 
 
-const app = new App({
+const app = mount(App, {
   target: document.getElementById('app'),
 });
 
diff --git a/packages/create-webpack-app/templates/init/svelte/src/main.ts.tpl b/packages/create-webpack-app/templates/init/svelte/src/main.ts.tpl
index 58e2b6bc94e..c23608c1359 100644
--- a/packages/create-webpack-app/templates/init/svelte/src/main.ts.tpl
+++ b/packages/create-webpack-app/templates/init/svelte/src/main.ts.tpl
@@ -1,14 +1,11 @@
+import { mount } from 'svelte';
 import App from './App.svelte';
 
-<%  if (cssType == 'CSS only') { %>
-import "./styles/global.css";<% } if (cssType == 'SASS') { %>
-import "./styles/global.scss";<% } if (cssType == 'LESS') { %>
-import "./styles/global.less";<% } if (cssType == 'Stylus') { %>
-import "./styles/global.styl";<% } %>
+import "./styles/global.<%= styleExtension %>";
 
 
-const app = new App({
-  target: document.getElementById('app'),
+const app = mount(App, {
+  target: document.getElementById('app') as HTMLElement,
 });
 
 export default app;
diff --git a/packages/create-webpack-app/templates/init/svelte/webpack.config.tpl b/packages/create-webpack-app/templates/init/svelte/webpack.config.tpl
index ad15067e9be..1f5060d400e 100644
--- a/packages/create-webpack-app/templates/init/svelte/webpack.config.tpl
+++ b/packages/create-webpack-app/templates/init/svelte/webpack.config.tpl
@@ -12,13 +12,17 @@ const isProduction = process.env.NODE_ENV === "production";
 
 /** @type {import("webpack").Configuration} */
 const config <% if (langType === "Typescript") { %>: Configuration <% } %>= {
-    entry: <% if (html) { %>"./index.html"<% } else { %>"<%= entry %>"<% } %>,
+    // The page itself is the entry: webpack bundles the scripts and stylesheets
+    // it references and emits it as `dist/index.html`.
+    entry: { index: "./index.html" },
     output: {
         path: path.resolve(__dirname, "dist"),
     },<% if (devServer) { %>
     devServer: {
         open: true,
-    },<% } %><% if (isCSS && isPostCSS) { %>
+    },<% } %><% if (usePostCSS) { %>
+    // The PostCSS rule registers a loader for `.css`, which turns off the
+    // automatic detection of webpack's built-in CSS support — ask for it
     experiments: {
         css: true,
     },<% } %>
@@ -55,31 +59,32 @@ const config <% if (langType === "Typescript") { %>: Configuration <% } %>= {
                 options: {
                     appendTsSuffixTo: [/\.svelte$/],
                 },
-            },<% } %><%  if (isCSS && isPostCSS) { %>
+            },<% } %><%  if (usePostCSS) { %>
             {
                 test: /\.css$/i,
                 type: "css/auto",
                 use: ["postcss-loader"],
-            },<% } %><%  if (cssType == "SASS") { %>
+            },<% } %><%  if (useSASS) { %>
             {
                 test: /\.s[ac]ss$/i,
                 type: "css/auto",
-                use: [<% if (isPostCSS) { %>"postcss-loader", <% } %>"sass-loader"],
-            },<% } %><%  if (cssType == "LESS") { %>
+                use: [<% if (usePostCSS) { %>"postcss-loader", <% } %>"sass-loader"],
+            },<% } %><%  if (useLESS) { %>
             {
                 test: /\.less$/i,
                 type: "css/auto",
-                use: [<% if (isPostCSS) { %>"postcss-loader", <% } %>"less-loader"],
-            },<% } %><%  if (cssType == "Stylus") { %>
+                use: [<% if (usePostCSS) { %>"postcss-loader", <% } %>"less-loader"],
+            },<% } %><%  if (useStylus) { %>
             {
                 test: /\.styl$/i,
                 type: "css/auto",
-                use: [<% if (isPostCSS) { %>"postcss-loader", <% } %>"stylus-loader"],
+                use: [<% if (usePostCSS) { %>"postcss-loader", <% } %>"stylus-loader"],
             },<% } %>
             {
                 test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
                 type: "asset",
             },
+            // HTML and CSS need no loader — webpack supports them out of the box
             // Add your rules for custom modules here
             // Learn more about loaders from https://webpack.js.org/loaders/
         ],
diff --git a/packages/create-webpack-app/templates/init/vue/README.md.tpl b/packages/create-webpack-app/templates/init/vue/README.md.tpl
index 77c91681f17..e5d0964ac16 100644
--- a/packages/create-webpack-app/templates/init/vue/README.md.tpl
+++ b/packages/create-webpack-app/templates/init/vue/README.md.tpl
@@ -13,3 +13,10 @@ yarn build
 ```
 
 to bundle your application
+
+## HTML and CSS
+
+`index.html` is the entry point of this project — webpack bundles every script and
+stylesheet the page references and emits the page as `dist/index.html`, with the
+references rewritten to the generated assets. Both are supported out of the box, so
+no loader or plugin is needed for `.html` and `.css` files.
diff --git a/packages/create-webpack-app/templates/init/vue/postcss.config.js.tpl b/packages/create-webpack-app/templates/init/vue/postcss.config.js.tpl
new file mode 100644
index 00000000000..e84f66aad9e
--- /dev/null
+++ b/packages/create-webpack-app/templates/init/vue/postcss.config.js.tpl
@@ -0,0 +1,5 @@
+export default {
+  // Add your PostCSS configuration here
+  // Learn more about it at https://github.com/webpack-contrib/postcss-loader#config-files
+  plugins: [["autoprefixer"]],
+};
diff --git a/packages/create-webpack-app/templates/init/vue/src/main.js.tpl b/packages/create-webpack-app/templates/init/vue/src/main.js.tpl
index bc26c6d6d6e..b2dfc933cf0 100644
--- a/packages/create-webpack-app/templates/init/vue/src/main.js.tpl
+++ b/packages/create-webpack-app/templates/init/vue/src/main.js.tpl
@@ -1,15 +1,11 @@
 import { createApp } from 'vue'
 import App from './App.vue'
-import router from './router'
+import router from './router/index.js'
 <% if (useVueStore) { %>
   import { createPinia } from 'pinia'
   const store = createPinia()
 <% } %>
-<%  if (cssType == 'CSS only') { %>
-import "./styles/global.css";<% } if (cssType == 'SASS') { %>
-import "./styles/global.scss";<% } if (cssType == 'LESS') { %>
-import "./styles/global.less";<% } if (cssType == 'Stylus') { %>
-import "./styles/global.styl";<% } %>
+import "./styles/global.<%= styleExtension %>";
 
 
 const app = createApp(App)
diff --git a/packages/create-webpack-app/templates/init/vue/src/main.ts.tpl b/packages/create-webpack-app/templates/init/vue/src/main.ts.tpl
index bc26c6d6d6e..503c2f893b9 100644
--- a/packages/create-webpack-app/templates/init/vue/src/main.ts.tpl
+++ b/packages/create-webpack-app/templates/init/vue/src/main.ts.tpl
@@ -5,11 +5,7 @@ import router from './router'
   import { createPinia } from 'pinia'
   const store = createPinia()
 <% } %>
-<%  if (cssType == 'CSS only') { %>
-import "./styles/global.css";<% } if (cssType == 'SASS') { %>
-import "./styles/global.scss";<% } if (cssType == 'LESS') { %>
-import "./styles/global.less";<% } if (cssType == 'Stylus') { %>
-import "./styles/global.styl";<% } %>
+import "./styles/global.<%= styleExtension %>";
 
 
 const app = createApp(App)
diff --git a/packages/create-webpack-app/templates/init/vue/tsconfig.json.tpl b/packages/create-webpack-app/templates/init/vue/tsconfig.json.tpl
index 7730063adac..90bc2fe11ca 100644
--- a/packages/create-webpack-app/templates/init/vue/tsconfig.json.tpl
+++ b/packages/create-webpack-app/templates/init/vue/tsconfig.json.tpl
@@ -14,6 +14,7 @@
     "erasableSyntaxOnly": true,
     "isolatedModules": true,
     "rewriteRelativeImportExtensions": true,
+    "baseUrl": ".",
     "types": [
       "webpack-env",
       "vue-router"
diff --git a/packages/create-webpack-app/templates/init/vue/webpack.config.tpl b/packages/create-webpack-app/templates/init/vue/webpack.config.tpl
index c7775182e22..d0547bd4381 100644
--- a/packages/create-webpack-app/templates/init/vue/webpack.config.tpl
+++ b/packages/create-webpack-app/templates/init/vue/webpack.config.tpl
@@ -13,16 +13,20 @@ const isProduction = process.env.NODE_ENV === "production";
 
 /** @type {import("webpack").Configuration} */
 const config <% if (langType === "Typescript") { %>: Configuration <% } %>= {
-    entry: <% if (html) { %>"./index.html"<% } else { %>"<%= entry %>"<% } %>,
+    // The page itself is the entry: webpack bundles the scripts and stylesheets
+    // it references and emits it as `dist/index.html`.
+    entry: { index: "./index.html" },
     output: {
         path: path.resolve(__dirname, "dist"),
     },<% if (devServer) { %>
     devServer: {
         open: true,
     },<% } %>
+    // vue-loader rewrites `module.rules`, which hides from webpack that no rule
+    // handles `.html`/`.css` — so ask for the built-in support explicitly
     experiments: {
-        css: true,<% if (html) { %>
-        html: true,<% } %>
+        css: true,
+        html: true,
     },
     plugins: [
         new VueLoaderPlugin(),
@@ -56,31 +60,32 @@ const config <% if (langType === "Typescript") { %>: Configuration <% } %>= {
                     transpileOnly: true,
                 },
                 exclude: ["/node_modules/"],
-            },<% } %><%  if (isCSS && isPostCSS) { %>
+            },<% } %><%  if (usePostCSS) { %>
             {
                 test: /\.css$/i,
                 type: "css/auto",
                 use: ["postcss-loader"],
-            },<% } %><%  if (cssType == "SASS") { %>
+            },<% } %><%  if (useSASS) { %>
             {
                 test: /\.s[ac]ss$/i,
                 type: "css/auto",
-                use: [<% if (isPostCSS) { %>"postcss-loader", <% } %>"sass-loader"],
-            },<% } %><%  if (cssType == "LESS") { %>
+                use: [<% if (usePostCSS) { %>"postcss-loader", <% } %>"sass-loader"],
+            },<% } %><%  if (useLESS) { %>
             {
                 test: /\.less$/i,
                 type: "css/auto",
-                use: [<% if (isPostCSS) { %>"postcss-loader", <% } %>"less-loader"],
-            },<% } %><%  if (cssType == "Stylus") { %>
+                use: [<% if (usePostCSS) { %>"postcss-loader", <% } %>"less-loader"],
+            },<% } %><%  if (useStylus) { %>
             {
                 test: /\.styl$/i,
                 type: "css/auto",
-                use: [<% if (isPostCSS) { %>"postcss-loader", <% } %>"stylus-loader"],
+                use: [<% if (usePostCSS) { %>"postcss-loader", <% } %>"stylus-loader"],
             },<% } %>
             {
                 test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
                 type: "asset",
             },
+            // HTML and CSS need no loader — webpack supports them out of the box
             // Add your rules for custom modules here
             // Learn more about loaders from https://webpack.js.org/loaders/
         ],
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 4fe4ac80233..26ad436fb2c 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
@@ -42,19 +42,22 @@ exports[`create-webpack-app cli should ask question when wrong template is suppl
 }
 `;
 
-exports[`create-webpack-app cli should configure WDS as opted 1`] = `
+exports[`create-webpack-app cli should chain PostCSS after a preprocessor when both are selected 1`] = `
 {
   "description": "My webpack project",
   "devDependencies": {
+    "autoprefixer": "x.x.x",
+    "postcss": "x.x.x",
+    "postcss-loader": "x.x.x",
+    "sass": "x.x.x",
+    "sass-loader": "x.x.x",
     "webpack": "x.x.x",
     "webpack-cli": "x.x.x",
-    "webpack-dev-server": "x.x.x",
   },
   "name": "webpack-project",
   "scripts": {
     "build": "webpack --mode=production --config-node-env=production",
     "build:dev": "webpack --mode=development",
-    "serve": "webpack serve",
     "watch": "webpack --watch",
   },
   "type": "module",
@@ -62,7 +65,7 @@ exports[`create-webpack-app cli should configure WDS as opted 1`] = `
 }
 `;
 
-exports[`create-webpack-app cli should configure WDS as opted 2`] = `
+exports[`create-webpack-app cli should chain PostCSS after a preprocessor when both are selected 2`] = `
 "// Generated using webpack-cli https://github.com/webpack/webpack-cli
 
 import path from "node:path";
@@ -74,12 +77,16 @@ const isProduction = process.env.NODE_ENV === "production";
 
 /** @type {import("webpack").Configuration} */
 const config = {
-    entry: "./src/index.js",
+    // The page itself is the entry: webpack bundles the scripts and stylesheets
+    // it references and emits it as \`dist/index.html\`.
+    entry: { index: "./index.html" },
     output: {
         path: path.resolve(__dirname, "dist"),
     },
-    devServer: {
-        open: true,
+    // The PostCSS rule registers a loader for \`.css\`, which turns off the
+    // automatic detection of webpack's built-in CSS support — ask for it
+    experiments: {
+        css: true,
     },
     plugins: [
         // Add your plugins here
@@ -87,11 +94,22 @@ const config = {
     ],
     module: {
         rules: [
+            {
+                test: /\\.css$/i,
+                type: "css/auto",
+                use: ["postcss-loader"],
+            },
+            {
+                test: /\\.s[ac]ss$/i,
+                type: "css/auto",
+                use: ["postcss-loader", "sass-loader"],
+            },
             {
                 test: /\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
                 type: "asset",
             },
 
+            // HTML, CSS need no loader — webpack supports them out of the box
             // Add your rules for custom modules here
             // Learn more about loaders from https://webpack.js.org/loaders/
         ],
@@ -109,17 +127,19 @@ export default () => {
 "
 `;
 
-exports[`create-webpack-app cli should configure native HTML support as opted 1`] = `
+exports[`create-webpack-app cli should configure WDS as opted 1`] = `
 {
   "description": "My webpack project",
   "devDependencies": {
     "webpack": "x.x.x",
     "webpack-cli": "x.x.x",
+    "webpack-dev-server": "x.x.x",
   },
   "name": "webpack-project",
   "scripts": {
     "build": "webpack --mode=production --config-node-env=production",
     "build:dev": "webpack --mode=development",
+    "serve": "webpack serve",
     "watch": "webpack --watch",
   },
   "type": "module",
@@ -127,7 +147,7 @@ exports[`create-webpack-app cli should configure native HTML support as opted 1`
 }
 `;
 
-exports[`create-webpack-app cli should configure native HTML support as opted 2`] = `
+exports[`create-webpack-app cli should configure WDS as opted 2`] = `
 "// Generated using webpack-cli https://github.com/webpack/webpack-cli
 
 import path from "node:path";
@@ -139,10 +159,15 @@ const isProduction = process.env.NODE_ENV === "production";
 
 /** @type {import("webpack").Configuration} */
 const config = {
-    entry: "./index.html",
+    // The page itself is the entry: webpack bundles the scripts and stylesheets
+    // it references and emits it as \`dist/index.html\`.
+    entry: { index: "./index.html" },
     output: {
         path: path.resolve(__dirname, "dist"),
     },
+    devServer: {
+        open: true,
+    },
     plugins: [
         // Add your plugins here
         // Learn more about plugins from https://webpack.js.org/configuration/plugins/
@@ -154,6 +179,7 @@ const config = {
                 type: "asset",
             },
 
+            // HTML, CSS need no loader — webpack supports them out of the box
             // Add your rules for custom modules here
             // Learn more about loaders from https://webpack.js.org/loaders/
         ],
@@ -203,7 +229,9 @@ const isProduction = process.env.NODE_ENV === "production";
 
 /** @type {import("webpack").Configuration} */
 const config = {
-    entry: "./index.html",
+    // The page itself is the entry: webpack bundles the scripts and stylesheets
+    // it references and emits it as \`dist/index.html\`.
+    entry: { index: "./index.html" },
     output: {
         path: path.resolve(__dirname, "dist"),
     },
@@ -218,6 +246,7 @@ const config = {
                 type: "asset",
             },
 
+            // HTML, CSS need no loader — webpack supports them out of the box
             // Add your rules for custom modules here
             // Learn more about loaders from https://webpack.js.org/loaders/
         ],
@@ -269,7 +298,9 @@ const isProduction = process.env.NODE_ENV === "production";
 
 /** @type {import("webpack").Configuration} */
 const config = {
-    entry: "./src/index.js",
+    // The page itself is the entry: webpack bundles the scripts and stylesheets
+    // it references and emits it as \`dist/index.html\`.
+    entry: { index: "./index.html" },
     output: {
         path: path.resolve(__dirname, "dist"),
     },
@@ -288,6 +319,7 @@ const config = {
                 type: "asset",
             },
 
+            // HTML, CSS need no loader — webpack supports them out of the box
             // Add your rules for custom modules here
             // Learn more about loaders from https://webpack.js.org/loaders/
         ],
@@ -339,7 +371,9 @@ const isProduction = process.env.NODE_ENV === "production";
 
 /** @type {import("webpack").Configuration} */
 const config = {
-    entry: "./index.html",
+    // The page itself is the entry: webpack bundles the scripts and stylesheets
+    // it references and emits it as \`dist/index.html\`.
+    entry: { index: "./index.html" },
     output: {
         path: path.resolve(__dirname, "dist"),
     },
@@ -357,6 +391,7 @@ const config = {
                 type: "asset",
             },
 
+            // HTML, CSS need no loader — webpack supports them out of the box
             // Add your rules for custom modules here
             // Learn more about loaders from https://webpack.js.org/loaders/
         ],
@@ -409,7 +444,9 @@ const isProduction = process.env.NODE_ENV === "production";
 
 /** @type {import("webpack").Configuration} */
 const config = {
-    entry: "./index.html",
+    // The page itself is the entry: webpack bundles the scripts and stylesheets
+    // it references and emits it as \`dist/index.html\`.
+    entry: { index: "./index.html" },
     output: {
         path: path.resolve(__dirname, "dist"),
     },
@@ -427,6 +464,7 @@ const config = {
                 type: "asset",
             },
 
+            // HTML, CSS need no loader — webpack supports them out of the box
             // Add your rules for custom modules here
             // Learn more about loaders from https://webpack.js.org/loaders/
         ],
@@ -479,7 +517,9 @@ const isProduction = process.env.NODE_ENV === "production";
 
 /** @type {import("webpack").Configuration} */
 const config = {
-    entry: "./index.html",
+    // The page itself is the entry: webpack bundles the scripts and stylesheets
+    // it references and emits it as \`dist/index.html\`.
+    entry: { index: "./index.html" },
     output: {
         path: path.resolve(__dirname, "dist"),
     },
@@ -497,6 +537,7 @@ const config = {
                 type: "asset",
             },
 
+            // HTML, CSS need no loader — webpack supports them out of the box
             // Add your rules for custom modules here
             // Learn more about loaders from https://webpack.js.org/loaders/
         ],
@@ -549,7 +590,9 @@ const isProduction = process.env.NODE_ENV === "production";
 
 /** @type {import("webpack").Configuration} */
 const config = {
-    entry: "./index.html",
+    // The page itself is the entry: webpack bundles the scripts and stylesheets
+    // it references and emits it as \`dist/index.html\`.
+    entry: { index: "./index.html" },
     output: {
         path: path.resolve(__dirname, "dist"),
     },
@@ -567,6 +610,7 @@ const config = {
                 type: "asset",
             },
 
+            // HTML, CSS need no loader — webpack supports them out of the box
             // Add your rules for custom modules here
             // Learn more about loaders from https://webpack.js.org/loaders/
         ],
@@ -619,7 +663,9 @@ const isProduction = process.env.NODE_ENV === "production";
 
 /** @type {import("webpack").Configuration} */
 const config = {
-    entry: "./index.html",
+    // The page itself is the entry: webpack bundles the scripts and stylesheets
+    // it references and emits it as \`dist/index.html\`.
+    entry: { index: "./index.html" },
     output: {
         path: path.resolve(__dirname, "dist"),
     },
@@ -637,6 +683,7 @@ const config = {
                 type: "asset",
             },
 
+            // HTML, CSS need no loader — webpack supports them out of the box
             // Add your rules for custom modules here
             // Learn more about loaders from https://webpack.js.org/loaders/
         ],
@@ -705,10 +752,7 @@ exports[`create-webpack-app cli should generate react template with state and ro
     "@babel/preset-env": "x.x.x",
     "@babel/preset-react": "x.x.x",
     "@types/react-router-dom": "x.x.x",
-    "autoprefixer": "x.x.x",
     "babel-loader": "x.x.x",
-    "postcss": "x.x.x",
-    "postcss-loader": "x.x.x",
     "react": "x.x.x",
     "react-dom": "x.x.x",
     "react-router-dom": "x.x.x",
@@ -742,16 +786,15 @@ const isProduction = process.env.NODE_ENV === "production";
 
 /** @type {import("webpack").Configuration} */
 const config = {
-    entry: "./index.html",
+    // The page itself is the entry: webpack bundles the scripts and stylesheets
+    // it references and emits it as \`dist/index.html\`.
+    entry: { index: "./index.html" },
     output: {
         path: path.resolve(__dirname, "dist"),
     },
     devServer: {
         open: true,
     },
-    experiments: {
-        css: true,
-    },
     plugins: [
         // Add your plugins here
         // Learn more about plugins from https://webpack.js.org/configuration/plugins/
@@ -768,16 +811,12 @@ const config = {
                     },
                 },
             },
-            {
-                test: /\\.css$/i,
-                type: "css/auto",
-                use: ["postcss-loader"],
-            },
             {
                 test: /\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
                 type: "asset",
             },
 
+            // HTML and CSS need no loader — webpack supports them out of the box
             // Add your rules for custom modules here
             // Learn more about loaders from https://webpack.js.org/loaders/
         ],
@@ -809,9 +848,6 @@ exports[`create-webpack-app cli should generate react template with typescript 1
     "@types/react": "x.x.x",
     "@types/react-dom": "x.x.x",
     "@types/react-router-dom": "x.x.x",
-    "autoprefixer": "x.x.x",
-    "postcss": "x.x.x",
-    "postcss-loader": "x.x.x",
     "react": "x.x.x",
     "react-dom": "x.x.x",
     "react-router-dom": "x.x.x",
@@ -849,16 +885,15 @@ const isProduction = process.env.NODE_ENV === "production";
 
 /** @type {import("webpack").Configuration} */
 const config : Configuration = {
-    entry: "./index.html",
+    // The page itself is the entry: webpack bundles the scripts and stylesheets
+    // it references and emits it as \`dist/index.html\`.
+    entry: { index: "./index.html" },
     output: {
         path: path.resolve(__dirname, "dist"),
     },
     devServer: {
         open: true,
     },
-    experiments: {
-        css: true,
-    },
     plugins: [
         // Add your plugins here
         // Learn more about plugins from https://webpack.js.org/configuration/plugins/
@@ -870,16 +905,12 @@ const config : Configuration = {
                 loader: "ts-loader",
                 exclude: ["/node_modules/"],
             },
-            {
-                test: /\\.css$/i,
-                type: "css/auto",
-                use: ["postcss-loader"],
-            },
             {
                 test: /\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
                 type: "asset",
             },
 
+            // HTML and CSS need no loader — webpack supports them out of the box
             // Add your rules for custom modules here
             // Learn more about loaders from https://webpack.js.org/loaders/
         ],
@@ -910,10 +941,7 @@ exports[`create-webpack-app cli should generate svelte template with prompt answ
   "devDependencies": {
     "@babel/core": "x.x.x",
     "@babel/preset-env": "x.x.x",
-    "autoprefixer": "x.x.x",
     "babel-loader": "x.x.x",
-    "postcss": "x.x.x",
-    "postcss-loader": "x.x.x",
     "svelte": "x.x.x",
     "svelte-loader": "x.x.x",
     "webpack": "x.x.x",
@@ -946,16 +974,15 @@ const isProduction = process.env.NODE_ENV === "production";
 
 /** @type {import("webpack").Configuration} */
 const config = {
-    entry: "./index.html",
+    // The page itself is the entry: webpack bundles the scripts and stylesheets
+    // it references and emits it as \`dist/index.html\`.
+    entry: { index: "./index.html" },
     output: {
         path: path.resolve(__dirname, "dist"),
     },
     devServer: {
         open: true,
     },
-    experiments: {
-        css: true,
-    },
     plugins: [
         // Add your plugins here
         // Learn more about plugins from https://webpack.js.org/configuration/plugins/
@@ -982,15 +1009,11 @@ const config = {
                     },
                 },
             },
-            {
-                test: /\\.css$/i,
-                type: "css/auto",
-                use: ["postcss-loader"],
-            },
             {
                 test: /\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
                 type: "asset",
             },
+            // HTML and CSS need no loader — webpack supports them out of the box
             // Add your rules for custom modules here
             // Learn more about loaders from https://webpack.js.org/loaders/
         ],
@@ -1022,9 +1045,6 @@ exports[`create-webpack-app cli should generate svelte template with typescript
   "description": "My webpack project",
   "devDependencies": {
     "@tsconfig/svelte": "x.x.x",
-    "autoprefixer": "x.x.x",
-    "postcss": "x.x.x",
-    "postcss-loader": "x.x.x",
     "svelte": "x.x.x",
     "svelte-loader": "x.x.x",
     "ts-loader": "x.x.x",
@@ -1061,16 +1081,15 @@ const isProduction = process.env.NODE_ENV === "production";
 
 /** @type {import("webpack").Configuration} */
 const config : Configuration = {
-    entry: "./index.html",
+    // The page itself is the entry: webpack bundles the scripts and stylesheets
+    // it references and emits it as \`dist/index.html\`.
+    entry: { index: "./index.html" },
     output: {
         path: path.resolve(__dirname, "dist"),
     },
     devServer: {
         open: true,
     },
-    experiments: {
-        css: true,
-    },
     plugins: [
         // Add your plugins here
         // Learn more about plugins from https://webpack.js.org/configuration/plugins/
@@ -1095,15 +1114,11 @@ const config : Configuration = {
                     appendTsSuffixTo: [/\\.svelte$/],
                 },
             },
-            {
-                test: /\\.css$/i,
-                type: "css/auto",
-                use: ["postcss-loader"],
-            },
             {
                 test: /\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
                 type: "asset",
             },
+            // HTML and CSS need no loader — webpack supports them out of the box
             // Add your rules for custom modules here
             // Learn more about loaders from https://webpack.js.org/loaders/
         ],
@@ -1134,15 +1149,18 @@ exports[`create-webpack-app cli should generate typescript project correctly 1`]
 {
   "description": "My webpack project",
   "devDependencies": {
-    "ts-loader": "x.x.x",
     "typescript": "x.x.x",
     "webpack": "x.x.x",
     "webpack-cli": "x.x.x",
   },
+  "engines": {
+    "node": ">=22.6.0",
+  },
   "name": "webpack-project",
   "scripts": {
     "build": "webpack --mode=production --config-node-env=production",
     "build:dev": "webpack --mode=development",
+    "check:types": "tsc --noEmit",
     "watch": "webpack --watch",
   },
   "type": "module",
@@ -1163,7 +1181,9 @@ const isProduction = process.env.NODE_ENV === "production";
 
 /** @type {import("webpack").Configuration} */
 const config : Configuration = {
-    entry: "./src/index.ts",
+    // The page itself is the entry: webpack bundles the scripts and stylesheets
+    // it references and emits it as \`dist/index.html\`.
+    entry: { index: "./index.html" },
     output: {
         path: path.resolve(__dirname, "dist"),
     },
@@ -1173,16 +1193,12 @@ const config : Configuration = {
     ],
     module: {
         rules: [
-            {
-                test: /\\.(ts|tsx)$/i,
-                loader: "ts-loader",
-                exclude: ["/node_modules/"],
-            },
             {
                 test: /\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
                 type: "asset",
             },
 
+            // HTML, CSS and TypeScript need no loader — webpack supports them out of the box
             // Add your rules for custom modules here
             // Learn more about loaders from https://webpack.js.org/loaders/
         ],
@@ -1210,11 +1226,8 @@ exports[`create-webpack-app cli should generate vue template with store and rout
     "@babel/core": "x.x.x",
     "@babel/preset-env": "x.x.x",
     "@vue/compiler-sfc": "x.x.x",
-    "autoprefixer": "x.x.x",
     "babel-loader": "x.x.x",
     "pinia": "x.x.x",
-    "postcss": "x.x.x",
-    "postcss-loader": "x.x.x",
     "vue": "x.x.x",
     "vue-loader": "x.x.x",
     "vue-router": "x.x.x",
@@ -1249,13 +1262,17 @@ const isProduction = process.env.NODE_ENV === "production";
 
 /** @type {import("webpack").Configuration} */
 const config = {
-    entry: "./index.html",
+    // The page itself is the entry: webpack bundles the scripts and stylesheets
+    // it references and emits it as \`dist/index.html\`.
+    entry: { index: "./index.html" },
     output: {
         path: path.resolve(__dirname, "dist"),
     },
     devServer: {
         open: true,
     },
+    // vue-loader rewrites \`module.rules\`, which hides from webpack that no rule
+    // handles \`.html\`/\`.css\` — so ask for the built-in support explicitly
     experiments: {
         css: true,
         html: true,
@@ -1284,15 +1301,11 @@ const config = {
                     },
                 },
             },
-            {
-                test: /\\.css$/i,
-                type: "css/auto",
-                use: ["postcss-loader"],
-            },
             {
                 test: /\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
                 type: "asset",
             },
+            // HTML and CSS need no loader — webpack supports them out of the box
             // Add your rules for custom modules here
             // Learn more about loaders from https://webpack.js.org/loaders/
         ],
@@ -1321,10 +1334,7 @@ exports[`create-webpack-app cli should generate vue template with typescript 1`]
   "description": "My webpack project",
   "devDependencies": {
     "@vue/compiler-sfc": "x.x.x",
-    "autoprefixer": "x.x.x",
     "pinia": "x.x.x",
-    "postcss": "x.x.x",
-    "postcss-loader": "x.x.x",
     "ts-loader": "x.x.x",
     "typescript": "x.x.x",
     "vue": "x.x.x",
@@ -1363,13 +1373,17 @@ const isProduction = process.env.NODE_ENV === "production";
 
 /** @type {import("webpack").Configuration} */
 const config : Configuration = {
-    entry: "./index.html",
+    // The page itself is the entry: webpack bundles the scripts and stylesheets
+    // it references and emits it as \`dist/index.html\`.
+    entry: { index: "./index.html" },
     output: {
         path: path.resolve(__dirname, "dist"),
     },
     devServer: {
         open: true,
     },
+    // vue-loader rewrites \`module.rules\`, which hides from webpack that no rule
+    // handles \`.html\`/\`.css\` — so ask for the built-in support explicitly
     experiments: {
         css: true,
         html: true,
@@ -1397,15 +1411,11 @@ const config : Configuration = {
                 },
                 exclude: ["/node_modules/"],
             },
-            {
-                test: /\\.css$/i,
-                type: "css/auto",
-                use: ["postcss-loader"],
-            },
             {
                 test: /\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
                 type: "asset",
             },
+            // HTML and CSS need no loader — webpack supports them out of the box
             // Add your rules for custom modules here
             // Learn more about loaders from https://webpack.js.org/loaders/
         ],
@@ -1430,15 +1440,13 @@ export default () => {
 "
 `;
 
-exports[`create-webpack-app cli should use css preprocessor and css with postcss in project when selected 1`] = `
+exports[`create-webpack-app cli should scaffold PostCSS on top of the built-in CSS support when selected 1`] = `
 {
   "description": "My webpack project",
   "devDependencies": {
     "autoprefixer": "x.x.x",
     "postcss": "x.x.x",
     "postcss-loader": "x.x.x",
-    "sass": "x.x.x",
-    "sass-loader": "x.x.x",
     "webpack": "x.x.x",
     "webpack-cli": "x.x.x",
   },
@@ -1453,7 +1461,7 @@ exports[`create-webpack-app cli should use css preprocessor and css with postcss
 }
 `;
 
-exports[`create-webpack-app cli should use css preprocessor and css with postcss in project when selected 2`] = `
+exports[`create-webpack-app cli should scaffold PostCSS on top of the built-in CSS support when selected 2`] = `
 "// Generated using webpack-cli https://github.com/webpack/webpack-cli
 
 import path from "node:path";
@@ -1465,10 +1473,14 @@ const isProduction = process.env.NODE_ENV === "production";
 
 /** @type {import("webpack").Configuration} */
 const config = {
-    entry: "./src/index.js",
+    // The page itself is the entry: webpack bundles the scripts and stylesheets
+    // it references and emits it as \`dist/index.html\`.
+    entry: { index: "./index.html" },
     output: {
         path: path.resolve(__dirname, "dist"),
     },
+    // The PostCSS rule registers a loader for \`.css\`, which turns off the
+    // automatic detection of webpack's built-in CSS support — ask for it
     experiments: {
         css: true,
     },
@@ -1483,16 +1495,12 @@ const config = {
                 type: "css/auto",
                 use: ["postcss-loader"],
             },
-            {
-                test: /\\.s[ac]ss$/i,
-                type: "css/auto",
-                use: ["postcss-loader", "sass-loader"],
-            },
             {
                 test: /\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
                 type: "asset",
             },
 
+            // HTML, CSS need no loader — webpack supports them out of the box
             // Add your rules for custom modules here
             // Learn more about loaders from https://webpack.js.org/loaders/
         ],
@@ -1510,13 +1518,10 @@ export default () => {
 "
 `;
 
-exports[`create-webpack-app cli should use css preprocessor with postcss in project when selected 1`] = `
+exports[`create-webpack-app cli should scaffold a preprocessor through the built-in CSS support when selected 1`] = `
 {
   "description": "My webpack project",
   "devDependencies": {
-    "autoprefixer": "x.x.x",
-    "postcss": "x.x.x",
-    "postcss-loader": "x.x.x",
     "sass": "x.x.x",
     "sass-loader": "x.x.x",
     "webpack": "x.x.x",
@@ -1533,7 +1538,7 @@ exports[`create-webpack-app cli should use css preprocessor with postcss in proj
 }
 `;
 
-exports[`create-webpack-app cli should use css preprocessor with postcss in project when selected 2`] = `
+exports[`create-webpack-app cli should scaffold a preprocessor through the built-in CSS support when selected 2`] = `
 "// Generated using webpack-cli https://github.com/webpack/webpack-cli
 
 import path from "node:path";
@@ -1545,7 +1550,9 @@ const isProduction = process.env.NODE_ENV === "production";
 
 /** @type {import("webpack").Configuration} */
 const config = {
-    entry: "./src/index.js",
+    // The page itself is the entry: webpack bundles the scripts and stylesheets
+    // it references and emits it as \`dist/index.html\`.
+    entry: { index: "./index.html" },
     output: {
         path: path.resolve(__dirname, "dist"),
     },
@@ -1558,13 +1565,14 @@ const config = {
             {
                 test: /\\.s[ac]ss$/i,
                 type: "css/auto",
-                use: ["postcss-loader", "sass-loader"],
+                use: ["sass-loader"],
             },
             {
                 test: /\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
                 type: "asset",
             },
 
+            // HTML, CSS need no loader — webpack supports them out of the box
             // Add your rules for custom modules here
             // Learn more about loaders from https://webpack.js.org/loaders/
         ],
diff --git a/test/create-webpack-app/init/generators.test.js b/test/create-webpack-app/init/generators.test.js
new file mode 100644
index 00000000000..5bd31c4a30d
--- /dev/null
+++ b/test/create-webpack-app/init/generators.test.js
@@ -0,0 +1,157 @@
+const path = require("node:path");
+const { pathToFileURL } = require("node:url");
+
+const LIB = path.resolve(__dirname, "../../../packages/create-webpack-app/lib");
+
+const BASE_ANSWERS = {
+  projectPath: "/tmp/create-webpack-app-generators",
+  langType: "ES6",
+  devServer: true,
+  workboxWebpackPlugin: false,
+  useReactState: true,
+  useVueStore: true,
+  packageManager: "npm",
+};
+
+// Each template scaffolds its stylesheet in a different place
+const STYLESHEETS = {
+  default: (extension) => `styles.${extension}`,
+  react: (extension) => `global.${extension}`,
+  vue: (extension) => `global.${extension}`,
+  svelte: (extension) => `global.${extension}`,
+};
+
+const TEMPLATES = Object.keys(STYLESHEETS);
+
+// Every choice of the CSS tool question, and what it has to pull in
+const CSS_TOOLS = [
+  { answer: "none", extension: "css", packages: [] },
+  { answer: "PostCSS", extension: "css", packages: ["postcss-loader", "postcss", "autoprefixer"] },
+  { answer: "SASS", extension: "scss", packages: ["sass-loader", "sass"] },
+  {
+    answer: "SASS with PostCSS",
+    extension: "scss",
+    packages: ["sass-loader", "sass", "postcss-loader"],
+  },
+  { answer: "LESS", extension: "less", packages: ["less-loader", "less"] },
+  {
+    answer: "LESS with PostCSS",
+    extension: "less",
+    packages: ["less-loader", "less", "postcss-loader"],
+  },
+  { answer: "Stylus", extension: "styl", packages: ["stylus-loader", "stylus"] },
+  {
+    answer: "Stylus with PostCSS",
+    extension: "styl",
+    packages: ["stylus-loader", "stylus", "postcss-loader"],
+  },
+];
+
+/**
+ * Registers a generator against the few plop methods it calls, so its answer
+ * handling can be exercised without a plop instance.
+ * @param {string} template template name
+ * @returns {Promise<EXPECTED_ANY>} the generator config
+ */
+const generatorFor = async (template) => {
+  const module = await import(pathToFileURL(path.join(LIB, "generators/init", `${template}.js`)));
+
+  let config;
+
+  await module.default({
+    load: async () => {},
+    setDefaultInclude: () => {},
+    setPlopfilePath: () => {},
+    getPlopfilePath: () => path.join(LIB, "plopfile.js"),
+    setGenerator: (name, generatorConfig) => {
+      config = generatorConfig;
+    },
+  });
+
+  return config;
+};
+
+// The action list is built without running any action, so no project is written
+// and nothing is installed.
+const actionsFor = async (template, answers) => {
+  const generator = await generatorFor(template);
+
+  return generator.actions({ ...BASE_ANSWERS, ...answers });
+};
+
+const filesFrom = (actions) =>
+  actions
+    .filter((action) => action.type === "generate-files")
+    .map((action) => path.basename(action.path));
+
+const packagesFrom = (actions) =>
+  actions.find((action) => action.type === "install-dependencies").packages;
+
+describe("create-webpack-app generators", () => {
+  for (const template of TEMPLATES) {
+    for (const { answer, extension, packages } of CSS_TOOLS) {
+      it(`scaffolds the ${template} template with "${answer}"`, async () => {
+        const actions = await actionsFor(template, { cssTool: answer });
+        const files = filesFrom(actions);
+        const installed = packagesFrom(actions);
+
+        // the starter stylesheet is written in the language that was picked
+        expect(files).toContain(STYLESHEETS[template](extension));
+
+        for (const name of packages) {
+          expect(installed).toContain(name);
+        }
+
+        // PostCSS is the only tool that needs a config file
+        if (answer.includes("PostCSS")) {
+          expect(files).toContain("postcss.config.js");
+        } else {
+          expect(files).not.toContain("postcss.config.js");
+        }
+
+        // whatever is picked, webpack's own CSS and HTML support stays untouched
+        expect(installed).not.toContain("css-loader");
+        expect(installed).not.toContain("style-loader");
+        expect(installed).not.toContain("mini-css-extract-plugin");
+        expect(installed).not.toContain("html-webpack-plugin");
+        expect(files).toContain("index.html");
+      });
+    }
+  }
+
+  it("scaffolds TypeScript on webpack's own support, with a tsconfig to check against", async () => {
+    const actions = await actionsFor("default", { langType: "Typescript", cssTool: "none" });
+    const files = filesFrom(actions);
+    const installed = packagesFrom(actions);
+
+    expect(files).toContain("index.ts");
+    expect(files).toContain("tsconfig.json");
+    // `typescript` is for the editor and `check:types`, not for the build
+    expect(installed).toContain("typescript");
+    expect(installed).not.toContain("ts-loader");
+  });
+
+  it("keeps ts-loader reachable for what type stripping cannot do", async () => {
+    const actions = await actionsFor("default", {
+      langType: "Typescript",
+      cssTool: "none",
+      tsCompiler: "ts-loader",
+    });
+    const installed = packagesFrom(actions);
+
+    expect(installed).toContain("ts-loader");
+    // ts-loader 9 throws on TypeScript 7, so the compiler is pinned with it
+    expect(installed).toContain("typescript@5");
+    expect(installed).not.toContain("typescript");
+  });
+
+  // Only the default template can lean on webpack: type stripping handles neither
+  // `.tsx` nor the single-file components the framework loaders produce.
+  for (const template of ["react", "vue", "svelte"]) {
+    it(`keeps a TypeScript loader for the ${template} template`, async () => {
+      const actions = await actionsFor(template, { langType: "Typescript", cssTool: "none" });
+
+      expect(packagesFrom(actions)).toContain("ts-loader");
+    });
+  }
+});
diff --git a/test/create-webpack-app/init/init.test.js b/test/create-webpack-app/init/init.test.js
index 111475090ad..0623531bda9 100644
--- a/test/create-webpack-app/init/init.test.js
+++ b/test/create-webpack-app/init/init.test.js
@@ -9,7 +9,6 @@ jest.setTimeout(480000);
 const { run, runPromptWithAnswers } = createPathDependentUtils("create-webpack-app");
 
 const ENTER = "\u000D";
-const UP = "\u001B\u005B\u0041";
 const DOWN = "\u001B\u005B\u0042";
 
 const defaultTemplateFiles = [
@@ -167,8 +166,7 @@ describe("create-webpack-app cli", () => {
         `${DOWN}${ENTER}`,
         `n${ENTER}`,
         `n${ENTER}`,
-        `n${ENTER}`,
-        `${UP}${ENTER}`,
+        ENTER,
         ENTER,
         // test for conflicts
         `y${ENTER}`,
@@ -299,9 +297,10 @@ describe("create-webpack-app cli", () => {
     const { stdout } = await runPromptWithAnswers(
       dir,
       ["init", "."],
-      [`${DOWN}${DOWN}${ENTER}`, `n${ENTER}`, `n${ENTER}`, `n${ENTER}`, `${UP}${ENTER}`, ENTER],
+      [`${DOWN}${DOWN}${ENTER}`, ENTER, `n${ENTER}`, `n${ENTER}`, ENTER, ENTER],
     );
 
+    expect(stdout).toContain("How should TypeScript be compiled?");
     expect(stdout).toContain("Project has been initialised with webpack!");
     expect(stdout).toContain("webpack.config.ts");
     expect(stdout).toContain("tsconfig.json");
@@ -320,6 +319,13 @@ describe("create-webpack-app cli", () => {
       expect(existsSync(resolve(dir, file))).toBeTruthy();
     }
 
+    // webpack strips the types itself, so the project carries no TypeScript loader
+    const { devDependencies } = readFromPkgJSON(dir);
+
+    expect(readFromWebpackConfig(dir, "webpack.config.ts")).not.toContain("ts-loader");
+    expect(Object.keys(devDependencies)).not.toContain("ts-loader");
+    expect(Object.keys(devDependencies)).toContain("typescript");
+
     // Check if the generated package.json file content matches the snapshot
     expect(readFromPkgJSON(dir)).toMatchSnapshot();
 
@@ -331,7 +337,7 @@ describe("create-webpack-app cli", () => {
     const { stdout } = await runPromptWithAnswers(
       dir,
       ["init", "."],
-      [`${DOWN}${ENTER}`, `n${ENTER}`, `n${ENTER}`, `n${ENTER}`, `${UP}${ENTER}`, ENTER],
+      [`${DOWN}${ENTER}`, `n${ENTER}`, `n${ENTER}`, ENTER, ENTER],
     );
 
     expect(stdout).toContain("Project has been initialised with webpack!");
@@ -352,23 +358,14 @@ describe("create-webpack-app cli", () => {
     expect(readFromWebpackConfig(dir)).toMatchSnapshot();
   });
 
-  it("should use css preprocessor with postcss in project when selected", async () => {
+  it("should configure WDS as opted", async () => {
     const { stdout } = await runPromptWithAnswers(
       dir,
       ["init", "."],
-      [
-        ENTER,
-        `n${ENTER}`,
-        `n${ENTER}`,
-        `n${ENTER}`,
-        `${DOWN}${ENTER}`,
-        `n${ENTER}`,
-        `y${ENTER}`,
-        ENTER,
-        ENTER,
-      ],
+      [ENTER, ENTER, `n${ENTER}`, ENTER, ENTER],
     );
 
+    expect(stdout).toContain("Would you like to use Webpack Dev server?");
     expect(stdout).toContain("Project has been initialised with webpack!");
     expect(stdout).toContain("webpack.config.js");
 
@@ -384,32 +381,55 @@ describe("create-webpack-app cli", () => {
     expect(readFromWebpackConfig(dir)).toMatchSnapshot();
   });
 
-  it("should use css preprocessor and css with postcss in project when selected", async () => {
+  it("should not ask about HTML and CSS, which webpack supports out of the box", async () => {
     const { stdout } = await runPromptWithAnswers(
       dir,
       ["init", "."],
-      [
-        `${ENTER}`,
-        `n${ENTER}`,
-        `n${ENTER}`,
-        `n${ENTER}`,
-        `${DOWN}${ENTER}`,
-        `y${ENTER}`,
-        `y${ENTER}`,
-        ENTER,
-        ENTER,
-      ],
+      [ENTER, ENTER, ENTER, ENTER, ENTER],
     );
 
     expect(stdout).toContain("Project has been initialised with webpack!");
-    expect(stdout).toContain("webpack.config.js");
+    expect(stdout).not.toContain(
+      "Do you want to simplify the creation of HTML files for your bundle?",
+    );
+    expect(stdout).not.toContain("Which of the following CSS solution do you want to use?");
+    expect(stdout).not.toContain("Will you be using CSS styles along with");
+    expect(stdout).not.toContain("Do you want to use PostCSS in your project?");
+    expect(stdout).not.toContain("Do you want to extract CSS into separate files?");
 
-    // Test files
-    const files = [...defaultTemplateFiles, "postcss.config.js"];
+    // The page is the entry, and nothing loads HTML or CSS
+    const config = readFromWebpackConfig(dir);
 
-    for (const file of files) {
-      expect(existsSync(resolve(dir, file))).toBeTruthy();
-    }
+    expect(config).toContain('entry: { index: "./index.html" }');
+    expect(config).not.toContain("html-webpack-plugin");
+    expect(config).not.toContain('"css-loader"');
+    expect(config).not.toContain("mini-css-extract-plugin");
+
+    const { devDependencies } = readFromPkgJSON(dir);
+
+    expect(Object.keys(devDependencies)).not.toContain("html-webpack-plugin");
+    expect(Object.keys(devDependencies)).not.toContain("css-loader");
+    expect(existsSync(resolve(dir, "src/styles.css"))).toBeTruthy();
+    expect(existsSync(resolve(dir, "postcss.config.js"))).toBeFalsy();
+  });
+
+  it("should scaffold a preprocessor through the built-in CSS support when selected", async () => {
+    const { stdout } = await runPromptWithAnswers(
+      dir,
+      ["init", "."],
+      [ENTER, `n${ENTER}`, `n${ENTER}`, `${DOWN}${DOWN}${ENTER}`, ENTER],
+    );
+
+    expect(stdout).toContain("Which CSS tool do you want to use?");
+    expect(stdout).toContain("Project has been initialised with webpack!");
+
+    // Sass is wired as a `css/auto` rule, so it needs no css-loader
+    const config = readFromWebpackConfig(dir);
+
+    expect(config).toContain('type: "css/auto"');
+    expect(config).toContain('use: ["sass-loader"]');
+    expect(config).not.toContain('"css-loader"');
+    expect(existsSync(resolve(dir, "src/styles.scss"))).toBeTruthy();
 
     // Check if the generated package.json file content matches the snapshot
     expect(readFromPkgJSON(dir)).toMatchSnapshot();
@@ -418,21 +438,29 @@ describe("create-webpack-app cli", () => {
     expect(readFromWebpackConfig(dir)).toMatchSnapshot();
   });
 
-  it("should configure WDS as opted", async () => {
+  it("should scaffold PostCSS on top of the built-in CSS support when selected", async () => {
     const { stdout } = await runPromptWithAnswers(
       dir,
       ["init", "."],
-      [ENTER, ENTER, `n${ENTER}`, `n${ENTER}`, `${UP}${ENTER}`, ENTER],
+      [ENTER, `n${ENTER}`, `n${ENTER}`, `${DOWN}${ENTER}`, ENTER],
     );
 
-    expect(stdout).toContain("Would you like to use Webpack Dev server?");
     expect(stdout).toContain("Project has been initialised with webpack!");
-    expect(stdout).toContain("webpack.config.js");
 
-    // Test files
-    for (const file of defaultTemplateFiles) {
-      expect(existsSync(resolve(dir, file))).toBeTruthy();
-    }
+    // A loader for `.css` turns the auto detection off, so the config asks for
+    // the built-in CSS support explicitly
+    const config = readFromWebpackConfig(dir);
+
+    expect(config).toContain("experiments: {");
+    expect(config).toContain("css: true");
+    expect(config).toContain('use: ["postcss-loader"]');
+    expect(config).not.toContain('"css-loader"');
+    expect(existsSync(resolve(dir, "postcss.config.js"))).toBeTruthy();
+
+    const { devDependencies } = readFromPkgJSON(dir);
+
+    expect(Object.keys(devDependencies)).toContain("postcss-loader");
+    expect(Object.keys(devDependencies)).toContain("autoprefixer");
 
     // Check if the generated package.json file content matches the snapshot
     expect(readFromPkgJSON(dir)).toMatchSnapshot();
@@ -441,21 +469,28 @@ describe("create-webpack-app cli", () => {
     expect(readFromWebpackConfig(dir)).toMatchSnapshot();
   });
 
-  it("should configure native HTML support as opted", async () => {
+  it("should chain PostCSS after a preprocessor when both are selected", async () => {
     const { stdout } = await runPromptWithAnswers(
       dir,
       ["init", "."],
-      [ENTER, `n${ENTER}`, ENTER, `n${ENTER}`, `${UP}${ENTER}`, ENTER],
+      [ENTER, `n${ENTER}`, `n${ENTER}`, `${DOWN}${DOWN}${DOWN}${ENTER}`, ENTER],
     );
 
-    expect(stdout).toContain("Do you want to simplify the creation of HTML files for your bundle?");
     expect(stdout).toContain("Project has been initialised with webpack!");
-    expect(stdout).toContain("webpack.config.js");
 
-    // Test files
-    for (const file of defaultTemplateFiles) {
-      expect(existsSync(resolve(dir, file))).toBeTruthy();
-    }
+    // `use` is applied right to left, so Sass compiles first and PostCSS runs over it
+    const config = readFromWebpackConfig(dir);
+
+    expect(config).toContain('use: ["postcss-loader", "sass-loader"]');
+    expect(config).toContain('use: ["postcss-loader"]');
+    expect(config).toContain("css: true");
+    expect(existsSync(resolve(dir, "src/styles.scss"))).toBeTruthy();
+    expect(existsSync(resolve(dir, "postcss.config.js"))).toBeTruthy();
+
+    const { devDependencies } = readFromPkgJSON(dir);
+
+    expect(Object.keys(devDependencies)).toContain("sass-loader");
+    expect(Object.keys(devDependencies)).toContain("postcss-loader");
 
     // Check if the generated package.json file content matches the snapshot
     expect(readFromPkgJSON(dir)).toMatchSnapshot();
@@ -468,7 +503,7 @@ describe("create-webpack-app cli", () => {
     const { stdout } = await runPromptWithAnswers(
       dir,
       ["init", "."],
-      [ENTER, `n${ENTER}`, ENTER, ENTER, `${UP}${ENTER}`, ENTER],
+      [ENTER, `n${ENTER}`, ENTER, ENTER, ENTER],
     );
 
     expect(stdout).toContain("Do you want to add PWA support?");
@@ -491,7 +526,7 @@ describe("create-webpack-app cli", () => {
     const { stdout } = await runPromptWithAnswers(
       dir,
       ["init", "."],
-      [ENTER, `n${ENTER}`, `n${ENTER}`, `n${ENTER}`, `${UP}${ENTER}`, `${DOWN}${ENTER}`],
+      [ENTER, `n${ENTER}`, `n${ENTER}`, ENTER, `${DOWN}${ENTER}`],
     );
 
     expect(stdout).toContain("Project has been initialised with webpack!");
@@ -515,7 +550,7 @@ describe("create-webpack-app cli", () => {
     const { stdout } = await runPromptWithAnswers(
       dir,
       ["init", ".", "--template=react"],
-      [ENTER, `y${ENTER}`, `y${ENTER}`, ENTER, `y${ENTER}`, ENTER, ENTER, ENTER],
+      [ENTER, `y${ENTER}`, `y${ENTER}`, ENTER, ENTER],
     );
 
     expect(stdout).toContain("Project has been initialised with webpack!");
@@ -537,7 +572,7 @@ describe("create-webpack-app cli", () => {
     const { stdout } = await runPromptWithAnswers(
       dir,
       ["init", ".", "--template=react"],
-      [`${DOWN}${ENTER}`, `y${ENTER}`, `y${ENTER}`, ENTER, `y${ENTER}`, ENTER, ENTER, ENTER],
+      [`${DOWN}${ENTER}`, `y${ENTER}`, `y${ENTER}`, ENTER, ENTER],
     );
 
     expect(stdout).toContain("Project has been initialised with webpack!");
@@ -555,7 +590,7 @@ describe("create-webpack-app cli", () => {
     const { stdout } = await runPromptWithAnswers(
       dir,
       ["init", ".", "--template=vue"],
-      [ENTER, `y${ENTER}`, `y${ENTER}`, `${ENTER}`, `y${ENTER}`, ENTER, ENTER],
+      [ENTER, `y${ENTER}`, `y${ENTER}`, ENTER, ENTER],
     );
 
     expect(stdout).toContain("Project has been initialised with webpack!");
@@ -579,7 +614,7 @@ describe("create-webpack-app cli", () => {
     const { stdout } = await runPromptWithAnswers(
       dir,
       ["init", ".", "--template=vue"],
-      [`${DOWN}${ENTER}`, `y${ENTER}`, `y${ENTER}`, `${ENTER}`, `y${ENTER}`, ENTER, ENTER],
+      [`${DOWN}${ENTER}`, `y${ENTER}`, `y${ENTER}`, ENTER, ENTER],
     );
 
     expect(stdout).toContain("Project has been initialised with webpack!");
@@ -597,7 +632,7 @@ describe("create-webpack-app cli", () => {
     const { stdout } = await runPromptWithAnswers(
       dir,
       ["init", ".", "--template=svelte"],
-      [ENTER, `y${ENTER}`, ENTER, `y${ENTER}`, ENTER, ENTER],
+      [ENTER, `y${ENTER}`, ENTER, ENTER],
     );
 
     expect(stdout).toContain("Project has been initialised with webpack!");
@@ -619,7 +654,7 @@ describe("create-webpack-app cli", () => {
     const { stdout } = await runPromptWithAnswers(
       dir,
       ["init", ".", "--template=svelte"],
-      [`${DOWN}${ENTER}`, `y${ENTER}`, ENTER, `y${ENTER}`, ENTER, ENTER],
+      [`${DOWN}${ENTER}`, `y${ENTER}`, ENTER, ENTER],
     );
 
     expect(stdout).toContain("Project has been initialised with webpack!");