Skip to content

Commit a88ddcf

Browse files
committed
Update documentation for TypeScript webpack usage
1 parent c1ac637 commit a88ddcf

File tree

1 file changed

+38
-0
lines changed

1 file changed

+38
-0
lines changed

src/content/guides/typescript.mdx

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,42 @@ Now lets change the import of `lodash` in our `./index.ts` due to the fact that
115115

116116
T> To make imports do this by default and keep `import _ from 'lodash';` syntax in TypeScript, set `"allowSyntheticDefaultImports" : true` and `"esModuleInterop" : true` in your **tsconfig.json** file. This is related to TypeScript configuration and mentioned in our guide only for your information.
117117

118+
## Ways to Use TypeScript in `webpack.config.js`
119+
120+
There are 5 ways to use TypeScript in `webpack.config.js`:
121+
122+
1. **Using webpack with TypeScript config:**
123+
124+
```bash
125+
webpack -c ./webpack.config.ts
126+
```
127+
128+
(Not all things are supported due to limitations of `rechoir` and `interpret`.)
129+
130+
2. **Using custom `--import` for Node.js:**
131+
132+
```bash
133+
NODE_OPTIONS='--import tsx' webpack --disable-interpret -c ./webpack.config.ts
134+
```
135+
136+
3. **Using built-in TypeScript module for Node.js v22.7.0 ≥ YOUR NODE.JS VERSION < v23.6.0:**
137+
138+
```bash
139+
NODE_OPTIONS='--experimental-strip-types' webpack --disable-interpret -c ./webpack.config.ts
140+
```
141+
142+
4. **Using built-in TypeScript module for Node.js ≥ v22.6.0:**
143+
144+
```bash
145+
webpack --disable-interpret -c ./webpack.config.ts
146+
```
147+
148+
5. **Using a tsx for Node.js ≥ v22.6.0:**
149+
150+
```bash
151+
NODE_OPTIONS='--no-experimental-strip-types --import tsx' webpack --disable-interpret -c ./webpack.config.ts
152+
```
153+
118154
## Loader
119155

120156
[`ts-loader`](https://github.com/TypeStrong/ts-loader)
@@ -129,6 +165,8 @@ Note that if you're already using [`babel-loader`](https://github.com/babel/babe
129165

130166
To learn more about source maps, see the [development guide](/guides/development).
131167

168+
To learn more about source maps, see the [development guide](/guides/development).
169+
132170
To enable source maps, we must configure TypeScript to output inline source maps to our compiled JavaScript files. The following line must be added to our TypeScript configuration:
133171

134172
**tsconfig.json**

0 commit comments

Comments
 (0)