本篇文章给大家带来的内容是关于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，浏览器会帮助我们下载相应的资源，做到了批量引入后按需加载的想法。
本篇文章到这里就已经全部结束了，更多其他精彩内容可以关注PHP中文网的JavaScript视频教程栏目！
以上就是require.context的用法介绍（附示例）的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2732005.html
