【含代码】逆向获取 webpack chunk 下的__webpack_require__ 函数，获悉所有的模块以及模块下的函数

背景

Webpack 打包后的代码是不会直接暴露 __webpack_require__ 函数，目的是为了避免污染全局变量同时也为了保护 webpack 的打包后的模块都隐藏在闭包函数里，达到数据的安全性。

而有时我们为了测试某个函数，想直接获取这个内置函数，同时保证这个内置函数能使用其所带的上下文，若单独构建这个函数，创建上下文，难度非常之大，因为这个函数的上下文都在闭包函数里。

而__webpack_require__.m 则可以提取所有的模块，所以拿到 __webpack_require__ 是关键。

源码

海南酷森科技有限公司/webpack-simple-demo - Gitee.com

以下内容均在webpack 4/5 有效，csdn有webpack 1/2的方式，因很少有企业用，这里不做任何探讨

怎么获取一个 webpack 对外暴露的一个全局对象？

对外暴露的全局变量是关键，在普通的 webpack 打包过程中，如果不采用分片技术，就不需要模块化构建，但一般的 web 网页开发，必然要使用模块化构建，如下图关闭后，就是全封闭的概念，几乎不对外暴露任何东西

分片配置关闭状态下，打包后的代码不暴露任何变量，全部都在闭包函数里

这类函数想要单独测试基本无法实现，因为完全是闭包状态，如果想测试，你必须侵入式追加代码，这里不做探讨，留待后续集中处理。

开启分片开关后，我们会发现在打包代码的开头会有 webpackChunk[ProjectName] 这样的全局变量追加在 window 变量下

在 devtools 控制台打印会发现其中 jquery 这个模块被 chunk 了

因为 webpack 把 require 写在闭包里面了，怎么将这个 require 引出来？从 webpack 对于 push 函数的 hook 方式获取

这里先写了 webpackJsonpCallback 回调函数，然后将原函数 chunkLoadingGlobal.push 作为第一参数传进去，重新构建一个新函数，这样调用原函数 push 时，就被 webpackJsonpCallback hook 了，也即能拿到 push 时的 data 数据，还能将原 push 函数作为 parentChunkLoadingFunction(data) 进行执行，这种不侵入原函数的 hook 技术非常有意思。

附带 bind 函数的讲解

// 改变this上下文
const obj = { name: 'Alice' };
function greet() {console.log(this.name);
}const greetBound = greet.bind(obj);
greetBound();  // 输出 'Alice'//预设参数 构建新函数
function add(a, b) {return a + b;
}const add5 = add.bind(null, 5);
console.log(add5(10));  // 输出 15

webpackJsonpCallback.bind 则构建了一个新的函数，并把原 push 作为参数parentChunkLoadingFunction 预设参数传递进webpackJsonpCallback 第一个参数，同时构建了一个新函数给了 chunkLoadingGlobal.push，这样 push 重新赋值的函数没有任何影响，仍然传实参 data 进来。

获取 __webpack_require__

通过上面的技术，我们只需要触发一次 push，传入一个对象，同时对象第三个属性为函数，那么这个函数接受到的实参就是__webpack_require__

具体代码,通过这么简单的一段代码，我们就把__webpack_require__ 这类私有变量变成了挂载到 window，成为公共变量

const id = Date.now();
window.webpackChunkwebpack_demo.push([[id], {}, (__webpack_require__)=>{webpackRequire = __webpack_require__;
}
]);

__webpack_require__.m

这个变量挂着所有的 modules

webpackRequire(692) 可以获取模块

还可以调用模块下的内置函数，这是不是方便很多，不过要想分清楚模块下是哪个模块，目前还在探索

目前只找到一种保留名称的，但是名称仍然不太让人满意，有路径，有些企业可以做到没有路径的，看起来应该是用插件来实现的

对于数字作为 key 的，可以通过遍历所有模块用正则表达式快速查找

const mediaFunctionRegex = /\s+(\w+)\s*\(.*(jquery).*?\)/g;// 遍历模块源代码，查找符合条件的函数
const mediaFunctions = [];
for (const moduleId in webpackRequire.m) {const module = webpackRequire.m[moduleId];const moduleSource = module.toString();console.log(moduleSource);let match;if ((match = mediaFunctionRegex.exec(moduleSource)) !== null) {mediaFunctions.push({moduleId,functionName: match[1],fullMatch: match[0],});}
}console.info(mediaFunctions);

有些模块需要二次获取，或者在结尾加 __webpack_require__(692).default