webpack · alexander-akait · Apr 20, 2026 · Apr 17, 2026 · Apr 17, 2026 · Apr 17, 2026
diff --git a/packages/create-webpack-app/src/generators/init/react.ts b/packages/create-webpack-app/src/generators/init/react.ts
@@ -151,7 +151,10 @@ export default async function reactInitGenerator(plop: NodePlopAPI) {
 
       const files: FileRecord[] = [
         { filePath: "./index.html", fileType: "text" },
-        { filePath: "webpack.config.js", fileType: "text" },
+        {
+          filePath: answers.langType === "Typescript" ? "webpack.config.ts" : "webpack.config.js",
+          fileType: "text",
+        },
         { filePath: "package.json", fileType: "text" },
         { filePath: "README.md", fileType: "text" },
         { filePath: "./src/assets/webpack.png", fileType: "binary" },
@@ -206,7 +209,9 @@ export default async function reactInitGenerator(plop: NodePlopAPI) {
           templateFile: join(
             plop.getPlopfilePath(),
             "../templates/init/react",
-            `${file.filePath}.tpl`,
+            file.filePath.startsWith("webpack.config")
+              ? "webpack.config.tpl"
+              : `${file.filePath}.tpl`,
           ),
           fileType: file.fileType,
           data: answers,

diff --git a/packages/create-webpack-app/src/generators/init/svelte.ts b/packages/create-webpack-app/src/generators/init/svelte.ts
@@ -143,7 +143,10 @@ export default async function svelteInitGenerator(plop: NodePlopAPI) {
       const files: FileRecord[] = [
         { filePath: "./index.html", fileType: "text" },
         { filePath: "./src/assets/webpack.png", fileType: "binary" },
-        { filePath: "webpack.config.js", fileType: "text" },
+        {
+          filePath: answers.langType === "Typescript" ? "webpack.config.ts" : "webpack.config.js",
+          fileType: "text",
+        },
         { filePath: "package.json", fileType: "text" },
         { filePath: "README.md", fileType: "text" },
         { filePath: "./src/components/HelloWorld.svelte", fileType: "text" },
@@ -193,7 +196,9 @@ export default async function svelteInitGenerator(plop: NodePlopAPI) {
           templateFile: join(
             plop.getPlopfilePath(),
             "../templates/init/svelte",
-            `${file.filePath}.tpl`,
+            file.filePath.startsWith("webpack.config")
+              ? "webpack.config.tpl"
+              : `${file.filePath}.tpl`,
           ),
           fileType: file.fileType,
           data: answers,

diff --git a/packages/create-webpack-app/src/generators/init/vue.ts b/packages/create-webpack-app/src/generators/init/vue.ts
@@ -155,7 +155,10 @@ export default async function vueInitGenerator(plop: NodePlopAPI) {
       const files: FileRecord[] = [
         { filePath: "./index.html", fileType: "text" },
         { filePath: "./src/assets/webpack.png", fileType: "binary" },
-        { filePath: "webpack.config.js", fileType: "text" },
+        {
+          filePath: answers.langType === "Typescript" ? "webpack.config.ts" : "webpack.config.js",
+          fileType: "text",
+        },
         { filePath: "package.json", fileType: "text" },
         { filePath: "README.md", fileType: "text" },
         { filePath: "./src/App.vue", fileType: "text" },
@@ -215,7 +218,9 @@ export default async function vueInitGenerator(plop: NodePlopAPI) {
           templateFile: join(
             plop.getPlopfilePath(),
             "../templates/init/vue",
-            `${file.filePath}.tpl`,
+            file.filePath.startsWith("webpack.config")
+              ? "webpack.config.tpl"
+              : `${file.filePath}.tpl`,
           ),
           fileType: file.fileType,
           data: answers,

diff --git a/packages/create-webpack-app/templates/init/default/webpack.config.tpl b/packages/create-webpack-app/templates/init/default/webpack.config.tpl
@@ -10,13 +10,9 @@ import WorkboxWebpackPlugin from "workbox-webpack-plugin";<% } %>
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
-const isProduction = process.env.NODE_ENV === "production";
-<% if (cssType !== "none") { %>
-<% if (extractPlugin === "Yes") { %>
-const stylesHandler = MiniCssExtractPlugin.loader;
-<% } else if (extractPlugin === "Only for Production") { %>
-const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : "style-loader";
-<% } else { %>
+const isProduction = process.env.NODE_ENV === "production";<% if (cssType !== "none") { %><% if (extractPlugin === "Yes") { %>
+const stylesHandler = MiniCssExtractPlugin.loader;<% } else if (extractPlugin === "Only for Production") { %>
+const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : "style-loader";<% } else { %>
 const stylesHandler = "style-loader";<% } %><% } %>
 
 /** @type {import("webpack").Configuration} */
@@ -31,10 +27,8 @@ const config <% if (langType === "Typescript") { %>: Configuration <% } %>= {
     plugins: [<% if (htmlWebpackPlugin) { %>
         new HtmlWebpackPlugin({
             template: "index.html",
-        }),
-<% } %><% if (extractPlugin === "Yes") { %>
-        new MiniCssExtractPlugin(),
-<% } %>
+        }),<% } %><% if (extractPlugin === "Yes") { %>
+        new MiniCssExtractPlugin(),<% } %>
         // Add your plugins here
         // Learn more about plugins from https://webpack.js.org/configuration/plugins/
     ],
@@ -91,8 +85,8 @@ const config <% if (langType === "Typescript") { %>: Configuration <% } %>= {
 export default () => {
     if (isProduction) {
         config.mode = "production";<% if (extractPlugin === "Only for Production") { %>
-        config.plugins!.push(new MiniCssExtractPlugin());<% } %><% if (workboxWebpackPlugin) { %>
-        config.plugins!.push(new WorkboxWebpackPlugin.GenerateSW());<% } %>
+        config.plugins?.push(new MiniCssExtractPlugin());<% } %><% if (workboxWebpackPlugin) { %>
+        config.plugins?.push(new WorkboxWebpackPlugin.GenerateSW());<% } %>
     } else {
         config.mode = "development";
     }

diff --git a/packages/create-webpack-app/templates/init/react/tsconfig.json.tpl b/packages/create-webpack-app/templates/init/react/tsconfig.json.tpl
@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "esnext",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
@@ -10,11 +10,14 @@
     "forceConsistentCasingInFileNames": true,
     "noFallthroughCasesInSwitch": true,
     "module": "esnext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "verbatimModuleSyntax": true,
+    "erasableSyntaxOnly": true,
+    "rewriteRelativeImportExtensions": true,
   },
   "include": ["src/**/*", "index.d.ts"],
   "exclude": ["node_modules", "dist"]
-}
+}
diff --git a/...emplates/init/react/webpack.config.js.tpl → ...p/templates/init/react/webpack.config.tpl b/...emplates/init/react/webpack.config.js.tpl → ...p/templates/init/react/webpack.config.tpl
@@ -1,26 +1,22 @@
 // Generated using webpack-cli https://github.com/webpack/webpack-cli
 
 import path from "node:path";
-import { fileURLToPath } from "node:url";<% if (htmlWebpackPlugin) { %>
+import { fileURLToPath } from "node:url";<% if (langType === "Typescript") { %>
+import { type Configuration } from "webpack";<% if (devServer) { %>
+import "webpack-dev-server";<% } %><% } %><% if (htmlWebpackPlugin) { %>
 import HtmlWebpackPlugin from "html-webpack-plugin";<% } %><% if (extractPlugin !== "No") { %>
 import MiniCssExtractPlugin from "mini-css-extract-plugin";<% } %><% if (workboxWebpackPlugin) { %>
 import WorkboxWebpackPlugin from "workbox-webpack-plugin";<% } %>
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
-const isProduction = process.env.NODE_ENV === "production";
-<% if (cssType !== "none") { %>
-<% if (extractPlugin === "Yes") { %>
-const stylesHandler = MiniCssExtractPlugin.loader;
-<% } else if (extractPlugin === "Only for Production") { %>
-const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : "style-loader";
-<% } else { %>
-const stylesHandler = "style-loader";
-<% } %>
-<% } %>
+const isProduction = process.env.NODE_ENV === "production";<% if (cssType !== "none") { %><% if (extractPlugin === "Yes") { %>
+const stylesHandler = MiniCssExtractPlugin.loader;<% } else if (extractPlugin === "Only for Production") { %>
+const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : "style-loader";<% } else { %>
+const stylesHandler = "style-loader";<% } %><% } %>
 
 /** @type {import("webpack").Configuration} */
-const config = {
+const config <% if (langType === "Typescript") { %>: Configuration <% } %>= {
     entry: "<%= entry %>",
     output: {
         path: path.resolve(__dirname, "dist"),
@@ -31,10 +27,8 @@ const config = {
     plugins: [<% if (htmlWebpackPlugin) { %>
         new HtmlWebpackPlugin({
             template: "index.html",
-        }),
-<% } %><% if (extractPlugin === "Yes") { %>
-        new MiniCssExtractPlugin(),
-<% } %>
+        }),<% } %><% if (extractPlugin === "Yes") { %>
+        new MiniCssExtractPlugin(),<% } %>
         // Add your plugins here
         // Learn more about plugins from https://webpack.js.org/configuration/plugins/
     ],
@@ -94,13 +88,9 @@ const config = {
 
 export default () => {
     if (isProduction) {
-        config.mode = "production";
-        <% if (extractPlugin === "Only for Production") { %>
-        config.plugins.push(new MiniCssExtractPlugin());
-        <% } %>
-        <% if (workboxWebpackPlugin) { %>
-        config.plugins.push(new WorkboxWebpackPlugin.GenerateSW());
-        <% } %>
+        config.mode = "production";<% if (extractPlugin === "Only for Production") { %>
+        config.plugins?.push(new MiniCssExtractPlugin());<% } %><% if (workboxWebpackPlugin) { %>
+        config.plugins?.push(new WorkboxWebpackPlugin.GenerateSW());<% } %>
     } else {
         config.mode = "development";
     }

diff --git a/packages/create-webpack-app/templates/init/svelte/tsconfig.json.tpl b/packages/create-webpack-app/templates/init/svelte/tsconfig.json.tpl
@@ -1,14 +1,19 @@
 {
   "extends": "@tsconfig/svelte/tsconfig.json",
   "compilerOptions": {
-    "target": "es5",
-    "module": "es6",
+    "target": "esnext",
+    "module": "esnext",
     "strict": true,
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
+    "jsx": "preserve",
     "skipLibCheck": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "sourceMap": true,
+    "verbatimModuleSyntax": true,
+    "erasableSyntaxOnly": true,
+    "isolatedModules": true,
+    "rewriteRelativeImportExtensions": true,
   },
   "include": [
     "src/**/*.ts",

diff --git a/...mplates/init/svelte/webpack.config.js.tpl → .../templates/init/svelte/webpack.config.tpl b/...mplates/init/svelte/webpack.config.js.tpl → .../templates/init/svelte/webpack.config.tpl
@@ -1,26 +1,22 @@
 // Generated using webpack-cli https://github.com/webpack/webpack-cli
 
 import path from "node:path";
-import { fileURLToPath } from "node:url";<% if (htmlWebpackPlugin) { %>
+import { fileURLToPath } from "node:url";<% if (langType === "Typescript") { %>
+import { type Configuration } from "webpack";<% if (devServer) { %>
+import "webpack-dev-server";<% } %><% } %><% if (htmlWebpackPlugin) { %>
 import HtmlWebpackPlugin from "html-webpack-plugin";<% } %><% if (extractPlugin !== "No") { %>
 import MiniCssExtractPlugin from "mini-css-extract-plugin";<% } %><% if (workboxWebpackPlugin) { %>
 import WorkboxWebpackPlugin from "workbox-webpack-plugin";<% } %>
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
-const isProduction = process.env.NODE_ENV === "production";
-<% if (cssType !== "none") { %>
-<% if (extractPlugin === "Yes") { %>
-const stylesHandler = MiniCssExtractPlugin.loader;
-<% } else if (extractPlugin === "Only for Production") { %>
-const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : "style-loader";
-<% } else { %>
-const stylesHandler = "style-loader";
-<% } %>
-<% } %>
+const isProduction = process.env.NODE_ENV === "production";<% if (cssType !== "none") { %><% if (extractPlugin === "Yes") { %>
+const stylesHandler = MiniCssExtractPlugin.loader;<% } else if (extractPlugin === "Only for Production") { %>
+const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : "style-loader";<% } else { %>
+const stylesHandler = "style-loader";<% } %><% } %>
 
 /** @type {import("webpack").Configuration} */
-const config = {
+const config <% if (langType === "Typescript") { %>: Configuration <% } %>= {
     entry: "<%= entry %>",
     output: {
         path: path.resolve(__dirname, "dist"),
@@ -31,10 +27,8 @@ const config = {
     plugins: [<% if (htmlWebpackPlugin) { %>
         new HtmlWebpackPlugin({
             template: "./index.html",
-        }),
-<% } %><% if (extractPlugin === "Yes") { %>
-        new MiniCssExtractPlugin(),
-<% } %>
+        }),<% } %><% if (extractPlugin === "Yes") { %>
+        new MiniCssExtractPlugin(),<% } %>
         // Add your plugins here
         // Learn more about plugins from https://webpack.js.org/configuration/plugins/
     ],
@@ -108,13 +102,9 @@ const config = {
 
 export default () => {
     if (isProduction) {
-        config.mode = "production";
-        <% if (extractPlugin === "Only for Production") { %>
-        config.plugins.push(new MiniCssExtractPlugin());
-        <% } %>
-        <% if (workboxWebpackPlugin) { %>
-        config.plugins.push(new WorkboxWebpackPlugin.GenerateSW());
-        <% } %>
+        config.mode = "production";<% if (extractPlugin === "Only for Production") { %>
+        config.plugins?.push(new MiniCssExtractPlugin());<% } %><% if (workboxWebpackPlugin) { %>
+        config.plugins?.push(new WorkboxWebpackPlugin.GenerateSW());<% } %>
     } else {
         config.mode = "development";
     }

diff --git a/packages/create-webpack-app/templates/init/vue/tsconfig.json.tpl b/packages/create-webpack-app/templates/init/vue/tsconfig.json.tpl
@@ -1,15 +1,19 @@
 {
   "compilerOptions": {
-    "target": "es5",
-    "module": "es6",
+    "target": "esnext",
+    "module": "esnext",
     "strict": true,
     "jsx": "preserve",
-    "moduleResolution": "node",
+    "jsxImportSource": "vue",
+    "moduleResolution": "bundler",
     "skipLibCheck": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "sourceMap": true,
-    "baseUrl": ".",
+    "verbatimModuleSyntax": true,
+    "erasableSyntaxOnly": true,
+    "isolatedModules": true,
+    "rewriteRelativeImportExtensions": true,
     "types": [
       "webpack-env",
       "vue-router"
@@ -22,6 +26,7 @@
     "lib": [
       "esnext",
       "dom",
+      "dom.iterable",
     ]
   },
   "include": [

diff --git a/.../templates/init/vue/webpack.config.js.tpl → ...app/templates/init/vue/webpack.config.tpl b/.../templates/init/vue/webpack.config.js.tpl → ...app/templates/init/vue/webpack.config.tpl
@@ -2,26 +2,22 @@
 
 import { VueLoaderPlugin } from "vue-loader";
 import path from "node:path";
-import { fileURLToPath } from "node:url";<% if (htmlWebpackPlugin) { %>
+import { fileURLToPath } from "node:url";<% if (langType === "Typescript") { %>
+import { type Configuration } from "webpack";<% if (devServer) { %>
+import "webpack-dev-server";<% } %><% } %><% if (htmlWebpackPlugin) { %>
 import HtmlWebpackPlugin from "html-webpack-plugin";<% } %><% if (extractPlugin !== "No") { %>
 import MiniCssExtractPlugin from "mini-css-extract-plugin";<% } %><% if (workboxWebpackPlugin) { %>
 import WorkboxWebpackPlugin from "workbox-webpack-plugin";<% } %>
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
-const isProduction = process.env.NODE_ENV === "production";
-<% if (cssType !== "none") { %>
-<% if (extractPlugin === "Yes") { %>
-const stylesHandler = MiniCssExtractPlugin.loader;
-<% } else if (extractPlugin === "Only for Production") { %>
-const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : "vue-style-loader";
-<% } else { %>
-const stylesHandler = "vue-style-loader";
-<% } %>
-<% } %>
+const isProduction = process.env.NODE_ENV === "production";<% if (cssType !== "none") { %><% if (extractPlugin === "Yes") { %>
+const stylesHandler = MiniCssExtractPlugin.loader;<% } else if (extractPlugin === "Only for Production") { %>
+const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : "vue-style-loader";<% } else { %>
+const stylesHandler = "vue-style-loader";<% } %><% } %>
 
 /** @type {import("webpack").Configuration} */
-const config = {
+const config <% if (langType === "Typescript") { %>: Configuration <% } %>= {
     entry: "<%= entry %>",
     output: {
         path: path.resolve(__dirname, "dist"),
@@ -33,10 +29,8 @@ const config = {
         new VueLoaderPlugin(),<% if (htmlWebpackPlugin) { %>
         new HtmlWebpackPlugin({
             template: "index.html",
-        }),
-<% } %><% if (extractPlugin === "Yes") { %>
-        new MiniCssExtractPlugin(),
-<% } %>
+        }),<% } %><% if (extractPlugin === "Yes") { %>
+        new MiniCssExtractPlugin(),<% } %>
         // Add your plugins here
         // Learn more about plugins from https://webpack.js.org/configuration/plugins/
     ],
@@ -103,13 +97,9 @@ const config = {
 
 export default () => {
     if (isProduction) {
-        config.mode = "production";
-        <% if (extractPlugin === "Only for Production") { %>
-        config.plugins.push(new MiniCssExtractPlugin());
-        <% } %>
-        <% if (workboxWebpackPlugin) { %>
-        config.plugins.push(new WorkboxWebpackPlugin.GenerateSW());
-        <% } %>
+        config.mode = "production";<% if (extractPlugin === "Only for Production") { %>
+        config.plugins?.push(new MiniCssExtractPlugin());<% } %><% if (workboxWebpackPlugin) { %>
+        config.plugins?.push(new WorkboxWebpackPlugin.GenerateSW());<% } %>
     } else {
         config.mode = "development";
     }