problem description

H5 pictures of more projects, the general practice is to do a loading page, before entering the H5 need to load all the images, my previous practice is to JS there to write the path of each picture, and then use a function to create an img tag to load.
I began to learn to use wepack4 to build a project. Instead of using the previous practice of directly quoting JQ to dry, the problem now is that writing an image path in the entry file of webpack will report an error. It is no problem to introduce it in HTML. The url-loader used is only useful for packaging.

the environmental background of the problems and what methods you have tried

related codes

previously preloaded code

var imgSrc = [
    "img/loading.png",
    "img/banner.jpg",
    "img/t1.png",
    "img/t2.png",
    "img/t3.png",
    "img/t4.png",
    "img/p1-text1.png",
    "img/p1-text2.png",
    "img/p1.jpg",
    "img/flag.png",
    "img/play.png",
    "img/p2-p1.png",
    "img/p2-p2.png",
    "img/p2-p3.png",
    "img/p2-p4.png",
    "img/p2-t1.png",
    "img/p2-t2.png",
    "img/p2-t3.png",
    "img/p2-t4.png",
    "img/p2-tc.png",
    "img/p2-text1.png",
    "img/p2-text2.png",
    "img/p3-text1.png",
    "img/p3-text2.png",
    "img/p3-text4.png",
    "img/p3-text3.png",
    "img/p3-text5.png",
    "img/p4-bottom.png",
    "img/p4-text1_2.png",
    "img/p4-text2.png",
    "img/poster-2.png"
];

perload2(imgSrc, function () {
    $(".loading").hide()
    $("-sharpcontainer").show()  
    
})

//
function perload2(imgSrc, callback) {
    var imgs = [];
    var c = 0;
    for (var i = 0; i < imgSrc.length; iPP) {
        imgs[i] = new Image();
        imgs[i].src = imgSrc[i];
        imgs[i].onload = function () {
            cPP
            var num = parseInt((c / imgSrc.length) * 100);
            var poress = num + "%"
            $(".loading_num").text(poress) //
            if (c == imgSrc.length) {
                $(".loading_num").text("100%")

                if (callback) {
                    setTimeout(function () {
                        callback();
                    }, 500)
                }
            }
        }
    }
    return imgs; //
}

effect of previous projects:

webpack

main.js:

importwebpackH5loading

: