How do I load assets in a wasm-pack environment?

[dolto]

Hello, I am a person who is practicing ui with bevy.

Recently, I have been touching various functions using bevy in the wasm-pack environment.
(https://rustwasm.github.io/docs/wasm-pack/tutorials/hybrid-applications-with-webpack/getting-started.html)

The code I used in the last Ui exercise is disposable, and I'm going to write more than 600 lines of code on two pages that are not very good, and this time I'm going to modularize it and make the necessary functions.

I'm creating a window module that can see the window function of egui, move it to the mouse cursor first, and erase it.
Somehow I managed to insert windows and other forms of ui into windows, but there was a problem in a very small part.

asset_server: Res is not functioning properly, perhaps because the environment is wasm-pack...
I don't think anyone loads the Assets folder from web-pack to the server, I've studied the basics of web-pack, but I have no idea how to approach this problem.

If you have experienced a similar problem or know how to solve it, I would appreciate it if you could answer me.
Have a great day!

This is my code.
(The font application has been temporarily removed due to unloaded assets.)

pub fn ui_spawn_window_color(
    commands: &mut ChildBuilder, 
    title: String,
    title_font: Handle<Font>,
    color: Color,
    w: Val,
    h: Val,
    l: Val,
    b: Val
) -> Entity{
    commands.spawn(
        (
            NodeBundle{
                style: Style{
                    width: w,
                    height: h,
                    left: l,
                    bottom: b,
                    position_type: PositionType::Absolute,
                    flex_direction: FlexDirection::Column,
                    ..default()
                },
                background_color: BackgroundColor(color),
                ..default()
            },
            Windows
        )
    )
    .with_children(|p|{
        p.spawn(
            NodeBundle{
                style: Style{
                    width: Val::Percent(100.),
                    height: Val::Px(15.),
                    justify_content: JustifyContent::SpaceBetween,
                    justify_items: JustifyItems::Stretch,
                    flex_direction: FlexDirection::Row,
                    ..default()
                },
                background_color: BackgroundColor(Color::GRAY),
                ..default()
            }
        )
        .with_children(|pp|{
            pp.spawn( //title
                (
                    ButtonBundle{
                        style:Style{
                            right: Val::Px(15.),
                            left: Val::Px(0.),
                            width: Val::Auto,
                            ..default()
                        },
                        ..default()
                    },
                    WindowsMoveButton
                )
            )
            .with_children(|ppp|{
                ppp.spawn(
                    TextBundle::from_section(
                        title, 
                        TextStyle {font_size: 10., color: Color::BLACK, ..default()}
                    ).with_background_color(Color::GRAY)
                );
            })
            ;
            pp.spawn( //remove button
                (
                    ButtonBundle{
                        background_color: BackgroundColor(Color::RED),
                        style: Style{
                            width:Val::Px(15.),
                            height: Val::Px(15.),
                            left:Val::Auto,
                            right: Val::Px(0.),
                            ..default()
                        },
                        ..default()
                    },
                    RemoveButton
                )
            );
        })
        ;
    }).id()
}

The code can be utilized as follows.

pub fn test_window_spawn(
    mut commands: Commands,
    asset_server: Res<AssetServer>
){
    let f = asset_server.load("fonts/NotoSansKR-VariableFont_wght.ttf");
    let mut e = Entity::from_bits(0); //a temporary assignment
    commands.spawn(
        NodeBundle{
            style: Style{
                width: Val::Percent(100.),
                height: Val::Percent(100.),
                ..default()
            },
            background_color: BackgroundColor(Color::BLACK),
            ..default()
        } //any entity
    ).with_children(|p|{
        e = ui_spawn_window_color(p, "Test".to_string(), f.clone(), Color::WHITE, 
        Val::Px(150.), Val::Px(150.), 
        Val::Px(10.), Val::Percent(20.));
    });
    
    commands.entity(e).with_children(|pp|{
        pp.spawn(
            TextBundle::from_section("this is test", TextStyle { font_size: 10., color: Color::BLACK ,..default()})
        );
        ui_spawn_window_color(pp, "Test2".to_string(), f.clone(), Color::BLUE, 
        Val::Px(100.), Val::Px(100.), 
        Val::Px(10.), Val::Px(10.));
    }); //It looks a little complicated... But it works
}

Screenshot

Thank you.

[dolto]

I found a solution.

The answer was not to load resources from a webpack, but to put asset folder in a static folder...

I didn't know the asset file would be uploaded to the server like this, but somehow it's resolved!