找不到模块“！！raw-loader！./omething.glsl”或其对应的类型声明

Question

我有一个由create-react-app --template typescript发起的项目。我需要使用webpack原始加载器导入一些文件，所以我做了一个npm i -D raw-loader。现在我像这样导入它们：

// eslint-disable-next-line import/no-webpack-loader-syntax
import fSrc from '!!raw-loader!./something.glsl';

我在我的项目中添加了.glsl文件和!raw-loader!的声明：

// index.d.ts

declare module '*.svg';
declare module '*.glsl';
declare module '!raw-loader!*';

但是，我得到了编译器错误：

Cannot find module '!!raw-loader!./something.glsl' or its corresponding type declarations.  TS2307

    1 | // eslint-disable-next-line import/no-webpack-loader-syntax
  > 2 | import fSrc from '!!raw-loader!./something.glsl';

我在这里做错了什么？

Answer 1

根据要求，以下是我所做的对我有效的方法。

在webpack.config.js中，使用原始加载器和glslify-loader来处理任何.glsl文件：

module.exports = {
    entry: './src/index.tsx',
    module: {
        rules: [
            {
                test: /\.(glsl|vs|fs|vert|frag)$/,
                exclude: /node_modules/,
                use: ['raw-loader', 'glslify-loader'],
            },
            // ...
        ],
    },
    // ...
};

然后在没有任何特殊语法的情况下导入它们：

// Where I want to use them:

import fSrc from './fragmentShader.fs.glsl';
import vSrc from './vertexShader.vs.glsl';

如果您使用typescript，则需要在.d.ts文件中将这些类型的文件声明为模块：

// index.d.ts

declare module '*.svg';
declare module '*.glsl';
declare module '*.fs.svg';
declare module '*.vs.glsl';