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

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.

Start by reviewing the Webpack configuration and tsconfig.json shown in the issue, focusing on the interaction between the named entries and TypeScript declarationDir. There is no repository file, test, or implementation target identified; done would require a documented, reproducible way to place each generated declaration beside its corresponding bundle.