Webpack 5配置：修改TypeScript声明文件的输出目录

src/ts为关键目录，结构如下：

• 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

问题描述 #

希望Webpack生成的TypeScript声明文件输出到dist/types目录，但运行Webpack打包后，声明文件被输出到了dist/src/ts/目录下。

现有配置 #

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",
    }
}

webpack中ts-loader配置 #

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

解决方案 #

两步修改即可实现需求：

1. 修改tsconfig.json配置
   在compilerOptions中新增两个配置项：

• declarationDir：指定声明文件的输出根目录为./dist/types
• rootDir：指定TS源码的根目录为./src/ts，避免生成多余的src/ts层级目录

修改后的compilerOptions参考：

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "strict": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "noImplicitAny": true,
        "removeComments": true,
        "declaration": true, // 开启.d.ts声明文件生成
        "declarationDir": "./dist/types", // 声明文件输出目录
        "rootDir": "./src/ts", // TS源码根目录，匹配项目的TS存放路径
        "strictNullChecks": true,
        "module": "es6",
        "target": "es5",
        "jsx": "react",
        "allowJs": true,
        "moduleResolution": "node",
    }
}

2. （可选）如果使用的是webpack 5+，上面修改后仍有路径问题，可以在ts-loader的配置中开启onlyCompileBundledFiles选项，避免编译未被入口引用的TS文件同时生成多余的声明文件：

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

修改完成后重新执行打包命令，声明文件就会直接输出到dist/types目录下，且内部直接是services、utils等目录，不会再嵌套src/ts层级。

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