研究了一下 Webpack 打包原理

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

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

扯远了，说回正题。前不久，网上有个哥们通过我的一篇博客找到我，让我帮他解决一个问题。这篇博客是关于如何在现有 Vue.js 项目里快速实现多语言切换的。他的项目也遇到同样的问题，但是他不懂代码，想付费求助。照我的方法，应该能很快完成需求。我大概估算了下工作量，报了个价。但是后面了解到的情况让我大跌眼镜：他的项目是打包好的，没有源码!说原来的开发不在了，也联系不上，找不到源码。要在没有源码的已有项目上加功能，写代码这么多年，还是第一次碰到。

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

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

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

（编辑：宁德站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!