ts-loader 导入 .json 文件时在子目录中输出声明文件

Question

我的 ts-loader 有一个奇怪的行为：从 node_modules 导入 *.json 文件时，声明文件在以下子文件夹中生成dist/但我希望它们直接在该 dist/文件夹中。

\n

我有以下项目结构：

\n

Project/\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 src/ \n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 components/\n\xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 PhoneNumberInput/\n\xe2\x94\x82   \xe2\x94\x82       \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.ts\n\xe2\x94\x82   \xe2\x94\x82       \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 utils.ts\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 index.ts\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 tsconfig.json\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 webpack.config.js\n

\n

运行时webpack（使用ts-loader）我期望以下输出文件夹结构：

\n

Project/\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 dist/ \n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 components/\n\xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 PhoneNumberInput/\n\xe2\x94\x82   \xe2\x94\x82       \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.d.ts\n\xe2\x94\x82   \xe2\x94\x82       \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 utils.d.ts\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.d.ts\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 index.js\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 ...\n

\n

情况就是这样，直到我开始node_modules/在我的应用程序中导入 .json （来自 ）文件utils.ts：

\n

Project/\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 src/ \n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 components/\n\xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 PhoneNumberInput/\n\xe2\x94\x82   \xe2\x94\x82       \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.ts\n\xe2\x94\x82   \xe2\x94\x82       \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 utils.ts\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 index.ts\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 tsconfig.json\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 webpack.config.js\n

\n

声明文件现在生成在dist/src/：

\n

Project/\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 dist/ \n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 src/\n\xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 components/\n\xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 PhoneNumberInput/\n\xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x82       \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.d.ts\n\xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x82       \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 utils.d.ts\n\xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 index.d.ts\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 index.js\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 ...\n

\n

与资产的任何相对导入现在都已损坏。\n如果我使用awesome-typescript-loader或从项目导入 .json

\n

Project/\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 dist/ \n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 components/\n\xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 PhoneNumberInput/\n\xe2\x94\x82   \xe2\x94\x82       \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.d.ts\n\xe2\x94\x82   \xe2\x94\x82       \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 utils.d.ts\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.d.ts\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 index.js\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 ...\n

\n

我不明白src/文件夹。

\n

有谁知道这种行为从何而来？我做错了什么？或者这可能是一个错误？\n示例项目可以在https://github.com/psalchow/ts-path-testts-loader找到

\n

以下是相关的配置文件：

\n

包.json

\n

import * as de from "react-phone-number-input/locale/de.json";\n

\n

tsconfig.json

\n

Project/\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 dist/ \n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 src/\n\xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 components/\n\xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 PhoneNumberInput/\n\xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x82       \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.d.ts\n\xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x82       \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 utils.d.ts\n\xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 index.d.ts\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 index.js\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 ...\n

\n

webpack.config.js

\n

import * as de from "./countries.json";\n

\n

Answer 1

我知道这个问题已经很久没有被触及了。在当前版本（9.4.3）中，ts-loader这个问题不再发生，所有内容都按预期直接在dist文件夹下生成（没有任何子src文件夹）。测试存储库已相应更新： https: //github.com/psalchow/ts-path-test