ts-loader配置Webpack输出文件名时未重命名声明文件的问题咨询

你配置Webpack仅修改了JS产物的输出名称，默认的TypeScript声明生成逻辑和Webpack的output配置是独立的，并不会跟随JS文件名自动变更，所以你遇到的d.ts文件未同步重命名属于正常表现。
符合需求的预期结果应该是：server.js和同路径下的server.d.ts同时存在，或者通过包配置建立子路径导入和声明文件的映射关系，保证TypeScript在解析my-package/server导入时，可以匹配到对应的类型声明，不会抛出找不到模块的错误。

• 方法1：构建后追加重命名脚本
  直接在构建流程末尾增加声明文件重命名逻辑，比如在package.json的build命令中追加移动指令，跨平台场景可以用rename-cli等工具实现：

  {
    "scripts": {
      "build": "webpack && mv dist/index.server.d.ts dist/server.d.ts"
    }
  }
  

• 方法2：通过package.json的exports字段做路径映射
  不需要改动现有构建产物的命名，直接在包的package.json中配置子路径导出规则，同时指定类型声明和JS文件的对应关系，TypeScript 4.7及以上版本可以自动识别该配置：

  {
    "exports": {
      "./server": {
        "types": "./dist/index.server.d.ts",
        "default": "./dist/server.js"
      }
    }
  }
  

• 方法3：修改声明打包插件的输出配置
  如果你在Webpack中使用了dts-bundle-webpack、fork-ts-checker-webpack-plugin等专门处理声明文件的插件，可以直接在插件参数中指定声明文件的输出名称：

  const DtsBundleWebpack = require('dts-bundle-webpack');
  module.exports = {
    plugins: [
      new DtsBundleWebpack({
        main: 'dist/index.server.d.ts',
        out: 'server.d.ts'
      })
    ]
  }
  

• 方法4：用独立的声明打包工具生成指定名称的文件
  可以跳过tsc默认的声明生成逻辑，用dts-bundle-generator等工具单独打包声明文件，直接指定输出文件名：

  dts-bundle-generator src/index.server.ts -o dist/server.d.ts
  

内容的提问来源于stack exchange，提问作者Eric Burel