Any way to load bitmap fonts without app.loader when using webpack?

[xzilja]

I was following example for using custom bitmap fonts at https://pixijs.io/examples/#/text/bitmap-text.js
It works in general, but breaks when using webpack to bundle assets. Mainly, because .fnt and .xml files usually have this entry, that references associated png file

<pages>
    <page id="0" file="Script-gold.png"/>
</pages>

Issue is that within webpack's context that file doesn't exist, its rather something obfuscated like lksadjh8sdf8gji.png, so when pixi loader tries to get the file, it fails.

Is there a common way to work around this somehow and give pixi exact locations for xml and png file of bitmap font?

[bigtimebuddy]

Yes! You can use the BitmapFont.install method to provide your XML and Texture manually. This is was the loader plugin does anyways. http://pixijs.download/dev/docs/PIXI.BitmapFont.html#install

[xzilja]

Is there usage example available somewhere by any chance? I'm trying to pass my xml file as raw string (base64) but am getting errors related to unsupported file format (it works with app.loader approach though if I manually edit filename in xml)

[bigtimebuddy]

I'm confused by the raw string/base64 comment. It should be the raw XML as a string (<xml>), not starting with data:text/xml.

[xzilja]

Got it working, my bad, just made an assumption about base64. Thank you! For anyone who comes across this discussion, correct way to use bitmap fonts this way in webpack is via https://webpack.js.org/loaders/raw-loader