webpack4 H5 loading页图片预加载

Question

问题描述

H5图片比较多的项目,常规做法都需要做一个loading页，在进入H5之前就需要把所有图加载完，我以前的做法是再JS那里先写好每张图的路径，再用一个函数创建一个img标签来加载。
我开始学习用wepack4来构建项目了，不再用以前直接引用JQ就开干的做法，现在问题是在webpack的入口文件写图片路径是会报错的，在HTML里引入就没问题，用的url-loader只是打包时有用吧。

问题出现的环境背景及自己尝试过哪些方法

相关代码

以前预加载的代码

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()
    $('#container').show()  
    
})

//图片预加载
function perload2(imgSrc, callback) {
    var imgs = [];
    var c = 0;
    for (var i = 0; i < imgSrc.length; i++) {
        imgs[i] = new Image();
        imgs[i].src = imgSrc[i];
        imgs[i].onload = function () {
            c++
            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; //返回加载的图片列表，这个省略也没有问题
}

以前项目的效果图：

现在我webpack关于图片的配置

{ //处理图片
        test: /\.(png|jpg|gif|jpeg)/,
        use: [{
          loader: 'url-loader',
          options: {
            limit: 500,
            outputPath: 'img' //打包后图片的存放路径
          }
        }]
      },
      {
        test: /\.(htm|html)$/i,
        use: ['html-withimg-loader']
      },

你期待的结果是什么？实际看到的错误信息又是什么？

现在在main.js入口文件引入图片的报错信息：

不可能我每一张图片都应import引入吧，大家在用webpack做H5的时候，这个loading页的问题是怎么解决的？

文件目录：

Answer 1

等大佬来解答

Answer 2

目录层级看一下
不过应该能通过webpack的reslove配置来解决

Answer 3

你用js这样导入图片，webpack本地开发是没有你这个目录的，本地开发应该是也会打包出一个dist目录用于浏览器访问的，这个目录是你浏览器能访问的静态资源，像/img/...肯定没有这个目录的，而且img也有hash值，怎么样都不能对的。你试下这样？

var imgSrc = [
    require('./img/loading.png')
];

Answer 4

可以看下我的解决方案。现在是用一段node爬取文件夹收集图片生成js文件到项目中，再在index.js中引入动态创建标签引入这个js文件拿到图片列表，逐一请求，使后边用到的图片缓存。虽然解决了但是不美观，将来会修改成 在处理图片的部分 写个loader 收集使用的片 生成图片列表的json文件到 图片目录下。再通过plugin在html文件中写入预加载的js.https://github.com/outsourcin... 可以看下交流下。