How to enqueue scripts properly with ES6 webpack?

Question

I'm trying to create a page preloader.

It depends on images loads and will show progress in percent.

I'm using imagesLoaded and gsap plugins.

You can see code here in codepen.

In codepen everything working perfect, if you slow down your network, you will see how images loading in percent.

And I tried to implement this for my wordpress theme:

function _themename_assets() {
    wp_enqueue_style( '_themename-stylesheet', get_template_directory_uri() . '/dist/assets/css/bundle.css', array(), '1.0.0', 'all' );
    wp_enqueue_script( '_themename-scripts', get_template_directory_uri() . '/dist/assets/js/bundle.js', array('jquery'), '1.0.0', true );
}
add_action('wp_enqueue_scripts', '_themename_assets');

And inside bundle js I importing my plugins like this:

import $ from "jquery";
import { TweenMax, TimelineMax } from "gsap";
import imagesLoaded from 'imagesloaded';

then exactly the same code from my codepen,

actually it's working, but not like in codepen.

It seems that scripts starts to work only when document ready,

So it looks like: black screen, waiting for all documents loaded, then my script starts to work, but everything is loaded so it hasn't any pause, it just speed from 0% to 100%, without any delays.

I'm newbie in Wordpress, and can't understand what am I doing wrong?

I know it's a hard question, especially in my explanation, so I will be glad to any advice.

Thanks in advance!