浏览器webpack半自动扣取代码

浏览器webpack半自动扣取代码：

学会使用浏览器扣取webpack代码

学习内容：

1. 浏览器扣取全部webpack

• 1. 找到webpack的加载器位置

// 在window上面定义一个对象
window.call_ = {};
// 找到webpack的加载器
function p(e) {
    if (r[e]){
		return r[e].exports;
    }
    var t = r[e] = {
        i: e,
        l: !1,
        exports: {}
    };
    // 当我们刷新网站的时候，自动保存函数
	call_[e] = u[e].toString();
    return u[e].call(t.exports, t, t.exports, p),
    t.l = !0,
    t.exports
}
// 当我们运行完整的时候我们输出window.call_就获取到了我们的webpack代码

• 我们控制台输出打印我们加载的函数
  

总结

• 这种方式扣取的函数太多
• 会扣取到我们不需要的函数

2. 浏览器扣取我们需要的webpack代码

• 1. 找到webpack的加载器位置

// 找到webpack的加载器
window.call_ = {};
 isload = false;// 当到达我们条件的时候我们设置为true
 function p(e) {
     if (r[e]){
          // 我们这个地方进行修改,我们需要的方法在调用之前已经加载过,所以我们在这个位置进行获取所需函数
         if(call_[e]){ // 我们判断是否存在
             return r[e].exports;           // 如果存在直接导出
         }else{
             call_[e] = u[e].toString();  // 不存在我们保存代码，然后在重新导入这个函数     
             delete r[e] // 重新加载
         }
     }
     var t = r[e] = {
         i: e,
         l: !1,
         exports: {}
     };
     if(!isload && e===214){
         isload = true;
     }
     if(isload){
        call_[e] = u[e].toString();// 满足条件我们进行加载代码
     }
     return u[e].call(t.exports, t, t.exports, p),
     t.l = !0,
     t.exports
 }

• 我们在加载器的位置打一个条件断点，当e===214,调试进入是否是我们需要的函数

总结

1. 我们查看两种方式所加载的函数的个数对比
2. 加载的函数还需要进一步处理,toString里面的函数都进行了转义，如何不进行转义呢?
3. 我们加载的函数进行加载到加载器里面，进行调用即可
4. 首次写帖，有什么改进的地方望提出建议