我正在尝试通过将WebGL顶点和片段着色器作为字符串进行
我的项目结构如下:
此外,
我已经查看了TypeScript和Webpack的所有文档,以及这里的许多其他答案。根据我所读的大部分内容,
发生了什么?我必须怎样在TypeScript中使用Webpack导入原始文件?(或者至少,我可以做些什么来找出为什么找不到它?)
导入
来包含它们。我的项目结构如下:
myproj/
src/
shad/
foo.frg
foo.vtx
shad.d.ts
Foo.ts
dist/
...
built/
...
tsconfig.json
package.json
webpack.config.js
shad.d.ts
declare module '*.vtx' {
const content: string;
export default content;
}
declare module '*.frg' {
const content: string;
export default content;
}
Foo.ts
import stuff from 'shad/foo.frg'
console.log(stuff)
tsconfig.json
{
"include": [
"src/**/*",
"src/shad/**/*.vtx",
"src/shad/**/*.frg",
],
"exclude": ["node_modules"],
"compilerOptions": {
"target": "ES2018",
"module": "es2015",
"declaration": true,
"sourceMap": true,
"outDir": "built",
"composite": true,
"strict": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true
}
}
webpack.config.js
const path = require('path');
module.exports = {
entry: {
test: './src/Foo.ts',
},
mode: 'development',
devtool: 'inline-source-map',
devServer: {
contentBase: './dist'
},
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: [
/node_modules/,
]
},
{
test: /\.(vtx|frg)$/i,
use: 'raw-loader',
},
],
},
resolve: {
extensions: [ '.tsx', '.ts', '.js', '.vtx', '.frg' ],
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
},
};
当我运行npx webpack
时,我得到:
ERROR in ./src/Foo.ts
Module not found: Error: Can't resolve 'shad/foo.frg' in '/Users/tbabb/test/tmp/tsproj/src'
@ ./src/Foo.ts 1:0-33 4:16-21
此外,
src/shad/
文件夹及其内容在built/
目录中不存在。我已经查看了TypeScript和Webpack的所有文档,以及这里的许多其他答案。根据我所读的大部分内容,
shad.d.ts
的存在和内容足以解决这个问题,但事实并非如此,我甚至不知道该如何弄清原因。发生了什么?我必须怎样在TypeScript中使用Webpack导入原始文件?(或者至少,我可以做些什么来找出为什么找不到它?)