webpack and glTF files

Question

IM using three js and trying to import a 3d model from blender, Im also using webpack with it. Im trying to load in a glb file but cant get it working. It is now adding the file to the dist folder on build but it is not changing the path to the file (in the javascript file).

Heres my files:

webpack config

const htmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    watch: true,

    module: {
        rules: [
            {
                test: /\.html$/i,
                loader: 'html-loader',
            },
            {
              test: /\.(png|jpe?g|gif|glb|gltf)$/i,
              loader: 'file-loader',
              options: {
                  publicPath: './',
              },
          },
          {
            test: /\.glb$/,
            loader: '@vxna/gltf-loader',
            options: { inline: true },
          },
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            template: './src/index.html',
            filename: './index.html'
        })
    ]
}

javascript file im importing to

import * as THREE from 'three';
import gsap from "gsap";
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import model from './fx.glb'


const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
const renderer = new THREE.WebGLRenderer()

init()
const geometry= createShape()
scene.add(geometry)
const loader = new GLTFLoader()
loader.load('./fx.glb',(model)=>{
  scene.add(model)
})

Any idea what im doing wrong here?

Answer 1

         {
          test: /\.(png|jpe?g|gif|glb|gltf)$/i,
          loader: 'file-loader',
          options: {
              publicPath: './',
              name: '[name].[ext]'
          },