Is it possible to write webpack config in typescript?

You can use TS as your config file (webpack.config.ts)

There is a clear clue for that, see Source Code

The ** interpret** module used there is a list of extension files and their loaders.

In the highlighted code webpack generates an array of all possible extension for the default files.

For example, give webpack.config you will get an array with

  • webpack.config.ts
  • webpack.config.js
  • ...... and so on

For this to work you need to install one of the packages that support loading your extension.

For example, TS has some node packages that enable you to require('something.ts') and the package will do the work.

The interpret package states that one of these packages is required

ts-node, typescript-node, typescript-register, typescript-require

So npm/yarn ts-node then just put a webpack.config.ts file and it will just work!

EDIT: Webpack documentation now has dedicated section on configuration languages which includes TypeScript, CoffeeScript and Babel & JSX


If you are using vscode as editor (or maybe others which support the JSDoc typing syntax) and you're only interested in typechecking your file to guide completion on your configuration object, you can do it like so:

In vscode you can do this as such:

  • npm i -D @types/webpack
  • add type annotation comments to your webpack.config.js file, as such:

webpack.config.js:

// @ts-check

module.exports = /** @type { import('webpack').Configuration } */ ({
    ...
});