Skip to content

Commit 45b479b

Browse files
ThierryRakotomananaThierryRakotomanana
authored
fix(init): standardize TypeScript config and webpack.config.ts for all templates(svelte, react and vue) (#4740)
1 parent 99ee0b0 commit 45b479b

File tree

12 files changed

+531
-163
lines changed

12 files changed

+531
-163
lines changed

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

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

152152
const files: FileRecord[] = [
153153
{ filePath: "./index.html", fileType: "text" },
154-
{ filePath: "webpack.config.js", fileType: "text" },
154+
{
155+
filePath: answers.langType === "Typescript" ? "webpack.config.ts" : "webpack.config.js",
156+
fileType: "text",
157+
},
155158
{ filePath: "package.json", fileType: "text" },
156159
{ filePath: "README.md", fileType: "text" },
157160
{ filePath: "./src/assets/webpack.png", fileType: "binary" },
@@ -206,7 +209,9 @@ export default async function reactInitGenerator(plop: NodePlopAPI) {
206209
templateFile: join(
207210
plop.getPlopfilePath(),
208211
"../templates/init/react",
209-
`${file.filePath}.tpl`,
212+
file.filePath.startsWith("webpack.config")
213+
? "webpack.config.tpl"
214+
: `${file.filePath}.tpl`,
210215
),
211216
fileType: file.fileType,
212217
data: answers,

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

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,10 @@ export default async function svelteInitGenerator(plop: NodePlopAPI) {
143143
const files: FileRecord[] = [
144144
{ filePath: "./index.html", fileType: "text" },
145145
{ filePath: "./src/assets/webpack.png", fileType: "binary" },
146-
{ filePath: "webpack.config.js", fileType: "text" },
146+
{
147+
filePath: answers.langType === "Typescript" ? "webpack.config.ts" : "webpack.config.js",
148+
fileType: "text",
149+
},
147150
{ filePath: "package.json", fileType: "text" },
148151
{ filePath: "README.md", fileType: "text" },
149152
{ filePath: "./src/components/HelloWorld.svelte", fileType: "text" },
@@ -193,7 +196,9 @@ export default async function svelteInitGenerator(plop: NodePlopAPI) {
193196
templateFile: join(
194197
plop.getPlopfilePath(),
195198
"../templates/init/svelte",
196-
`${file.filePath}.tpl`,
199+
file.filePath.startsWith("webpack.config")
200+
? "webpack.config.tpl"
201+
: `${file.filePath}.tpl`,
197202
),
198203
fileType: file.fileType,
199204
data: answers,

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

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,10 @@ export default async function vueInitGenerator(plop: NodePlopAPI) {
155155
const files: FileRecord[] = [
156156
{ filePath: "./index.html", fileType: "text" },
157157
{ filePath: "./src/assets/webpack.png", fileType: "binary" },
158-
{ filePath: "webpack.config.js", fileType: "text" },
158+
{
159+
filePath: answers.langType === "Typescript" ? "webpack.config.ts" : "webpack.config.js",
160+
fileType: "text",
161+
},
159162
{ filePath: "package.json", fileType: "text" },
160163
{ filePath: "README.md", fileType: "text" },
161164
{ filePath: "./src/App.vue", fileType: "text" },
@@ -215,7 +218,9 @@ export default async function vueInitGenerator(plop: NodePlopAPI) {
215218
templateFile: join(
216219
plop.getPlopfilePath(),
217220
"../templates/init/vue",
218-
`${file.filePath}.tpl`,
221+
file.filePath.startsWith("webpack.config")
222+
? "webpack.config.tpl"
223+
: `${file.filePath}.tpl`,
219224
),
220225
fileType: file.fileType,
221226
data: answers,

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

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,9 @@ import WorkboxWebpackPlugin from "workbox-webpack-plugin";<% } %>
1010

1111
const __filename = fileURLToPath(import.meta.url);
1212
const __dirname = path.dirname(__filename);
13-
const isProduction = process.env.NODE_ENV === "production";
14-
<% if (cssType !== "none") { %>
15-
<% if (extractPlugin === "Yes") { %>
16-
const stylesHandler = MiniCssExtractPlugin.loader;
17-
<% } else if (extractPlugin === "Only for Production") { %>
18-
const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : "style-loader";
19-
<% } else { %>
13+
const isProduction = process.env.NODE_ENV === "production";<% if (cssType !== "none") { %><% if (extractPlugin === "Yes") { %>
14+
const stylesHandler = MiniCssExtractPlugin.loader;<% } else if (extractPlugin === "Only for Production") { %>
15+
const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : "style-loader";<% } else { %>
2016
const stylesHandler = "style-loader";<% } %><% } %>
2117

2218
/** @type {import("webpack").Configuration} */
@@ -31,10 +27,8 @@ const config <% if (langType === "Typescript") { %>: Configuration <% } %>= {
3127
plugins: [<% if (htmlWebpackPlugin) { %>
3228
new HtmlWebpackPlugin({
3329
template: "index.html",
34-
}),
35-
<% } %><% if (extractPlugin === "Yes") { %>
36-
new MiniCssExtractPlugin(),
37-
<% } %>
30+
}),<% } %><% if (extractPlugin === "Yes") { %>
31+
new MiniCssExtractPlugin(),<% } %>
3832
// Add your plugins here
3933
// Learn more about plugins from https://webpack.js.org/configuration/plugins/
4034
],
@@ -91,8 +85,8 @@ const config <% if (langType === "Typescript") { %>: Configuration <% } %>= {
9185
export default () => {
9286
if (isProduction) {
9387
config.mode = "production";<% if (extractPlugin === "Only for Production") { %>
94-
config.plugins!.push(new MiniCssExtractPlugin());<% } %><% if (workboxWebpackPlugin) { %>
95-
config.plugins!.push(new WorkboxWebpackPlugin.GenerateSW());<% } %>
88+
config.plugins?.push(new MiniCssExtractPlugin());<% } %><% if (workboxWebpackPlugin) { %>
89+
config.plugins?.push(new WorkboxWebpackPlugin.GenerateSW());<% } %>
9690
} else {
9791
config.mode = "development";
9892
}

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

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"compilerOptions": {
3-
"target": "es5",
3+
"target": "esnext",
44
"lib": ["dom", "dom.iterable", "esnext"],
55
"allowJs": true,
66
"skipLibCheck": true,
@@ -10,11 +10,14 @@
1010
"forceConsistentCasingInFileNames": true,
1111
"noFallthroughCasesInSwitch": true,
1212
"module": "esnext",
13-
"moduleResolution": "node",
13+
"moduleResolution": "bundler",
1414
"resolveJsonModule": true,
1515
"isolatedModules": true,
16-
"jsx": "react-jsx"
16+
"jsx": "react-jsx",
17+
"verbatimModuleSyntax": true,
18+
"erasableSyntaxOnly": true,
19+
"rewriteRelativeImportExtensions": true,
1720
},
1821
"include": ["src/**/*", "index.d.ts"],
1922
"exclude": ["node_modules", "dist"]
20-
}
23+
}

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

Lines changed: 13 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,22 @@
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";<% } %>
810

911
const __filename = fileURLToPath(import.meta.url);
1012
const __dirname = path.dirname(__filename);
11-
const isProduction = process.env.NODE_ENV === "production";
12-
<% if (cssType !== "none") { %>
13-
<% if (extractPlugin === "Yes") { %>
14-
const stylesHandler = MiniCssExtractPlugin.loader;
15-
<% } else if (extractPlugin === "Only for Production") { %>
16-
const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : "style-loader";
17-
<% } else { %>
18-
const stylesHandler = "style-loader";
19-
<% } %>
20-
<% } %>
13+
const isProduction = process.env.NODE_ENV === "production";<% if (cssType !== "none") { %><% if (extractPlugin === "Yes") { %>
14+
const stylesHandler = MiniCssExtractPlugin.loader;<% } else if (extractPlugin === "Only for Production") { %>
15+
const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : "style-loader";<% } else { %>
16+
const stylesHandler = "style-loader";<% } %><% } %>
2117

2218
/** @type {import("webpack").Configuration} */
23-
const config = {
19+
const config <% if (langType === "Typescript") { %>: Configuration <% } %>= {
2420
entry: "<%= entry %>",
2521
output: {
2622
path: path.resolve(__dirname, "dist"),
@@ -31,10 +27,8 @@ const config = {
3127
plugins: [<% if (htmlWebpackPlugin) { %>
3228
new HtmlWebpackPlugin({
3329
template: "index.html",
34-
}),
35-
<% } %><% if (extractPlugin === "Yes") { %>
36-
new MiniCssExtractPlugin(),
37-
<% } %>
30+
}),<% } %><% if (extractPlugin === "Yes") { %>
31+
new MiniCssExtractPlugin(),<% } %>
3832
// Add your plugins here
3933
// Learn more about plugins from https://webpack.js.org/configuration/plugins/
4034
],
@@ -94,13 +88,9 @@ const config = {
9488

9589
export default () => {
9690
if (isProduction) {
97-
config.mode = "production";
98-
<% if (extractPlugin === "Only for Production") { %>
99-
config.plugins.push(new MiniCssExtractPlugin());
100-
<% } %>
101-
<% if (workboxWebpackPlugin) { %>
102-
config.plugins.push(new WorkboxWebpackPlugin.GenerateSW());
103-
<% } %>
91+
config.mode = "production";<% if (extractPlugin === "Only for Production") { %>
92+
config.plugins?.push(new MiniCssExtractPlugin());<% } %><% if (workboxWebpackPlugin) { %>
93+
config.plugins?.push(new WorkboxWebpackPlugin.GenerateSW());<% } %>
10494
} else {
10595
config.mode = "development";
10696
}

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

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,19 @@
11
{
22
"extends": "@tsconfig/svelte/tsconfig.json",
33
"compilerOptions": {
4-
"target": "es5",
5-
"module": "es6",
4+
"target": "esnext",
5+
"module": "esnext",
66
"strict": true,
7-
"moduleResolution": "node",
7+
"moduleResolution": "bundler",
8+
"jsx": "preserve",
89
"skipLibCheck": true,
910
"esModuleInterop": true,
1011
"allowSyntheticDefaultImports": true,
1112
"sourceMap": true,
13+
"verbatimModuleSyntax": true,
14+
"erasableSyntaxOnly": true,
15+
"isolatedModules": true,
16+
"rewriteRelativeImportExtensions": true,
1217
},
1318
"include": [
1419
"src/**/*.ts",

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

Lines changed: 13 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,22 @@
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";<% } %>
810

911
const __filename = fileURLToPath(import.meta.url);
1012
const __dirname = path.dirname(__filename);
11-
const isProduction = process.env.NODE_ENV === "production";
12-
<% if (cssType !== "none") { %>
13-
<% if (extractPlugin === "Yes") { %>
14-
const stylesHandler = MiniCssExtractPlugin.loader;
15-
<% } else if (extractPlugin === "Only for Production") { %>
16-
const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : "style-loader";
17-
<% } else { %>
18-
const stylesHandler = "style-loader";
19-
<% } %>
20-
<% } %>
13+
const isProduction = process.env.NODE_ENV === "production";<% if (cssType !== "none") { %><% if (extractPlugin === "Yes") { %>
14+
const stylesHandler = MiniCssExtractPlugin.loader;<% } else if (extractPlugin === "Only for Production") { %>
15+
const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : "style-loader";<% } else { %>
16+
const stylesHandler = "style-loader";<% } %><% } %>
2117

2218
/** @type {import("webpack").Configuration} */
23-
const config = {
19+
const config <% if (langType === "Typescript") { %>: Configuration <% } %>= {
2420
entry: "<%= entry %>",
2521
output: {
2622
path: path.resolve(__dirname, "dist"),
@@ -31,10 +27,8 @@ const config = {
3127
plugins: [<% if (htmlWebpackPlugin) { %>
3228
new HtmlWebpackPlugin({
3329
template: "./index.html",
34-
}),
35-
<% } %><% if (extractPlugin === "Yes") { %>
36-
new MiniCssExtractPlugin(),
37-
<% } %>
30+
}),<% } %><% if (extractPlugin === "Yes") { %>
31+
new MiniCssExtractPlugin(),<% } %>
3832
// Add your plugins here
3933
// Learn more about plugins from https://webpack.js.org/configuration/plugins/
4034
],
@@ -108,13 +102,9 @@ const config = {
108102

109103
export default () => {
110104
if (isProduction) {
111-
config.mode = "production";
112-
<% if (extractPlugin === "Only for Production") { %>
113-
config.plugins.push(new MiniCssExtractPlugin());
114-
<% } %>
115-
<% if (workboxWebpackPlugin) { %>
116-
config.plugins.push(new WorkboxWebpackPlugin.GenerateSW());
117-
<% } %>
105+
config.mode = "production";<% if (extractPlugin === "Only for Production") { %>
106+
config.plugins?.push(new MiniCssExtractPlugin());<% } %><% if (workboxWebpackPlugin) { %>
107+
config.plugins?.push(new WorkboxWebpackPlugin.GenerateSW());<% } %>
118108
} else {
119109
config.mode = "development";
120110
}

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

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,19 @@
11
{
22
"compilerOptions": {
3-
"target": "es5",
4-
"module": "es6",
3+
"target": "esnext",
4+
"module": "esnext",
55
"strict": true,
66
"jsx": "preserve",
7-
"moduleResolution": "node",
7+
"jsxImportSource": "vue",
8+
"moduleResolution": "bundler",
89
"skipLibCheck": true,
910
"esModuleInterop": true,
1011
"allowSyntheticDefaultImports": true,
1112
"sourceMap": true,
12-
"baseUrl": ".",
13+
"verbatimModuleSyntax": true,
14+
"erasableSyntaxOnly": true,
15+
"isolatedModules": true,
16+
"rewriteRelativeImportExtensions": true,
1317
"types": [
1418
"webpack-env",
1519
"vue-router"
@@ -22,6 +26,7 @@
2226
"lib": [
2327
"esnext",
2428
"dom",
29+
"dom.iterable",
2530
]
2631
},
2732
"include": [

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

Lines changed: 13 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,22 @@
22

33
import { VueLoaderPlugin } from "vue-loader";
44
import path from "node:path";
5-
import { fileURLToPath } from "node:url";<% if (htmlWebpackPlugin) { %>
5+
import { fileURLToPath } from "node:url";<% if (langType === "Typescript") { %>
6+
import { type Configuration } from "webpack";<% if (devServer) { %>
7+
import "webpack-dev-server";<% } %><% } %><% if (htmlWebpackPlugin) { %>
68
import HtmlWebpackPlugin from "html-webpack-plugin";<% } %><% if (extractPlugin !== "No") { %>
79
import MiniCssExtractPlugin from "mini-css-extract-plugin";<% } %><% if (workboxWebpackPlugin) { %>
810
import WorkboxWebpackPlugin from "workbox-webpack-plugin";<% } %>
911

1012
const __filename = fileURLToPath(import.meta.url);
1113
const __dirname = path.dirname(__filename);
12-
const isProduction = process.env.NODE_ENV === "production";
13-
<% if (cssType !== "none") { %>
14-
<% if (extractPlugin === "Yes") { %>
15-
const stylesHandler = MiniCssExtractPlugin.loader;
16-
<% } else if (extractPlugin === "Only for Production") { %>
17-
const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : "vue-style-loader";
18-
<% } else { %>
19-
const stylesHandler = "vue-style-loader";
20-
<% } %>
21-
<% } %>
14+
const isProduction = process.env.NODE_ENV === "production";<% if (cssType !== "none") { %><% if (extractPlugin === "Yes") { %>
15+
const stylesHandler = MiniCssExtractPlugin.loader;<% } else if (extractPlugin === "Only for Production") { %>
16+
const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : "vue-style-loader";<% } else { %>
17+
const stylesHandler = "vue-style-loader";<% } %><% } %>
2218

2319
/** @type {import("webpack").Configuration} */
24-
const config = {
20+
const config <% if (langType === "Typescript") { %>: Configuration <% } %>= {
2521
entry: "<%= entry %>",
2622
output: {
2723
path: path.resolve(__dirname, "dist"),
@@ -33,10 +29,8 @@ const config = {
3329
new VueLoaderPlugin(),<% if (htmlWebpackPlugin) { %>
3430
new HtmlWebpackPlugin({
3531
template: "index.html",
36-
}),
37-
<% } %><% if (extractPlugin === "Yes") { %>
38-
new MiniCssExtractPlugin(),
39-
<% } %>
32+
}),<% } %><% if (extractPlugin === "Yes") { %>
33+
new MiniCssExtractPlugin(),<% } %>
4034
// Add your plugins here
4135
// Learn more about plugins from https://webpack.js.org/configuration/plugins/
4236
],
@@ -103,13 +97,9 @@ const config = {
10397

10498
export default () => {
10599
if (isProduction) {
106-
config.mode = "production";
107-
<% if (extractPlugin === "Only for Production") { %>
108-
config.plugins.push(new MiniCssExtractPlugin());
109-
<% } %>
110-
<% if (workboxWebpackPlugin) { %>
111-
config.plugins.push(new WorkboxWebpackPlugin.GenerateSW());
112-
<% } %>
100+
config.mode = "production";<% if (extractPlugin === "Only for Production") { %>
101+
config.plugins?.push(new MiniCssExtractPlugin());<% } %><% if (workboxWebpackPlugin) { %>
102+
config.plugins?.push(new WorkboxWebpackPlugin.GenerateSW());<% } %>
113103
} else {
114104
config.mode = "development";
115105
}

0 commit comments

Comments
 (0)