Webpack系列-require.context

webpack中引入依赖模块都是通过import/require关键字

如：
import A from "./a.js";
或
var A=require("./a.js");

但是这种引入方式只能引入单个文件，无法引入目录下多个文件。
而我们是实际存在需要引入目录下多文件的场景。

如：
做H5处理加载页时，需要加载相关的所有图片文件
如果用单文件，我们得写很多文件路径:
import "./img/a.jpg"
import "./img/a1.jpg"
import "./img/a2.jpg"
import "./img/a3.jpg"
....

很明显我们得寻找批量引入目录文件的方法

webpack提供了require.context来引入目录文件

语法： require.context(directory, useSubdirectories = false, regExp = /^.//);
directory {String} -读取文件的路径

useSubdirectories {Boolean} -是否遍历文件的子目录

regExp {RegExp} -匹配文件的正则

具体使用webpack来处理图片加载如下：
var ctx=require.context("./img",true);
var imgPath=[];
ctx.keys.forEach(function(key){
    imgPath.push(ctx(key))
});

现在imgPath就存放着img目录下所有图片路径，我们可以自定义loader来做加载：
var Loader={
    loadNum:0,
    loadEndNum:0,
    queue:[],
    event:{},
    on(type,fn){
        var _self = this;
        (_self.event[type]||( _self.event[type]=[])).push(fn)
        return _self;
    },
    trigger(type){
        var _self=this,event=_self.event[type];
        if(event){
            for(var index=0,len=event.length;index<len;index++){
                event[index].call(_self)
            }
        }
    },
    load(queue){
        var _self = this;
        _self.loadNum=queue.length;
        _self.loadEndNum=0;
        _self.queue=queue;
        _self.event={};
        _self.start();
        return _self;
    },
    start(){
        var _self = this;
        for(var index=0,len=_self.queue.length;index<len;index++){
            _self.loadItem(_self.queue[index]);
        }
    },
    loadItem(item){
        var _self = this;
        switch(item.type||""){
            default:
                _self.loadImage(item);
                break;
        }
    },
    loadImage(item){
        var _self=this,img=$('<img>');
        img.on("load",function(e){
            _self.progress();
        });
        img.on("error",function(e){
            _self.progress();
        });
        img.attr("src",item)
    },
    progress(){
        var _self = this,loadPercent=0;
        _self.loadEndNum++;
        _self.loadPercent=parseInt(_self.loadEndNum/_self.loadNum*100,10);
        _self.trigger("progress");
        if(_self.loadEndNum>=_self.loadNum){
            _self.complete();
        }
    },
    complete(){
        var _self = this;
        _self.trigger("complete")
    }
}

Loader.load(imgPath)