编写一个webpack loader,用于获取指定目录下的图片,返回图片URL数组

前言

经常遇到这么一个问题。做h5项目图片资源预加载的时候,我们往往需要手动的拿到一个个图片地址存在数组里面,然后再对其遍历做预加载处理,比如这样:

let imgList = ['http://domain.com/img/1.jpg','http://domain.com/img/2.jpg','http://domain.com/img/3.jpg',...];

本着能偷懒就偷懒的心态,我们可以编写一个webpack loader来处理,然后给我们返回这样一个数组。

预期在页面上这样调用,获取项目目录下的img文件夹的图片,给返回一个URL数组。

let imgList = __getPath('img');
原理

代码量很少,其实原理也比较简单,使用正则匹配__getPath('img')获得图片所在的文件夹名称,然后拿到图片的相对路径,require,再将其拼接字符返回,如:

[require("img/1.jpg"),require("img/2.jpg"),require("img/3.jpg"),...]

最终return的content会被执行,然后就返回了图片的URL数组。

const fs = require("fs")
const path = require('path');
const glob = require('glob');

module.exports = function (content) {
    let fileReg = /__getPath\(([^\)]+)\)/gim;
    let rootPath = path.join(this.options.context, "/src"); //项目下的src路径
    let filepath = this.context;//当前处理文件的所在目录
    //console.log(this.options.context)
    //console.log(filepath)
    content = content.replace(fileReg, (ret, src) => {
        let pathName = src.replace(/'|"/g, "");
        let resList = glob.sync(path.join(rootPath, pathName) + "/*");
        let result = '[';
        for (let i = 0; i < resList.length; i++) {
            let respath = path.relative(filepath, resList[i]).replace(/\\/g, "/") //图片相对路径
            result += "require('" + respath + "')" + ","
        }
        result = result.substr(0,result.length-1) + "]";
        return result;
    })
    return content;
}

我将其命名为imgurl-loader发布到npm上了。

npm install --save-dev imgurl-loader

源码:https://github.com/xiaojiecong/imgurl-loaderDemo:https://github.com/xiaojiecong/imgurl-loader-demo

(如果可以帮到大家,可以star一下o( ̄︶ ̄)o)

原文链接:segmentfault.com

上一篇:9个项目助你在2020年成为前端大师!
下一篇:使用 JS 及 React Hook 时需要注意过时闭包的坑(文中有解决方法)

相关推荐

官方社区

扫码加入 JavaScript 社区