TypeScript | webpack

This guide stems from the Getting Started guide.
TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. In this guide we will learn how to integrate TypeScript with webpack.
First install the TypeScript compiler and loader by running:
Now we'll modify the directory structure & the configuration files:
Let's set up a configuration to support JSX and compile TypeScript down to ES5...
See TypeScript's documentation to learn more about tsconfig.json configuration options.
To learn more about webpack configuration, see the configuration concepts.
Now let's configure webpack to handle TypeScript:
First, install the required dependencies:
For further reference on how to write configuration in Typescript file
This will direct webpack to enter through ./index.ts, load all .ts and .tsx files through the ts-loader, and output a bundle.js file in our current directory.
Next, we need to adjust how we import lodash in our ./index.ts. Since the lodash definitions don't include a default export, we'll need to update our import statement. First, make sure to install the TypeScript definitions:
Then, update your import at the top of the file:
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.
There are 3 ways to use TypeScript in webpack.config.ts:
Using webpack with built-in Node.js type stripping feature (recommended):
Will attempt to load the configuration using Node.js's built-in type-stripping, and then attempt to load the configuration file using interpret and rechoir (in this case you need to install tsx or ts-node or other tools).
Using custom --import/--require for Node.js:
The --no-experimental-strip-types flag is required starting with Node.js version 22.7.0.
Using built-in Node.js transform types feature for Node.js ≥ v22.7.0:
To enable the transformation of non erasable TypeScript syntax, which requires JavaScript code generation, such as enum declarations, parameter properties.
If you use compilerOptions.paths or compilerOptions.baseUrl in your tsconfig.json to create import aliases, starting with webpack 5.105, webpack can read these aliases directly via resolve.tsconfig. This replaces tsconfig-paths-webpack-plugin, which should no longer be used.
resolve.tsconfig accepts boolean | string | object:
Pass a string to point at a specific file (useful in monorepos):
Pass an object to also resolve TypeScript project references:
With the above, @/components/Button resolves to src/components/Button without any additional plugins or duplicating aliases in resolve.alias.
If you're currently using tsconfig-paths-webpack-plugin, you can drop it in favor of the built-in resolve.tsconfig option:
You can then remove the package from your project:
resolve.tsconfig only handles module resolution — it does not transpile TypeScript. You still need ts-loader, babel-loader with @babel/preset-typescript, or another transpilation step.
We use ts-loader in this guide as it makes enabling additional webpack features, such as importing other web assets, a bit easier.
ts-loader uses tsc, the TypeScript compiler, and relies on your tsconfig.json configuration. Make sure to avoid setting module to "CommonJS", or webpack won't be able to tree-shake your code.
Note that if you're already using babel-loader to transpile your code, you can use @babel/preset-typescript and let Babel handle both your JavaScript and TypeScript files instead of using an additional loader. Keep in mind that, contrary to ts-loader, the underlying @babel/plugin-transform-typescript plugin does not perform any type checking.
To learn more about source maps, see the development guide.
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:
Now we need to tell webpack to extract these source maps and include in our final bundle:
See the devtool documentation for more information.
It's possible to use webpack specific features in your TypeScript code, such as import.meta.webpack. And webpack provides types for them as well, add a TypeScript reference directive to declare it:
To enable the types for the whole project, add webpack/module to compilerOptions.types in tsconfig.json:
When installing third party libraries from npm, it is important to remember to install the typing definition for that library.
For example, if we want to use lodash, we should run the following command to install its type definitions: