使用 raw-loader 和 TypeScript 时“找不到模块”

Question

我正在尝试通过以下方式包含一些 WebGL 顶点和片段着色器import字符串来包含它们。

\n\n

我有一个这样的项目结构：

\n\n

myproj/\n  src/\n    shad/\n      foo.frg\n      foo.vtx\n    shad.d.ts\n    Foo.ts\n  dist/\n    ...\n  built/\n    ...\n  tsconfig.json\n  package.json\n  webpack.config.js\n

\n\n

鲥鱼

\n\n

declare module \'*.vtx\' {\n    const content: string;\n    export default content;\n}\n\ndeclare module \'*.frg\' {\n    const content: string;\n    export default content;\n}\n

\n\n

脚

\n\n

import stuff from \'shad/foo.frg\'\n\nconsole.log(stuff)\n

\n\n

tsconfig.json

\n\n

{\n    "include": [\n        "src/**/*", \n        "src/shad/**/*.vtx", \n        "src/shad/**/*.frg",\n    ], \n    "exclude": ["node_modules"],\n    "compilerOptions": {\n        "target": "ES2018",\n        "module": "es2015",\n        "declaration": true,\n        "sourceMap": true,\n        "outDir": "built",\n        "composite": true,\n        "strict": true,\n        "esModuleInterop": true,\n        "forceConsistentCasingInFileNames": true\n    }\n}\n

\n\n

webpack.config.js

\n\n

const path = require(\'path\');\n\nmodule.exports = {\n  entry: {\n    test: \'./src/Foo.ts\',\n  },\n  mode:    \'development\',\n  devtool: \'inline-source-map\',\n  devServer: {\n    contentBase: \'./dist\'\n  },\n  module: {\n    rules: [\n      {\n        test:    /\\.tsx?$/,\n        use:     \'ts-loader\',\n        exclude: [\n          /node_modules/,\n        ]\n      },\n      {\n        test: /\\.(vtx|frg)$/i,\n        use:  \'raw-loader\',\n      },\n    ],\n  },\n  resolve: {\n    extensions: [ \'.tsx\', \'.ts\', \'.js\', \'.vtx\', \'.frg\' ],\n  },\n  output: {\n    filename: \'[name].bundle.js\',\n    path:      path.resolve(__dirname, \'dist\'),\n  },\n};\n

\n\n

当我 时npx webpack，我得到：

\n\n

ERROR in ./src/Foo.ts\nModule not found: Error: Can\'t resolve \'shad/foo.frg\' in \'/Users/tbabb/test/tmp/tsproj/src\'\n @ ./src/Foo.ts 1:0-33 4:16-21\n

\n\n

此外，目录src/shad/中也不存在该文件夹及其内容built/。

\n\n

我已经浏览了 TypeScript 和 Webpack 的所有文档，以及这里的许多其他答案。从我读过的大部分内容来看， 的存在和内容shad.d.ts应该足以解决这个问题，但它并没有\xe2\x80\x94，我什至不知道如何找出原因。

\n\n

这是怎么回事？使用 TypeScript 在 Webpack 中导入原始文件需要做什么？（或者至少，我能做些什么来找出为什么没有找到这个？）

\n

Answer 1

就我的 Next.js（也是 Typescript）而言，我通过安装 raw-loader 解决了这个问题。真的。

npm install raw-loader

事实证明，raw-loader 并没有随我的 Next.js 项目一起提供。我是新手，所以我认为它是我的项目附带的。

因此，对于遇到同样问题的其他人，请在尝试其他解决方案之前检查您的 package.json 文件以查看 raw-loader 是否存在。

Answer 2

在这个特殊的重现案例中，我不小心在Foo.ts. 它应该是：

import stuff from './shad/foo.frg'

引发这个问题的实际问题我已将范围缩小到一个带有项目引用的明显错误raw-loader。