Issues loading .babylon 3d models using webpack and babylon-file-loader

[laseamru]

Hello, I am  currently developing a 3D online shop using babylonjs for my Computer Graphics course. I am trying to use webpack for the first time in, but I am having issues loading my meshed using webpack. I understand that I should use babylon-file-loader in this case, which I installed and added to my module rules inside the webpack config file. However, the babylon 3D model is not found after compiling with the previous loader installed and added. Below is my complete index.js file inside the src folder:

import { Engine, FreeCamera, HemisphericLight, Scene, SceneLoader, Vector3 } from 'babylonjs';
import './main.css';


const stage = document.querySelector('#stage')
const engine = new Engine(stage, true)

const createScene = () => {
    // create scene space
    const scene = new Scene(engine)
    
    // add camera and attach to scene
    const camera = new FreeCamera('freeCamera', new Vector3(0, 1, -10), scene)
    camera.attachControl(stage)
    
    // create light
    const hemisphericLight = new HemisphericLight('hemisphericLight', new Vector3(0, 10, 0), scene)

    // import sneaker model
    const sneaker = SceneLoader.ImportMesh('', './assets/', 'sneaker.babylon', scene);

    return scene
}

const scene = createScene()

engine.runRenderLoop( () => {
    scene.render()
})

window.addEventListener('resize', () => {
    engine.resize()
})

The babylon file is located inside src/assets/. Below is the complete webpack config. I have to point out that I am using 3 config files though, one for developmnet, production and one that has the common configurations for both.  The one you see below is the webpack.common.config file

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
    entry: "./src/index.js",
    plugins: [
        new HtmlWebpackPlugin({
            hash: true,
            template: './src/template.html',
            filename: 'index.html',
            path: path.resolve(__dirname, 'dist')
        })
    ],
    module: {
        rules: [
            // 
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.html$/,
                use: ['html-loader']
            },
            {
                test: /\.babylons$/,
                use: {
                    loader: ['babylon-file-loader'],
                    options: {
                        name: "[name].[hash].[ext]",
                        outputPath: "models",
                    }
                }
            }
        ]
    }
};

Is there anything that I am missing? If anyone could help me with this problem I am facing right now, I would be very thankful.