__webpack_require__(moduleId) not found the module

1,603 阅读1分钟

前言

通过webpack4进行打包,代码中使用了dynamc import

React.lazy(() => import(/* webpackChunkName:'RandomChunk' */ './random'))

描述

如标题,webpack打包后,通过__webpack_require__调用chunck的时候,传递了moduleId,此时moduleId为一个数字,即modules数组的下标。

问题

在__webpack_require__内部执行到modules[moduleId].call(module.exports, module, module.exports, __webpack_require__)

modules数组中找不到对应下标moduleId的模块函数,导致call调用失败

报错信息

TypeError: Cannot read property 'call' of undefined

modules信息

[0 … 99]
[100 … 199]
[200 … 299]
[300 … 399]
[400 … 499]
[500 … 600]
[601 … 700]
[701 … 800]
[801 … 900]
[901 … 1000]
[1001 … 1100]
[1101 … 1974]
[1975 … 3654]
0Cz8: ƒ (t,e,n)
0XPj: ƒ (t,e,n)
0sh+: ƒ (t,e,n)
0ycA: ƒ (t,e)
1+5i: ƒ (t,e,n)
1DUX: ƒ (t,e,n)
1MBn: ƒ (t,e,n)
1TsA: ƒ (t,e)
1hJj: ƒ (t,e,n)


疑问

modules数组中很多的下标都变成了看似随机数的东西,通过modules['1hJj'] 这样的方式能正确的拿到chunck,这样的看似随机字符串的下标是如何生成的,怎样避免这样的问题发生?