Webpack 5: Change directory for typescript declaration files

Question

My project is structured like this (src/ts folder is important):

- dist/
    - js/
    - css/
    - index.html
    - about.html
- src/
    - assets/
        - fonts/
        - images/
    - sass/
    - ts/
        - services/
            - service1.ts
            - service2.ts
        - utils/
            - util1.ts
            - util2.ts
        - index.ts
        - about.ts

The problem:

I want Webpack to create declaration files. The output directory should be dist/types. But when I run my webpack config, the declarations are thrown in a dist/src/ts/ directory.

My setup:

tsconfig.json

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "strict": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "noImplicitAny": true,
        "removeComments": true,
        "declaration": true, // Creates declaration files .d.ts
        "strictNullChecks": true,
        "module": "es6",
        "target": "es5",
        "jsx": "react",
        "allowJs": true,
        "moduleResolution": "node",
    }
}

The ts-loader in my webpack config file.

    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
        ],
    },

Answer 1

Try adding the DeclarationDir option to tsconfig.

// tsconfig.json
{
...
  "declaration": true,
  "declarationDir": "./dist/types"
...
}

https://www.typescriptlang.org/tsconfig#declarationDir