Skip to content

Commit b4f32cc

Browse files
ThierryRakotomananaThierryRakotomanana
authored
fix(init): generate webpack.config.ts instead of webpack.config.js when TypeScript is selected (#4723)
1 parent c86a11c commit b4f32cc

6 files changed

Lines changed: 52 additions & 67 deletions

File tree

‎.changeset/rude-ads-raise.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"create-webpack-app": patch
3+
---
4+
5+
Generate `webpack.config.ts` instead of `webpack.config.js` when TypeScript is selected.

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

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,10 @@ export default async function defaultInitGenerator(plop: NodePlopAPI) {
149149

150150
const files: FileRecord[] = [
151151
{ filePath: "./index.html", fileType: "text" },
152-
{ filePath: "webpack.config.js", fileType: "text" },
152+
{
153+
filePath: answers.langType === "Typescript" ? "webpack.config.ts" : "webpack.config.js",
154+
fileType: "text",
155+
},
153156
{ filePath: "package.json", fileType: "text" },
154157
{ filePath: "README.md", fileType: "text" },
155158
];
@@ -186,7 +189,9 @@ export default async function defaultInitGenerator(plop: NodePlopAPI) {
186189
templateFile: join(
187190
plop.getPlopfilePath(),
188191
"../templates/init/default",
189-
`${file.filePath}.tpl`,
192+
file.filePath.startsWith("webpack.config")
193+
? "webpack.config.tpl"
194+
: `${file.filePath}.tpl`,
190195
),
191196
fileType: file.fileType,
192197
data: answers,

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

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,18 @@
11
{
22
"compilerOptions": {
33
"allowSyntheticDefaultImports": true,
4-
"noImplicitAny": true,
5-
"module": "es6",
6-
"target": "es5",
7-
"allowJs": true
4+
"strict": true,
5+
"module": "esnext",
6+
"moduleResolution": "bundler",
7+
"target": "esnext",
8+
"allowJs": true,
9+
"esModuleInterop": true,
10+
"resolveJsonModule": true,
11+
"verbatimModuleSyntax": true,
12+
"erasableSyntaxOnly": true,
13+
"isolatedModules": true,
14+
"rewriteRelativeImportExtensions": true
815
},
9-
"files": ["src/index.ts"]
16+
"include": ["./src/**/*"],
17+
"exclude": ["./node_modules"]
1018
}

packages/create-webpack-app/templates/init/default/webpack.config.js.tpl renamed to packages/create-webpack-app/templates/init/default/webpack.config.tpl

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
// Generated using webpack-cli https://github.com/webpack/webpack-cli
22

33
import path from "node:path";
4-
import { fileURLToPath } from "node:url";<% if (htmlWebpackPlugin) { %>
4+
import { fileURLToPath } from "node:url";<% if (langType === "Typescript") { %>
5+
import { type Configuration } from "webpack";<% if (devServer) { %>
6+
import "webpack-dev-server";<% } %><% } %><% if (htmlWebpackPlugin) { %>
57
import HtmlWebpackPlugin from "html-webpack-plugin";<% } %><% if (extractPlugin !== "No") { %>
68
import MiniCssExtractPlugin from "mini-css-extract-plugin";<% } %><% if (workboxWebpackPlugin) { %>
79
import WorkboxWebpackPlugin from "workbox-webpack-plugin";<% } %>
@@ -15,12 +17,10 @@ const stylesHandler = MiniCssExtractPlugin.loader;
1517
<% } else if (extractPlugin === "Only for Production") { %>
1618
const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : "style-loader";
1719
<% } else { %>
18-
const stylesHandler = "style-loader";
19-
<% } %>
20-
<% } %>
20+
const stylesHandler = "style-loader";<% } %><% } %>
2121

2222
/** @type {import("webpack").Configuration} */
23-
const config = {
23+
const config <% if (langType === "Typescript") { %>: Configuration <% } %>= {
2424
entry: "<%= entryPoint %>",
2525
output: {
2626
path: path.resolve(__dirname, "dist"),
@@ -90,13 +90,9 @@ const config = {
9090

9191
export default () => {
9292
if (isProduction) {
93-
config.mode = "production";
94-
<% if (extractPlugin === "Only for Production") { %>
95-
config.plugins.push(new MiniCssExtractPlugin());
96-
<% } %>
97-
<% if (workboxWebpackPlugin) { %>
98-
config.plugins.push(new WorkboxWebpackPlugin.GenerateSW());
99-
<% } %>
93+
config.mode = "production";<% if (extractPlugin === "Only for Production") { %>
94+
config.plugins!.push(new MiniCssExtractPlugin());<% } %><% if (workboxWebpackPlugin) { %>
95+
config.plugins!.push(new WorkboxWebpackPlugin.GenerateSW());<% } %>
10096
} else {
10197
config.mode = "development";
10298
}

‎test/create-webpack-app/init/__snapshots__/init.test.js.snap.webpack5‎

Lines changed: 10 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -107,8 +107,6 @@ const config = {
107107
export default () => {
108108
if (isProduction) {
109109
config.mode = "production";
110-
111-
112110
} else {
113111
config.mode = "development";
114112
}
@@ -184,8 +182,6 @@ const config = {
184182
export default () => {
185183
if (isProduction) {
186184
config.mode = "production";
187-
188-
189185
} else {
190186
config.mode = "development";
191187
}
@@ -263,10 +259,7 @@ const config = {
263259
export default () => {
264260
if (isProduction) {
265261
config.mode = "production";
266-
267-
268-
config.plugins.push(new WorkboxWebpackPlugin.GenerateSW());
269-
262+
config.plugins!.push(new WorkboxWebpackPlugin.GenerateSW());
270263
} else {
271264
config.mode = "development";
272265
}
@@ -338,8 +331,6 @@ const config = {
338331
export default () => {
339332
if (isProduction) {
340333
config.mode = "production";
341-
342-
343334
} else {
344335
config.mode = "development";
345336
}
@@ -422,10 +413,7 @@ const config = {
422413
export default () => {
423414
if (isProduction) {
424415
config.mode = "production";
425-
426-
427-
config.plugins.push(new WorkboxWebpackPlugin.GenerateSW());
428-
416+
config.plugins!.push(new WorkboxWebpackPlugin.GenerateSW());
429417
} else {
430418
config.mode = "development";
431419
}
@@ -508,10 +496,7 @@ const config = {
508496
export default () => {
509497
if (isProduction) {
510498
config.mode = "production";
511-
512-
513-
config.plugins.push(new WorkboxWebpackPlugin.GenerateSW());
514-
499+
config.plugins!.push(new WorkboxWebpackPlugin.GenerateSW());
515500
} else {
516501
config.mode = "development";
517502
}
@@ -592,10 +577,7 @@ const config = {
592577
export default () => {
593578
if (isProduction) {
594579
config.mode = "production";
595-
596-
597-
config.plugins.push(new WorkboxWebpackPlugin.GenerateSW());
598-
580+
config.plugins!.push(new WorkboxWebpackPlugin.GenerateSW());
599581
} else {
600582
config.mode = "development";
601583
}
@@ -678,10 +660,7 @@ const config = {
678660
export default () => {
679661
if (isProduction) {
680662
config.mode = "production";
681-
682-
683-
config.plugins.push(new WorkboxWebpackPlugin.GenerateSW());
684-
663+
config.plugins!.push(new WorkboxWebpackPlugin.GenerateSW());
685664
} else {
686665
config.mode = "development";
687666
}
@@ -764,10 +743,7 @@ const config = {
764743
export default () => {
765744
if (isProduction) {
766745
config.mode = "production";
767-
768-
769-
config.plugins.push(new WorkboxWebpackPlugin.GenerateSW());
770-
746+
config.plugins!.push(new WorkboxWebpackPlugin.GenerateSW());
771747
} else {
772748
config.mode = "development";
773749
}
@@ -1097,14 +1073,15 @@ exports[`create-webpack-app cli should generate typescript project correctly 2`]
10971073

10981074
import path from "node:path";
10991075
import { fileURLToPath } from "node:url";
1076+
import { type Configuration } from "webpack";
11001077

11011078
const __filename = fileURLToPath(import.meta.url);
11021079
const __dirname = path.dirname(__filename);
11031080
const isProduction = process.env.NODE_ENV === "production";
11041081

11051082

11061083
/** @type {import("webpack").Configuration} */
1107-
const config = {
1084+
const config : Configuration = {
11081085
entry: "./src/index.ts",
11091086
output: {
11101087
path: path.resolve(__dirname, "dist"),
@@ -1138,8 +1115,6 @@ const config = {
11381115
export default () => {
11391116
if (isProduction) {
11401117
config.mode = "production";
1141-
1142-
11431118
} else {
11441119
config.mode = "development";
11451120
}
@@ -1315,7 +1290,6 @@ const isProduction = process.env.NODE_ENV === "production";
13151290
const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : "style-loader";
13161291

13171292

1318-
13191293
/** @type {import("webpack").Configuration} */
13201294
const config = {
13211295
entry: "./src/index.js",
@@ -1351,10 +1325,7 @@ const config = {
13511325
export default () => {
13521326
if (isProduction) {
13531327
config.mode = "production";
1354-
1355-
config.plugins.push(new MiniCssExtractPlugin());
1356-
1357-
1328+
config.plugins!.push(new MiniCssExtractPlugin());
13581329
} else {
13591330
config.mode = "development";
13601331
}
@@ -1404,7 +1375,6 @@ const isProduction = process.env.NODE_ENV === "production";
14041375
const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : "style-loader";
14051376

14061377

1407-
14081378
/** @type {import("webpack").Configuration} */
14091379
const config = {
14101380
entry: "./src/index.js",
@@ -1436,10 +1406,7 @@ const config = {
14361406
export default () => {
14371407
if (isProduction) {
14381408
config.mode = "production";
1439-
1440-
config.plugins.push(new MiniCssExtractPlugin());
1441-
1442-
1409+
config.plugins!.push(new MiniCssExtractPlugin());
14431410
} else {
14441411
config.mode = "development";
14451412
}

‎test/create-webpack-app/init/init.test.js‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -58,8 +58,9 @@ const readFromPkgJSON = (path) => {
5858
return { ...pkgJSON, devDependencies: devDeps };
5959
};
6060

61-
// Helper to read from webpack.config.js in a given path
62-
const readFromWebpackConfig = (path) => readFileSync(join(path, "webpack.config.js"), "utf8");
61+
// Helper to read from webpack.config.js or webpack.config.ts in a given path
62+
const readFromWebpackConfig = (path, filename = "webpack.config.js") =>
63+
readFileSync(join(path, filename), "utf8");
6364

6465
describe("create-webpack-app cli", () => {
6566
let dir;
@@ -277,14 +278,17 @@ describe("create-webpack-app cli", () => {
277278
);
278279

279280
expect(stdout).toContain("Project has been initialised with webpack!");
280-
expect(stdout).toContain("webpack.config.js");
281+
expect(stdout).toContain("webpack.config.ts");
281282
expect(stdout).toContain("tsconfig.json");
282283

283284
// Test files
284285
const files = [
285-
...defaultTemplateFiles.filter((file) => file !== "src/index.js"),
286+
...defaultTemplateFiles.filter(
287+
(file) => file !== "src/index.js" && file !== "webpack.config.js",
288+
),
286289
"src/index.ts",
287290
"tsconfig.json",
291+
"webpack.config.ts",
288292
];
289293

290294
for (const file of files) {
@@ -295,7 +299,7 @@ describe("create-webpack-app cli", () => {
295299
expect(readFromPkgJSON(dir)).toMatchSnapshot();
296300

297301
// Check if the generated webpack configuration matches the snapshot
298-
expect(readFromWebpackConfig(dir)).toMatchSnapshot();
302+
expect(readFromWebpackConfig(dir, "webpack.config.ts")).toMatchSnapshot();
299303
});
300304

301305
it("should generate ES6 project correctly", async () => {

0 commit comments

Comments
 (0)