研究了一下 Webpack 打包原理，顺手挣了个 AirPods Pro

这些年，Webpack 基本成了前端项目打包构建的标配。关于它的原理和用法的文章在网上汗牛充栋，大家或多或少都看过一些。我也一样，大概了解过它的构建过程以及常用 loader 和 plugin 的配置、性能优化方法等等，仅限于“面试够用”的程度。在实际工作中，往往是配置好后就放一边了，没有遇到问题是不会再碰它的。

我一直有个习惯(或者叫毛病)，就是不太愿意花时间去研究暂时用不上的技术。我称其为“屠龙之技”：学会了屠龙的技术，可是找不到龙啊。这样的技术没有实际应用来强化，过不了多久就会荒废的。也因为这个，之前面试吃过很多亏，毕竟由于平台所限，工作中根本接触不到某些方面的技术。不过话又说回来，为了面试也要去学，硬着头皮的那种。

扯远了，说回正题。前不久，网上有个哥们通过我的一篇博客找到我，让我帮他解决一个问题。这篇博客是关于如何在现有 Vue.js 项目里快速实现多语言切换的。他的项目也遇到同样的问题，但是他不懂代码，想付费求助。

按照我的方法，应该能很快完成需求。我大概估算了下工作量，报了个价。但是后面了解到的情况让我大跌眼镜：他的项目是打包好的，没有源码!说原来的开发不在了，也联系不上，找不到源码。要在没有源码的已有项目上加功能，写代码这么多年，还是第一次碰到。

我那篇文章的方案，是重写 Vue.prototype.__patch__ 方法，拦截 DOM 渲染过程，将翻译后的文本替换上去。面对一坨可读性极差的压缩代码，还怎么写下去?当时他还没付款，我本打算放弃了。直到晚上睡觉前，这个问题一直盘旋在脑海里，挥之不去。难道我的方案有这么大的局限性?很不服气啊!

没想到第二天，突然开窍了。这个问题的核心，不就是从压缩代码里找到 Vue 的引用吗?剩下的逻辑，都可以通过注入自己的 JS 代码来完成。

明确了这个思路，就开始了压缩代码挖掘之旅。我们都知道，Vue 项目在打包构建后，会在 HTML 文件里注入几个 JS 文件，大概像这样：

其中的 vendor.xxx.js 就包含了 Vue.js 框架代码。但我们知道，这样构建出来的代码肯定是用了闭包，各个模块都被作用域屏蔽了，window下是访问不到这些模块的。可以试试在控制台输入 Vue ，会提示Uncaught ReferenceError: Vue is not defined。

这个时候就需要研究 Webpack 是怎么打包的了。这里的关键在 manifest.js 文件，它是 Webpack 的运行时代码，定义了一个webpackJsonp函数，代码简化后是这样的：

 
 
 
 
      
  
  
  
  1. (function(modules) { 
    2.   
  
  
  
  2.   window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) { 
    3.   
  
  
  
  3.     var moduleId, result; 
    4.   
  
  
  
  4.     for (moduleId in moreModules) { 
    5.   
  
  
  
  5.       if (Object.prototype.hasOwnProperty.call(moreModules, moduleId)) { 
    6.   
  
  
  
  6.         modules[moduleId] = moreModules[moduleId]; 
    7.   
  
  
  
  7.       } 
    8.   
  
  
  
  8.     } 
    9.   
  
  
  
  9.     if (executeModules) { 
    10.   
  
  
  
  10.       for (i = 0; i < executeModules.length; i++) { 
    11.   
  
  
  
  11.         result = __webpack_require__(executeModules[i]); 
    12.   
  
  
  
  12.       } 
    13.   
  
  
  
  13.     } 
    14.   
  
  
  
  14.     return result; 
    15.   
  
  
  
  15.   }; 
    16.   
  
  
  
  16.   var installedModules = {}; 
    17.   
  
  
  
  17.  
    18.   
  
  
  
  18.   function __webpack_require__(moduleId) { 
    19.   
  
  
  
  19.     if (installedModules[moduleId]) { 
    20.   
  
  
  
  20.       return installedModules[moduleId].exports; 
    21.   
  
  
  
  21.     } 
    22.   
  
  
  
  22.     var module = installedModules[moduleId] = { 
    23.   
  
  
  
  23.       exports: {} 
    24.   
  
  
  
  24.     }; 
    25.   
  
  
  
  25.     modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 
    26.   
  
  
  
  26.     return module.exports; 
    27.   
  
  
  
  27.   } 
    28.   
  
  
  
  28. })([]); 
    29.

打包后就是通过这个函数来加载各个模块的。因此，只要找到 Vue 这个模块被打包后的 ID，就能通过它来获取。再看看vendor.xxx.js这个文件内容：

 
 
 
 
      
  
  
  
  1. webpackJsonp([38], { 
    2.   
  
  
  
  2.     "+abY": function(t, e, n) { 
    3.   
  
  
  
  3.         "use strict"; 
    4.   
  
  
  
  4.         n("DmDj")("sup", function(t) { 
    5.   
  
  
  
  5.             return function() { 
    6.   
  
  
  
  6.                 return t(this, "sup", "", "") 
    7.   
  
  
  
  7.             } 
    8.   
  
  
  
  8.         }) 
    9.   
  
  
  
  9.     }, 
    10.   
  
  
  
  10.     "+fX/": function(t, e, n) { 
    11.   
  
  
  
  11.         var r = n("awYD") 
    12.   
  
  
  
  12.           , i = n("JE6n") 
    13.   
  
  
  
  13.           , o = n("0U5H")("match"); 
    14.   
  
  
  
  14.         t.exports = function(t) { 
    15.   
  
  
  
  15.             var e; 
    16.   
  
  
  
  16.             return r(t) && (void 0 !== (e = t[o]) ? !!e : "RegExp" == i(t)) 
    17.   
  
  
  
  17.         } 
    18.   
  
  
  
  18.     }, 
    19.   
  
  
  
  19.   "IvJb": function(t, e, n) { 
    20.   
  
  
  
  20.       // 这就是 Vue 框架代码 
    21.   
  
  
  
  21.   } 
    22.   
  
  
  
  22. ) 
    23.

可以看到各个模块就是一个个的function。通过 Vue 框架里的一些关键字搜索，找到了 Vue 打包后的 ID 是IvJb。因此只要调用webpackJsonp函数就能获取 Vue变量：

 
 
 
 
      
  
  
  
  1. var vue = webpackJsonp([], {}, ['IvJb']); 
    2.   
  
  
  
  2. var __patch__ = vue.default.prototype.__patch__; 
    3.   
  
  
  
  3. vue.default.prototype.__patch__ = function () { 
    4.   
  
  
  
  4. var elm = __patch__.apply(this, arguments); 
    5.   
  
  
  
  5.   var lang = getUrlParam('lang') 
    6.   
  
  
  
  6.   if (lang) { 
    7.   
  
  
  
  7.     //翻译DOM里的文本 
    8.   
  
  
  
  8.     translate(elm, lang); 
    9.   
  
  
  
  9.   } 
    10.   
  
  
  
  10.   return elm; 
    11.   
  
  
  
  11. }; 
    12.

关键问题解决了!通过同样的办法，还可以获取 axios ，把 axios 的baseUrl 改成了完整路径方便本地调试。剩下的工作就简单了，一是多语言文件文字翻译，那都是体力活，就交给那哥们自己干了。二是加一个语言切换菜单，这个也不难，原生 DOM 操作而已，再稍微调下样式就搞定了。

前前后后花了不到一天时间，完成了这个看似不可能的任务。由此可见，了解工具和框架的底层原理，对于解决特定问题有着决定性的作用。

当然，Webpack 功能非常强大，底层逻辑比这里说的复杂多了，我也没有继续深入研究。或许下次碰到问题时又是一次契机呢。

本文转载自微信公众号「1024译站」，可以通过以下二维码关注。转载本文请联系1024译站公众号。

网页标题：研究了一下 Webpack 打包原理，顺手挣了个 AirPods Pro
链接分享：http://www.shufengxianlan.com/qtweb/news3/347803.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

做网站知识

分类信息网

广东帝美豪门窗　　 　注册域名　　 　小谭建站　　 　定制级高端网站建设　　 　平昌做网站　　 　企业网站建设公司　　 　成都温江机房　　 　小程序开发　　 　外贸网站设计方案　　 　资中网站建设　　 　响应式网站建设　　 　做网站的公司　　 　等级保护测评　　 　古蔺网站建设　　 　SSL认证　　 　玄科环保　　 　搜索引擎优化　　 　微信公众号二次开发　　 　重庆水土机房托管　　 　腾讯免备案空间