这些年来，Webpack基本已经成为打包构建前端项目的标准配置。网上关于它的原理和用法的文章很多，大家或多或少都看过一些。我也是这样。大致了解了它的构建过程，常用的加载器和插件的配置，性能优化的方法等等，只是到了“面试就够了”的程度。实际工作中，往往配置完就搁置一旁，没问题就不会再碰了。我一直有个习惯（或者说是毛病），就是不愿意花时间研究暂时得不到的技术。我称之为“屠龙之术”：我学会了屠龙之术，但是找不到龙。如果没有实际应用来加强这种技术，它将在短时间内被废弃。也正是因为如此，我之前面试的时候吃了不少苦头。毕竟，由于平台的限制，我在工作中无法接触到某些方面的技术。不过话又说回来了，为了面试还是要学习的，硬着头皮上的那种。扯远了，言归正传。前不久，网上有个小伙伴通过我的一个博客找到了我，让我帮他解决一个问题。这篇博客是关于如何在现有的Vue.js项目中快速实现多语言切换。他的项目也遇到了同样的问题，但是看不懂代码，想付费求助。按照我的方法，需求应该很快就完成了。我粗略估计了工作量，报了个价。但是后来了解到的情况却让我大吃一惊：他的项目被打包了，而且没有源码！他说原来的开发没了，联系不上他，也找不到源代码。在没有源码的情况下，写代码给现有项目添加功能这么多年，还是第一次遇到。我文章中的解决方案是重写Vue.prototype.__patch__方法，拦截DOM渲染过程，替换翻译后的文本。面对一堆可读性极差的压缩代码，我该如何继续写下去？当时他还没付钱，我就打算放弃了。这个问题一直在我脑海里盘旋，直到晚上睡觉，挥之不去。我的计划有这么大的限制吗？我很不服气！没想到第二天，我就豁然开朗了。这个问题的核心不是从压缩代码中找到vue引用吗？剩下的逻辑可以通过注入自己的JS代码来完成。理清了这个思路之后，我们就开始了压缩代码挖掘之旅。我们都知道，Vue项目打包构建后，会在HTML文件中注入几个JS文件，大致是这样的：vendor.xxx.js包含了Vue.js框架代码。但是我们知道这样构造的代码必须使用闭包，并且每个模块都被scope屏蔽了，在window下是无法访问到这些模块的。可以尝试在控制台输入vue，会提示UncaughtReferenceError:Vueisnotdefined。这时候就需要研究一下Webpack是如何打包的了。这里的关键是manifest.js文件，它是Webpack的运行时代码。它定义了一个webpackJsonp函数。简化的代码如下所示：moduleId)){modules[moduleId]=moreModules[moduleId];}}if(executeModules){for(i=0;i
