Webpack 找不到 Typescript 类型解析所需的导入。如何解决这个问题？答案

【问题标题】：Webpack can't find import needed for Typescript type resolution. How to fix this?Webpack 找不到 Typescript 类型解析所需的导入。如何解决这个问题？
【发布时间】：2020-07-01 17:06:10
【问题描述】：

我的项目使用 typescript 并使用 webpack 构建。

我有一个来自位于node_modules/@types/libname/custom.d.ts 下的第三方库的类型文件。该文件有一个命名空间声明，其中包含几种类型：

declare namespace MyNamespace {
    export type A = ...;
}

然后为了能够在我的打字稿代码中使用该类型，如下所示：

const x: MyNamespace.A;

...我需要在应用程序的某处添加如下导入声明：

import 'libname'

哪个 tsc 正确解析为 node_modules/@types/libname/custom.d.ts，所以如果我使用 tsc 编译，一切正常。

但是 webpack 无法构建。它无法理解这个导入：

ERROR in ./Index.tsx
Module not found: Error: Can't resolve 'libname' in 'C:\<path_to_index_file>'
 @ ./Index.tsx 44:0-32

我尝试在我的 webpack.config 中添加一个别名，如下所示：

    resolve: {
        alias: Object.assign({
            'libname$': path.resolve(__dirname, 'node_modules/@types/libname/custom.d.ts'),
        }
    },

但随后它失败了，因为它无法理解该文件的语法并询问我是否缺少加载程序。

我该如何解决这个问题，以便 webpack 能够理解这个类型的导入语句？

我在使用 webpack 版本4.41.6

谢谢！

【问题讨论】：

如果你改为 import { MyNamespace } from 'libname' 会起作用吗？ ?
不...在这种情况下，我得到 tsc 抱怨“TS2306：文件'C:\project\node_modules\@types\libname\custom.d.ts'不是一个模块。”并且它在 IDE 中也出现错误，并显示相同的消息。所以它找到了它，但不能那样导入。
不知道是不是你的第三方打字有问题，里面有出口吗？但是，我认为您可以通过为您的库声明一个特定的加载器来绕过这个问题，也许是空加载器：webpack.js.org/loaders/null-loader
@Axnyff 就是这样！空加载器做到了。如果您想将其移至答案，我可以接受。谢谢！

标签： javascript typescript webpack typescript-typings webpack.config.js

【解决方案1】：

您应该使用 null-loader 进行此导入，以便 webpack 将忽略它。

【讨论】：