多个网站 备案吗,打开网站不要出现 index.html,网站如何转做app,北京快三彩票app平台官网下载背景
Webpack 打包后的代码是不会直接暴露 __webpack_require__ 函数#xff0c;目的是为了避免污染全局变量同时也为了保护 webpack 的打包后的模块都隐藏在闭包函数里#xff0c;达到数据的安全性。
而有时我们为了测试某个函数#xff0c;想直接获取这个内置函数#…背景
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
