前言
通过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,这样的看似随机字符串的下标是如何生成的,怎样避免这样的问题发生?