From 1a0f0b48caebb5bec8a3bce15535069db25b047d Mon Sep 17 00:00:00 2001 From: ThierryRakotomanana Date: Mon, 30 Mar 2026 19:13:33 +0300 Subject: [PATCH 1/2] fix(generator): generate a ts confi file -Add ts-node to load the configuration file --- packages/create-webpack-app/src/generators/init/default.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/create-webpack-app/src/generators/init/default.ts b/packages/create-webpack-app/src/generators/init/default.ts index 15d019bbff3..914a472bacd 100644 --- a/packages/create-webpack-app/src/generators/init/default.ts +++ b/packages/create-webpack-app/src/generators/init/default.ts @@ -105,7 +105,7 @@ export default async function defaultInitGenerator(plop: NodePlopAPI) { devDependencies.push("babel-loader", "@babel/core", "@babel/preset-env"); break; case "Typescript": - devDependencies.push("typescript", "ts-loader"); + devDependencies.push("typescript", "ts-loader", "ts-node"); break; } @@ -149,7 +149,10 @@ export default async function defaultInitGenerator(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" }, ]; From c13517d28c68c92a993f693d4c3885637f525aed Mon Sep 17 00:00:00 2001 From: ThierryRakotomanana Date: Tue, 31 Mar 2026 14:51:55 +0300 Subject: [PATCH 2/2] 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 --- .../src/generators/init/default.ts | 4 +- .../templates/init/default/package.json.tpl | 10 +- .../templates/init/default/tsconfig.json.tpl | 14 +- ...bpack.config.js.tpl => webpack.config.tpl} | 20 +- .../__snapshots__/init.test.js.snap.webpack5 | 205 +++++++++--------- test/create-webpack-app/init/init.test.js | 14 +- 6 files changed, 138 insertions(+), 129 deletions(-) rename packages/create-webpack-app/templates/init/default/{webpack.config.js.tpl => webpack.config.tpl} (83%) diff --git a/packages/create-webpack-app/src/generators/init/default.ts b/packages/create-webpack-app/src/generators/init/default.ts index 914a472bacd..5b11838be7d 100644 --- a/packages/create-webpack-app/src/generators/init/default.ts +++ b/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, 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..3e96af85ad4 100644 --- a/packages/create-webpack-app/templates/init/default/package.json.tpl +++ b/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' : '' %>" } } diff --git a/packages/create-webpack-app/templates/init/default/tsconfig.json.tpl b/packages/create-webpack-app/templates/init/default/tsconfig.json.tpl index 31176e658c2..a024736bfe4 100644 --- a/packages/create-webpack-app/templates/init/default/tsconfig.json.tpl +++ b/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"] } diff --git a/packages/create-webpack-app/templates/init/default/webpack.config.js.tpl b/packages/create-webpack-app/templates/init/default/webpack.config.tpl similarity index 83% rename from packages/create-webpack-app/templates/init/default/webpack.config.js.tpl rename to packages/create-webpack-app/templates/init/default/webpack.config.tpl index e9620d86333..8a36a6783f3 100644 --- a/packages/create-webpack-app/templates/init/default/webpack.config.js.tpl +++ b/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"; } 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 e931c415a9a..4a6b3c02774 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 @@ -13,10 +13,10 @@ exports[`create-webpack-app cli recognizes '-t' as an alias for '--template' and }, "name": "webpack-project", "scripts": { - "build": "webpack --mode=production --config-node-env=production", - "build:dev": "webpack --mode=development", - "serve": "webpack serve", - "watch": "webpack --watch", + "build": "webpack --mode=production --config-node-env=production ", + "build:dev": "webpack --mode=development ", + "serve": "webpack serve ", + "watch": "webpack --watch ", }, "type": "module", "version": "1.0.0", @@ -36,10 +36,10 @@ exports[`create-webpack-app cli should ask question when wrong template is suppl }, "name": "webpack-project", "scripts": { - "build": "webpack --mode=production --config-node-env=production", - "build:dev": "webpack --mode=development", - "serve": "webpack serve", - "watch": "webpack --watch", + "build": "webpack --mode=production --config-node-env=production ", + "build:dev": "webpack --mode=development ", + "serve": "webpack serve ", + "watch": "webpack --watch ", }, "type": "module", "version": "1.0.0", @@ -56,10 +56,10 @@ exports[`create-webpack-app cli should configure WDS as opted 1`] = ` }, "name": "webpack-project", "scripts": { - "build": "webpack --mode=production --config-node-env=production", - "build:dev": "webpack --mode=development", - "serve": "webpack serve", - "watch": "webpack --watch", + "build": "webpack --mode=production --config-node-env=production ", + "build:dev": "webpack --mode=development ", + "serve": "webpack serve ", + "watch": "webpack --watch ", }, "type": "module", "version": "1.0.0", @@ -72,13 +72,15 @@ exports[`create-webpack-app cli should configure WDS as opted 2`] = ` import path from "node:path"; import { fileURLToPath } from "node:url"; + + const __filename = fileURLToPath(import.meta.url); const __dirname = path.dirname(__filename); const isProduction = process.env.NODE_ENV === "production"; /** @type {import("webpack").Configuration} */ -const config = { +const config = { entry: "./src/index.js", output: { path: path.resolve(__dirname, "dist"), @@ -128,9 +130,9 @@ exports[`create-webpack-app cli should configure html-webpack-plugin as opted 1` }, "name": "webpack-project", "scripts": { - "build": "webpack --mode=production --config-node-env=production", - "build:dev": "webpack --mode=development", - "watch": "webpack --watch", + "build": "webpack --mode=production --config-node-env=production ", + "build:dev": "webpack --mode=development ", + "watch": "webpack --watch ", }, "type": "module", "version": "1.0.0", @@ -142,6 +144,7 @@ exports[`create-webpack-app cli should configure html-webpack-plugin as opted 2` import path from "node:path"; import { fileURLToPath } from "node:url"; + import HtmlWebpackPlugin from "html-webpack-plugin"; const __filename = fileURLToPath(import.meta.url); @@ -150,7 +153,7 @@ const isProduction = process.env.NODE_ENV === "production"; /** @type {import("webpack").Configuration} */ -const config = { +const config = { entry: "./src/index.js", output: { path: path.resolve(__dirname, "dist"), @@ -206,9 +209,9 @@ exports[`create-webpack-app cli should configure workbox-webpack-plugin as opted }, "name": "webpack-project", "scripts": { - "build": "webpack --mode=production --config-node-env=production", - "build:dev": "webpack --mode=development", - "watch": "webpack --watch", + "build": "webpack --mode=production --config-node-env=production ", + "build:dev": "webpack --mode=development ", + "watch": "webpack --watch ", }, "type": "module", "version": "1.0.0", @@ -220,6 +223,7 @@ exports[`create-webpack-app cli should configure workbox-webpack-plugin as opted import path from "node:path"; import { fileURLToPath } from "node:url"; + import HtmlWebpackPlugin from "html-webpack-plugin"; import WorkboxWebpackPlugin from "workbox-webpack-plugin"; @@ -229,7 +233,7 @@ const isProduction = process.env.NODE_ENV === "production"; /** @type {import("webpack").Configuration} */ -const config = { +const config = { entry: "./src/index.js", output: { path: path.resolve(__dirname, "dist"), @@ -264,9 +268,7 @@ export default () => { if (isProduction) { config.mode = "production"; - - config.plugins.push(new WorkboxWebpackPlugin.GenerateSW()); - + config.plugins!.push(new WorkboxWebpackPlugin.GenerateSW()); } else { config.mode = "development"; } @@ -287,9 +289,9 @@ exports[`create-webpack-app cli should generate ES6 project correctly 1`] = ` }, "name": "webpack-project", "scripts": { - "build": "webpack --mode=production --config-node-env=production", - "build:dev": "webpack --mode=development", - "watch": "webpack --watch", + "build": "webpack --mode=production --config-node-env=production ", + "build:dev": "webpack --mode=development ", + "watch": "webpack --watch ", }, "type": "module", "version": "1.0.0", @@ -302,13 +304,15 @@ exports[`create-webpack-app cli should generate ES6 project correctly 2`] = ` import path from "node:path"; import { fileURLToPath } from "node:url"; + + const __filename = fileURLToPath(import.meta.url); const __dirname = path.dirname(__filename); const isProduction = process.env.NODE_ENV === "production"; /** @type {import("webpack").Configuration} */ -const config = { +const config = { entry: "./src/index.js", output: { path: path.resolve(__dirname, "dist"), @@ -361,10 +365,10 @@ exports[`create-webpack-app cli should generate default project when nothing is }, "name": "webpack-project", "scripts": { - "build": "webpack --mode=production --config-node-env=production", - "build:dev": "webpack --mode=development", - "serve": "webpack serve", - "watch": "webpack --watch", + "build": "webpack --mode=production --config-node-env=production ", + "build:dev": "webpack --mode=development ", + "serve": "webpack serve ", + "watch": "webpack --watch ", }, "type": "module", "version": "1.0.0", @@ -376,6 +380,7 @@ exports[`create-webpack-app cli should generate default project when nothing is import path from "node:path"; import { fileURLToPath } from "node:url"; + import HtmlWebpackPlugin from "html-webpack-plugin"; import WorkboxWebpackPlugin from "workbox-webpack-plugin"; @@ -385,7 +390,7 @@ const isProduction = process.env.NODE_ENV === "production"; /** @type {import("webpack").Configuration} */ -const config = { +const config = { entry: "./src/index.js", output: { path: path.resolve(__dirname, "dist"), @@ -423,9 +428,7 @@ export default () => { if (isProduction) { config.mode = "production"; - - config.plugins.push(new WorkboxWebpackPlugin.GenerateSW()); - + config.plugins!.push(new WorkboxWebpackPlugin.GenerateSW()); } else { config.mode = "development"; } @@ -447,10 +450,10 @@ exports[`create-webpack-app cli should generate default project when nothing is }, "name": "webpack-project", "scripts": { - "build": "webpack --mode=production --config-node-env=production", - "build:dev": "webpack --mode=development", - "serve": "webpack serve", - "watch": "webpack --watch", + "build": "webpack --mode=production --config-node-env=production ", + "build:dev": "webpack --mode=development ", + "serve": "webpack serve ", + "watch": "webpack --watch ", }, "type": "module", "version": "1.0.0", @@ -462,6 +465,7 @@ exports[`create-webpack-app cli should generate default project when nothing is import path from "node:path"; import { fileURLToPath } from "node:url"; + import HtmlWebpackPlugin from "html-webpack-plugin"; import WorkboxWebpackPlugin from "workbox-webpack-plugin"; @@ -471,7 +475,7 @@ const isProduction = process.env.NODE_ENV === "production"; /** @type {import("webpack").Configuration} */ -const config = { +const config = { entry: "./src/index.js", output: { path: path.resolve(__dirname, "dist"), @@ -509,9 +513,7 @@ export default () => { if (isProduction) { config.mode = "production"; - - config.plugins.push(new WorkboxWebpackPlugin.GenerateSW()); - + config.plugins!.push(new WorkboxWebpackPlugin.GenerateSW()); } else { config.mode = "development"; } @@ -532,9 +534,9 @@ exports[`create-webpack-app cli should generate default project when nothing is }, "name": "webpack-project", "scripts": { - "build": "webpack --mode=production --config-node-env=production", - "build:dev": "webpack --mode=development", - "watch": "webpack --watch", + "build": "webpack --mode=production --config-node-env=production ", + "build:dev": "webpack --mode=development ", + "watch": "webpack --watch ", }, "type": "module", "version": "1.0.0", @@ -546,6 +548,7 @@ exports[`create-webpack-app cli should generate default project when nothing is import path from "node:path"; import { fileURLToPath } from "node:url"; + import HtmlWebpackPlugin from "html-webpack-plugin"; import WorkboxWebpackPlugin from "workbox-webpack-plugin"; @@ -555,7 +558,7 @@ const isProduction = process.env.NODE_ENV === "production"; /** @type {import("webpack").Configuration} */ -const config = { +const config = { entry: "./src/index.js", output: { path: path.resolve(__dirname, "dist"), @@ -593,9 +596,7 @@ export default () => { if (isProduction) { config.mode = "production"; - - config.plugins.push(new WorkboxWebpackPlugin.GenerateSW()); - + config.plugins!.push(new WorkboxWebpackPlugin.GenerateSW()); } else { config.mode = "development"; } @@ -617,10 +618,10 @@ exports[`create-webpack-app cli should generate default project when nothing is }, "name": "webpack-project", "scripts": { - "build": "webpack --mode=production --config-node-env=production", - "build:dev": "webpack --mode=development", - "serve": "webpack serve", - "watch": "webpack --watch", + "build": "webpack --mode=production --config-node-env=production ", + "build:dev": "webpack --mode=development ", + "serve": "webpack serve ", + "watch": "webpack --watch ", }, "type": "module", "version": "1.0.0", @@ -632,6 +633,7 @@ exports[`create-webpack-app cli should generate default project when nothing is import path from "node:path"; import { fileURLToPath } from "node:url"; + import HtmlWebpackPlugin from "html-webpack-plugin"; import WorkboxWebpackPlugin from "workbox-webpack-plugin"; @@ -641,7 +643,7 @@ const isProduction = process.env.NODE_ENV === "production"; /** @type {import("webpack").Configuration} */ -const config = { +const config = { entry: "./src/index.js", output: { path: path.resolve(__dirname, "dist"), @@ -679,9 +681,7 @@ export default () => { if (isProduction) { config.mode = "production"; - - config.plugins.push(new WorkboxWebpackPlugin.GenerateSW()); - + config.plugins!.push(new WorkboxWebpackPlugin.GenerateSW()); } else { config.mode = "development"; } @@ -703,10 +703,10 @@ exports[`create-webpack-app cli should generate default project when nothing is }, "name": "webpack-project", "scripts": { - "build": "webpack --mode=production --config-node-env=production", - "build:dev": "webpack --mode=development", - "serve": "webpack serve", - "watch": "webpack --watch", + "build": "webpack --mode=production --config-node-env=production ", + "build:dev": "webpack --mode=development ", + "serve": "webpack serve ", + "watch": "webpack --watch ", }, "type": "module", "version": "1.0.0", @@ -718,6 +718,7 @@ exports[`create-webpack-app cli should generate default project when nothing is import path from "node:path"; import { fileURLToPath } from "node:url"; + import HtmlWebpackPlugin from "html-webpack-plugin"; import WorkboxWebpackPlugin from "workbox-webpack-plugin"; @@ -727,7 +728,7 @@ const isProduction = process.env.NODE_ENV === "production"; /** @type {import("webpack").Configuration} */ -const config = { +const config = { entry: "./src/index.js", output: { path: path.resolve(__dirname, "dist"), @@ -765,9 +766,7 @@ export default () => { if (isProduction) { config.mode = "production"; - - config.plugins.push(new WorkboxWebpackPlugin.GenerateSW()); - + config.plugins!.push(new WorkboxWebpackPlugin.GenerateSW()); } else { config.mode = "development"; } @@ -789,10 +788,10 @@ exports[`create-webpack-app cli should generate folders if non existing generati }, "name": "webpack-project", "scripts": { - "build": "webpack --mode=production --config-node-env=production", - "build:dev": "webpack --mode=development", - "serve": "webpack serve", - "watch": "webpack --watch", + "build": "webpack --mode=production --config-node-env=production ", + "build:dev": "webpack --mode=development ", + "serve": "webpack serve ", + "watch": "webpack --watch ", }, "type": "module", "version": "1.0.0", @@ -812,10 +811,10 @@ exports[`create-webpack-app cli should generate project when generationPath is s }, "name": "webpack-project", "scripts": { - "build": "webpack --mode=production --config-node-env=production", - "build:dev": "webpack --mode=development", - "serve": "webpack serve", - "watch": "webpack --watch", + "build": "webpack --mode=production --config-node-env=production ", + "build:dev": "webpack --mode=development ", + "serve": "webpack serve ", + "watch": "webpack --watch ", }, "type": "module", "version": "1.0.0", @@ -1077,15 +1076,16 @@ exports[`create-webpack-app cli should generate typescript project correctly 1`] "description": "My webpack project", "devDependencies": { "ts-loader": "x.x.x", + "ts-node": "x.x.x", "typescript": "x.x.x", "webpack": "x.x.x", "webpack-cli": "x.x.x", }, "name": "webpack-project", "scripts": { - "build": "webpack --mode=production --config-node-env=production", - "build:dev": "webpack --mode=development", - "watch": "webpack --watch", + "build": "NODE_OPTIONS='--loader ts-node/esm --no-warnings' webpack --mode=production --config-node-env=production -c ./webpack.config.ts", + "build:dev": "NODE_OPTIONS='--loader ts-node/esm --no-warnings' webpack --mode=development -c ./webpack.config.ts", + "watch": "NODE_OPTIONS='--loader ts-node/esm --no-warnings' webpack --watch -c ./webpack.config.ts", }, "type": "module", "version": "1.0.0", @@ -1097,6 +1097,9 @@ exports[`create-webpack-app cli should generate typescript project correctly 2`] import path from "node:path"; import { fileURLToPath } from "node:url"; +import { Configuration } from "webpack"; + + const __filename = fileURLToPath(import.meta.url); const __dirname = path.dirname(__filename); @@ -1104,7 +1107,7 @@ const isProduction = process.env.NODE_ENV === "production"; /** @type {import("webpack").Configuration} */ -const config = { +const config : Configuration = { entry: "./src/index.ts", output: { path: path.resolve(__dirname, "dist"), @@ -1291,9 +1294,9 @@ exports[`create-webpack-app cli should use css preprocessor and css with postcss }, "name": "webpack-project", "scripts": { - "build": "webpack --mode=production --config-node-env=production", - "build:dev": "webpack --mode=development", - "watch": "webpack --watch", + "build": "webpack --mode=production --config-node-env=production ", + "build:dev": "webpack --mode=development ", + "watch": "webpack --watch ", }, "type": "module", "version": "1.0.0", @@ -1305,6 +1308,8 @@ exports[`create-webpack-app cli should use css preprocessor and css with postcss import path from "node:path"; import { fileURLToPath } from "node:url"; + + import MiniCssExtractPlugin from "mini-css-extract-plugin"; const __filename = fileURLToPath(import.meta.url); @@ -1315,9 +1320,8 @@ const isProduction = process.env.NODE_ENV === "production"; const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : "style-loader"; - /** @type {import("webpack").Configuration} */ -const config = { +const config = { entry: "./src/index.js", output: { path: path.resolve(__dirname, "dist"), @@ -1351,9 +1355,7 @@ const config = { export default () => { if (isProduction) { config.mode = "production"; - - config.plugins.push(new MiniCssExtractPlugin()); - + config.plugins!.push(new MiniCssExtractPlugin()); } else { config.mode = "development"; @@ -1380,9 +1382,9 @@ exports[`create-webpack-app cli should use to use css preprocessor with postcss }, "name": "webpack-project", "scripts": { - "build": "webpack --mode=production --config-node-env=production", - "build:dev": "webpack --mode=development", - "watch": "webpack --watch", + "build": "webpack --mode=production --config-node-env=production ", + "build:dev": "webpack --mode=development ", + "watch": "webpack --watch ", }, "type": "module", "version": "1.0.0", @@ -1394,6 +1396,8 @@ exports[`create-webpack-app cli should use to use css preprocessor with postcss import path from "node:path"; import { fileURLToPath } from "node:url"; + + import MiniCssExtractPlugin from "mini-css-extract-plugin"; const __filename = fileURLToPath(import.meta.url); @@ -1404,9 +1408,8 @@ const isProduction = process.env.NODE_ENV === "production"; const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : "style-loader"; - /** @type {import("webpack").Configuration} */ -const config = { +const config = { entry: "./src/index.js", output: { path: path.resolve(__dirname, "dist"), @@ -1436,9 +1439,7 @@ const config = { export default () => { if (isProduction) { config.mode = "production"; - - config.plugins.push(new MiniCssExtractPlugin()); - + config.plugins!.push(new MiniCssExtractPlugin()); } else { config.mode = "development"; @@ -1461,10 +1462,10 @@ exports[`create-webpack-app cli should work with 'new' alias 1`] = ` }, "name": "webpack-project", "scripts": { - "build": "webpack --mode=production --config-node-env=production", - "build:dev": "webpack --mode=development", - "serve": "webpack serve", - "watch": "webpack --watch", + "build": "webpack --mode=production --config-node-env=production ", + "build:dev": "webpack --mode=development ", + "serve": "webpack serve ", + "watch": "webpack --watch ", }, "type": "module", "version": "1.0.0", @@ -1480,9 +1481,9 @@ exports[`create-webpack-app cli uses yarn as the package manager when opted 1`] }, "name": "webpack-project", "scripts": { - "build": "webpack --mode=production --config-node-env=production", - "build:dev": "webpack --mode=development", - "watch": "webpack --watch", + "build": "webpack --mode=production --config-node-env=production ", + "build:dev": "webpack --mode=development ", + "watch": "webpack --watch ", }, "type": "module", "version": "1.0.0", diff --git a/test/create-webpack-app/init/init.test.js b/test/create-webpack-app/init/init.test.js index 77711bcbfa1..c8b946ca5dd 100644 --- a/test/create-webpack-app/init/init.test.js +++ b/test/create-webpack-app/init/init.test.js @@ -58,8 +58,9 @@ const readFromPkgJSON = (path) => { return { ...pkgJSON, devDependencies: devDeps }; }; -// Helper to read from webpack.config.js in a given path -const readFromWebpackConfig = (path) => readFileSync(join(path, "webpack.config.js"), "utf8"); +// Helper to read from webpack.config.js or webpack.config.ts in a given path +const readFromWebpackConfig = (path, filename = "webpack.config.js") => + readFileSync(join(path, filename), "utf8"); describe("create-webpack-app cli", () => { let dir; @@ -277,14 +278,17 @@ describe("create-webpack-app cli", () => { ); expect(stdout).toContain("Project has been initialised with webpack!"); - expect(stdout).toContain("webpack.config.js"); + expect(stdout).toContain("webpack.config.ts"); expect(stdout).toContain("tsconfig.json"); // Test files const files = [ - ...defaultTemplateFiles.filter((file) => file !== "src/index.js"), + ...defaultTemplateFiles.filter( + (file) => file !== "src/index.js" && file !== "webpack.config.js", + ), "src/index.ts", "tsconfig.json", + "webpack.config.ts", ]; for (const file of files) { @@ -295,7 +299,7 @@ describe("create-webpack-app cli", () => { expect(readFromPkgJSON(dir)).toMatchSnapshot(); // Check if the generated webpack configuration matches the snapshot - expect(readFromWebpackConfig(dir)).toMatchSnapshot(); + expect(readFromWebpackConfig(dir, "webpack.config.ts")).toMatchSnapshot(); }); it("should generate ES6 project correctly", async () => {