Use TypeScript for your webpack config

HOWTO.md

1. Create a secondary TypeScript config for webpack only

Simply create a new tsconfig-webpack.json file with the following contents:

{
  "compilerOptions": {
    "module": "commonjs",
    "resolveJsonModule": true,
    "target": "es6",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  }
}

The module value needs to be set to commonjs so long as this is what Node.js understands.

2. Use cross-env to to call webpack

Install cross-env and ts-node:

npm install --save-dev ts-node cross-env

Replace usages of webpack by:

cross-env TS_NODE_PROJECT="tsconfig-webpack.json" webpack

For instance, inside a package.json's "scripts":

"start:dev": "cross-env TS_NODE_PROJECT=\"tsconfig-webpack.json\" webpack serve --mode development",
"build:prod": "cross-env TS_NODE_PROJECT=\"tsconfig-webpack.json\" webpack --mode production"

tsconfig-webpack.json

{
  "compilerOptions": {
    "module": "commonjs",
    "resolveJsonModule": true,
    "target": "es6",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  }
}