本篇文章给大家带来的内容是关于require.context的用法介绍（附示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
起因：为什么会突然用到webpack这个管理特性呢？
项目某个页面需要引入n张demo图片。即资源的批量引入：如果要引入10+个以上的图片资源，就需要写10+个如下的引入代码：import xxx from 'relative/path/assets/imgs/xxx';，那如果再多一点的静态资源需要引入呢？这时候require.context就派上了用场。
文档
官方文档的介绍先放在这里，可小觑一下，了解使用姿势。
栗子来一个
话不多说，针对上面的场景，我们上一下代码吧。
场景需要我们引入某个指定文件夹下的所有webp格式的图片，在单击demo1的时候展示demo1下的x张案例图，在单击demox的时候展示demox下的x张案例图。
// 通过require.context的方式引入指定的路径下匹配到的模块引用    const demoimgscontext = require.context('@src/assets/imgs/demo', false, /\.webp$/);    ...    // 使用姿势    trigger(type) {        this.demoimgs = arry.from({length: config.type}, (key, value) => value + 1)            .map(index => demoimgscontext(`./${type}_demo${index}.webp`));    }
举一反三的场景还有需要的么？
比如vuex引入多个module的store。也可以使用这个方法。
// 添加module文件是，文件命请按照module_xxx的方式命名    // 自动引入module文件夹下的js文件    const mutationcontext = require.context('./module', false, /.*\.js/);    const modules = mutationcontext.keys().reduce((prev, cur) => {        // 排除module_root文件        const matches = cur.match(/module_(?!.*root)(\w+)\.js/);        const key = matches && matches[1];        key && (prev[key] = mutationcontext(cur).default);        return prev;    }, {});
接下来，让我们看一下，require.context是如何做到动态引入资源的呢？
看下打包后的dist目录下，我们的静态图片案例chunk这个部分的代码是啥样的。
trigger方法中引用模块资源的代码如下，对y方法进行调用，传入了一个资源的路径。
map(function (e) {        return y(./.concat(t, _demo).concat(e, .webp))    })
那y方法是什么呢？顺藤摸瓜，继续看下打包后的代码。
y = a(ae36);
y方法是某个模块的export，继续查看这个id下的模块代码：
ae36: function (t, e, a) {      // 此处是一个map映射，key值和真正的资源id的映射      var i = {        ./a_module_demo1.webp: 6085,        ./a_module_demo2.webp: fd3b,        ./b_module_demo1.webp: cbf6,        ./b_module_demo2.webp: 220e,        ./c_module_demo1.webp: 273e,        ./c_module_demo2.webp: 5a5e,        ./d_module_demo1.webp: 75b0,        ./d_module_demo2.webp: 2d3e      };      // 此处根据module的id值，真正require一个资源      function r(t) {        var e = o(t);        return a(e)      }            function o(t) {        var e = i[t];        if (!(e + 1)) {          var a = new error(cannot find module ' + t + ');          throw a.code = module_not_found, a        }        return e      }      r.keys = function () {        return object.keys(i)      }, r.resolve = o, t.exports = r, r.id = ae36    },
6085，fd3b等map映射的value值可想而知，是真正的资源id值，其对应的模块映射如下：
6085: function (t, e) {      t.exports =        //${你配置的项目publicpath}/img/1_module_demo1.ed6db768.webp    },
当用户触发trigger方法时，根据type和index指定的值，require.context存储的模块资源引用会根据key值找到真正的资源模块，进行require，浏览器会帮助我们下载相应的资源，做到了批量引入后按需加载的想法。
本篇文章到这里就已经全部结束了，更多其他精彩内容可以关注的javascript视频教程栏目！
以上就是require.context的用法介绍（附示例）的详细内容。