How to load a Pixijs BitmapText in Vuejs

I have been banging my head on the wall for some hours now. I am having a hard time loading a .fnt file into pixijs. Here's the process I have been through.

1. Using bitmap Font generator for windows I've exported a .fnt file in XML format.

2. Adding the .fnt to the loader

     const loader = new PIXI.Loader()
            loader.add("fnt", require('../../assets/sprites/arial.fnt'));
            loader.load(function() {
                const bitmapFontText = new PIXI.BitmapText('BITMAP FONTS', { font: '24px Arial' });
                bitmapFontText.anchor.set(0.5)
                bitmapFontText.position.x = 50
                bitmapFontText.position.y = 50
                this.viewport.addChild(bitmapFontText);
            });

I then add the error :

Module parse failed: You may need an appropriate loader to handle this file type

Which I think I solved this way inside my webpack.config using File-Loader

       module: {
            rules: [
                {
                    test: /\.fnt$/,
                    use: [
                        {
                            loader: 'file-loader',
                            options: {
                                name: '[./src/assets/sprites][name].[ext]',
                            },
                        },
                    ],
                },
            ],
        }

3. Creating PIXI.BitmapText

It seems my font is still not fully loaded because I get this error :

TypeError: Cannot read property 'size' of undefined

What am I missing

PS: I made sure I was using the Face attribute from the arial.fnt file in { font: '24px Arial' }