如何在不获取"找不到"模块的情况下，在具有typescript的webpack中使用查询参数导入

Question

import a from 'a.png?sizes[]=64'

但是我得到了一个ts错误Cannot find module 'a.png?sizes[]=64'。所有这些都适用于webpack，但tsc检查类型失败，因为没有这样的文件。这应该只检查具有查询参数的a.png。

有什么办法吗？我运行此命令来检查类型tsc --project ./tsconfig.json --noEmit

一种破解方法是使用require()语法，但这将跳过任何检查。因此，即使文件丢失，也不会发生错误。

Answer 1

添加额外的声明有帮助，但必须有更好的方法。

例如types/import-png.d.ts

declare module '*.png' {
const value: string;
export default value;
}
declare module '*.png?inline' {
const value: string;
export default value;
}

Answer 2

我通过在url中添加一个额外的参数并对其进行匹配来解决这个问题

declare module '*&useResponsiveLoader=true' {
const defaultExport: {
srcSet: string,
images: {
height: number;
width: number;
path: string;
}[],
src: string,
placeholder: string,
toString(): string
};
export default defaultExport;
}

这是因为响应加载程序确实允许根据其验证模式(当前版本和下一版本(使用未使用的属性

然后将文件导入为

import a from 'a.png?sizes[]=64&useResponsiveLoader=true'
import b from 'b.png?sizes[]=64,sizes[]=128&useResponsiveLoader=true'

(注意，响应加载程序5需要更多的调整才能使用Webpack 5，我仍在计算中(