Skip to content

fix(init): generate webpack.config.ts instead of webpack.config.js when TypeScript is selected#4723

Merged
alexander-akait merged 10 commits into
webpack:mainfrom
ThierryRakotomanana:fix/default-generator-typescript-config-extension
Apr 7, 2026
Merged

fix(init): generate webpack.config.ts instead of webpack.config.js when TypeScript is selected#4723
alexander-akait merged 10 commits into
webpack:mainfrom
ThierryRakotomanana:fix/default-generator-typescript-config-extension

Conversation

@ThierryRakotomanana

Copy link
Copy Markdown
Contributor

Summary
When running npx create-webpack-app and selecting TypeScript as the language, the generator creates webpack.config.js instead of webpack.config.ts.

  • Changing it directy lead to multiple errors as ts-node is not add as dependency,
  • webpack -c ./webpack.config.ts doesn't work.
  • tsconfig.json still use depreacted config, like es5 as target, that creates a compiler error

What kind of change does this PR introduce?
Fix :

  • Make the webpack config filename dynamic based on langType answer
  • Replace webpack.config.js.tpl with a unified webpack.config.tpl that renders JS or TS syntax based on langType
  • Add import webpack from "webpack" and typed webpack.Configuration annotation in the TS output
  • Add conditional import "webpack-dev-server" when devServer is selected
  • Add ts-node to devDependencies when TypeScript is selected
  • Add NODE_OPTIONS='--loader ts-node/esm --no-warnings to load webpack.config.ts in the package.jso
  • Update tests to assert webpack.config.ts is generated for TypeScript projects

Did you add tests for your changes?
Yes, and I updated the test case

Does this PR introduce a breaking change?
Not really,

If relevant, what needs to be documented once your changes are merged or what have you already documented?

The Typescript docs, but I am already on it.
Use of AI
No

@changeset-bot

changeset-bot Bot commented Mar 31, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 57f8de2

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
create-webpack-app Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@codecov

codecov Bot commented Mar 31, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 91.44%. Comparing base (c86a11c) to head (57f8de2).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files

Impacted file tree graph

@@           Coverage Diff           @@
##             main    #4723   +/-   ##
=======================================
  Coverage   91.43%   91.44%           
=======================================
  Files          14       14           
  Lines        4716     4721    +5     
  Branches      679      682    +3     
=======================================
+ Hits         4312     4317    +5     
  Misses        402      402           
  Partials        2        2           
Files with missing lines Coverage Δ
.../create-webpack-app/src/generators/init/default.ts 93.83% <100.00%> (+0.14%) ⬆️

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update c86a11c...57f8de2. Read the comment docs.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.
Comment thread test/create-webpack-app/init/__snapshots__/init.test.js.snap.webpack5 Outdated
Comment thread test/create-webpack-app/init/__snapshots__/init.test.js.snap.webpack5 Outdated
Comment thread packages/create-webpack-app/templates/init/default/package.json.tpl Outdated

@alexander-akait alexander-akait left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's fix problems

@ThierryRakotomanana

Copy link
Copy Markdown
Contributor Author

So @alexander-akait here we don't need ts-node and NODE_OPTION anymore since it will use Node22 from this month?

@alexander-akait

Copy link
Copy Markdown
Member

I think for typescript we can use only ECMA syntax and so use built-in Typescript Node.js API

-Add ts-node to load the configuration file
- 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
\n Node22 natively support typescript
@ThierryRakotomanana ThierryRakotomanana force-pushed the fix/default-generator-typescript-config-extension branch from c13517d to 35458fb Compare April 7, 2026 16:08
Comment thread test/create-webpack-app/init/__snapshots__/init.test.js.snap.webpack5 Outdated
Comment thread packages/create-webpack-app/templates/init/default/tsconfig.json.tpl Outdated
Comment thread packages/create-webpack-app/templates/init/default/tsconfig.json.tpl Outdated

@alexander-akait alexander-akait left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's do couple improvements and we can merge

@ThierryRakotomanana

Copy link
Copy Markdown
Contributor Author

Let's do couple improvements and we can merge

let's go

@alexander-akait

Copy link
Copy Markdown
Member

So @alexander-akait here we don't need ts-node and NODE_OPTION anymore since it will use Node22 from this month?

Yes, there is no point in support ts-node by default, if someone needs it, they can find plenty of examples on the Internet

@ThierryRakotomanana

Copy link
Copy Markdown
Contributor Author

@alexander-akait @evenstensberg This is completely off-topic, but what do you think if I changed the CLI UI for the help command like this?

Before After
Before: After:
@alexander-akait

Copy link
Copy Markdown
Member

@ThierryRakotomanana I like it, feel free to start it after we resolve it

@alexander-akait

Copy link
Copy Markdown
Member

Don't forget we support webpack help build (to get help for build command), so I think we should improve it too

@ThierryRakotomanana

Copy link
Copy Markdown
Contributor Author

Don't forget we support webpack help build (to get help for build command), so I think we should improve it too

Got it, will start with the help command first

Comment thread test/create-webpack-app/init/__snapshots__/init.test.js.snap.webpack5 Outdated
@alexander-akait alexander-akait merged commit b4f32cc into webpack:main Apr 7, 2026
19 checks passed
@alexander-akait

Copy link
Copy Markdown
Member

@ThierryRakotomanana oh, forgot to check, do we add jsx when react selected, feel free to test it manually and fix it in the separate PR, same for vue ("jsx": "preserve", "jsxImportSource": "vue") and svelte

@ThierryRakotomanana

Copy link
Copy Markdown
Contributor Author

@ThierryRakotomanana oh, forgot to check, do we add jsx when react selected, feel free to test it manually and fix it in the separate PR, same for vue ("jsx": "preserve", "jsxImportSource": "vue") and svelte

Got it. I'll check that.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

3 participants