require.context的用法介绍(附示例)


当前第2页 返回上一页

trigger方法中引用模块资源的代码如下,对y方法进行调用,传入了一个资源的路径。

1

2

3

map(function (e) {

    return y("./".concat(t, "_demo").concat(e, ".webp"))

})

那y方法是什么呢?顺藤摸瓜,继续看下打包后的代码。

1

y = a("ae36");

y方法是某个模块的export,继续查看这个id下的模块代码:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

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值,其对应的模块映射如下:

1

2

3

4

6085: function (t, e) {

      t.exports =

        "//${你配置的项目publicPath}/img/1_module_demo1.ed6db768.webp"

    },

当用户触发trigger方法时,根据type和index指定的值,require.context存储的模块资源引用会根据key值找到真正的资源模块,进行require,浏览器会帮助我们下载相应的资源,做到了批量引入后按需加载的想法。

本篇文章到这里就已经全部结束了,更多其他精彩内容可以关注PHP中文网的JavaScript视频教程栏目!

以上就是require.context的用法介绍(附示例)的详细内容,更多文章请关注木庄网络博客

返回前面的内容

相关阅读 >>

详解css和js动画底层原理及如何优化它们的性能

ie中javascript错误有哪些

如何理解javascript是动态语言

foreach()、array.map()和array.filter()怎么用?(代码示例)

python为什么像javascript

jsp与javascript区别有哪些

javascript怎么去掉a标签

javascript的引入方式有哪三种

javascript获得元素的方法

jquery javascript ajax区别是什么

更多相关阅读请进入《webpack》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...