Question: generate `d.ts` files for each entry

[stangerjm]

Expected Behaviour

I want to generate one declaration file per entry. I am creating a component package and want to ship types along with it.

The structure of my dist folder is something like:

dist/
    `-- badge
        `-- badge.js
    `-- table
        `-- table.js
    `-- types
        `-- src
            `-- badge
                `-- badge.d.ts
                `-- index.d.ts
            `-- table
                `-- table.d.ts
                `-- index.d.ts

Actual Behaviour

What I want is a declaration file per entry:

dist/
    `-- badge
        `-- badge.js
        `-- badge.d.ts
    `-- table
        `-- table.js
        `-- table.d.ts

Steps to Reproduce the Problem

Here is my Webpack config

const path = require('path');

module.exports = {
  mode: 'production',
  entry: {
    badge: path.join(__dirname, 'src/badge/index.ts'),
    table: path.join(__dirname, 'src/table/index.ts'),
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name]/index.js',
    clean: true,
    library: {
      name: 'MyComponents',
      type: 'umd',
      umdNamedDefine: true,
    }
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js'],
    alias: {
      src: path.resolve(__dirname, 'src'),
      generated: path.resolve(__dirname, 'generated'),
    },
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.s[ac]ss$/i,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.svg$/,
        issuer: /\.[jt]sx?$/,
        use: ['@svgr/webpack'],
      },
    ],
  },
  externals: {
    react: 'react',
    'react-dom': 'react-dom',
  },
};

And here is my tsconfig.json:

{
  "compilerOptions": {
    "lib": ["dom", "es2020"],
    "target":"es2020",
    "module": "es2020",
    "moduleResolution": "bundler",
    "jsx": "react-jsx",
    "declaration": true,
    "declarationMap": true,
    "outDir": "./dist",
    "declarationDir": "./dist/types",
    "esModuleInterop": true,
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "noImplicitThis": true,
    "alwaysStrict": true,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": false,
    "inlineSourceMap": true,
    "inlineSources": true,
    "experimentalDecorators": true,
    "strictPropertyInitialization": false,
    "skipLibCheck": true,
    "types": ["node", "jest", "@testing-library/jest-dom"],
    "baseUrl": "./",
    "paths": {
      "src": ["src"],
      "generated": ["generated"]
    }
  },
  "exclude": ["build","node_modules", "dist"],
  "include": ["src"]
}

I am setting a declarationDir right now of just dist/types so the types can go somewhere. But I can't seem to make my types match my webpack output.

Any help would be greatly appreciated.