fix(init): generate webpack.config.ts when TypeScript is selected

- Replace `webpack.config.js.tpl` with a unified `webpack.config.tpl` based on `langType`
- Add conditional `import "webpack-dev-server"` when devServer is selected
- Add `ts-node` to devDependencies when TypeScript is selected
- Update tests to assert `webpack.config.ts` is generated for TypeScript projects

Author: ThierryRakotomanana

packages/create-webpack-app/src/generators/init/default.ts

@@ -189,7 +189,9 @@ export default async function defaultInitGenerator(plop: NodePlopAPI) {
           templateFile: join(
             plop.getPlopfilePath(),
             "../templates/init/default",
-            `${file.filePath}.tpl`,
+            file.filePath.startsWith("webpack.config")
+              ? "webpack.config.tpl"
+              : `${file.filePath}.tpl`,
           ),
           fileType: file.fileType,
           data: answers,

packages/create-webpack-app/templates/init/default/package.json.tpl

@@ -1,14 +1,14 @@
-{
+<% const nodeOptions = langType === "Typescript" ? "NODE_OPTIONS='--loader ts-node/esm --no-warnings' " : ""; %>{
   "version": "1.0.0",
   "description": "My webpack project",
   "name": "webpack-project",
   "type": "module",
   "scripts": {
-    "build": "webpack --mode=production --config-node-env=production",
-    "build:dev": "webpack --mode=development",
+    "build": "<%- nodeOptions %>webpack --mode=production --config-node-env=production <%- langType === 'Typescript' ? ' -c ./webpack.config.ts' : '' %>",
+    "build:dev": "<%- nodeOptions %>webpack --mode=development <%- langType === 'Typescript' ? ' -c ./webpack.config.ts' : '' %>",
     <% if (devServer) { %>
-      "serve": "webpack serve",
+      "serve": "<%- nodeOptions %>webpack serve <%- langType === 'Typescript' ? ' -c ./webpack.config.ts' : '' %>",
     <% } %>
-    "watch": "webpack --watch"
+    "watch": "<%- nodeOptions %>webpack --watch <%- langType === 'Typescript' ? ' -c ./webpack.config.ts' : '' %>"
   }
 }

packages/create-webpack-app/templates/init/default/tsconfig.json.tpl

@@ -2,9 +2,15 @@
   "compilerOptions": {
     "allowSyntheticDefaultImports": true,
     "noImplicitAny": true,
-    "module": "es6",
-    "target": "es5",
-    "allowJs": true
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "target": "esnext",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "rewriteRelativeImportExtensions": true
   },
-  "files": ["src/index.ts"]
+  "include": ["src/**/*"],
+  "exclude": ["node_modules"]
 }

…lates/init/default/webpack.config.js.tpl …emplates/init/default/webpack.config.tplpackages/create-webpack-app/templates/init/default/webpack.config.js.tpl renamed to packages/create-webpack-app/templates/init/default/webpack.config.tpl packages/create-webpack-app/templates/init/default/webpack.config.js.tpl renamed to packages/create-webpack-app/templates/init/default/webpack.config.tpl

@@ -1,8 +1,10 @@
 // Generated using webpack-cli https://github.com/webpack/webpack-cli
 
 import path from "node:path";
-import { fileURLToPath } from "node:url";<% if (htmlWebpackPlugin) { %>
-import HtmlWebpackPlugin from "html-webpack-plugin";<% } %><% if (extractPlugin !== "No") { %>
+import { fileURLToPath } from "node:url";
+<% if (langType === "Typescript") { %>import { 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";<% } %>
 
@@ -15,12 +17,10 @@ const stylesHandler = MiniCssExtractPlugin.loader;
 <% } else if (extractPlugin === "Only for Production") { %>
 const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : "style-loader";
 <% } else { %>
-const stylesHandler = "style-loader";
-<% } %>
-<% } %>
+const stylesHandler = "style-loader";<% } %><% } %>
 
 /** @type {import("webpack").Configuration} */
-const config = {
+const config <% if (langType === "Typescript") { %>: Configuration<% } %> = {
     entry: "<%= entryPoint %>",
     output: {
         path: path.resolve(__dirname, "dist"),
@@ -91,12 +91,8 @@ 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());
-        <% } %>
+        <% if (extractPlugin === "Only for Production") { %>config.plugins!.push(new MiniCssExtractPlugin());<% } %>
+        <% if (workboxWebpackPlugin) { %>config.plugins!.push(new WorkboxWebpackPlugin.GenerateSW());<% } %>
     } else {
         config.mode = "development";
     }