Usage with webpack 5 and typescript

Questions
,
2

I have this working using these settings.

In my typescript projects root folder, I have an index.d.ts, containing

declare module '*.glb'

My webpack 5 config modules section

module: {
    rules: [
        {
            test: /\.tsx?$/,
            use: 'ts-loader',
            exclude: /node_modules/,
        },
        {
            test: /\.glb/,
            type: 'asset/resource',
        },
    ],
},

My tsconfig.json

{
    "compilerOptions": {
        "target": "ES6",
        "moduleResolution": "node",
        "strict": true
    },
    "include": ["**/*.ts"]
}

My .ts script where I use the glb

...
import monkey from './models/monkey.glb'
...
const loader = new GLTFLoader()
loader.load(
    monkey,
    function (gltf) {
       ... //etc

This works for me without showing any errors in the IDE or in the browser. I tested this using webpack dev server and production build served with nodejs.

3 Likes