问诊webpack：从何而来去往何处
2022-04-27 12:48:38
杨高尚——转转集团深圳前端有劲人。15年正在北京参加草创的转转公司，曾任转转APP（数百万DAU）的客户端技巧专家，有劲客户端架构及新技巧找寻事情。19年起，切入前端技巧规模，现任前端高级技巧专家，有劲集团正在深圳侧的前端团队。目前紧要尽力于前端和客户端技巧协调正在功能、体验、本钱上的找寻和施行。
webpack是一个很重的话题，网上闭于怎样写筑设、怎样写loader、写plugin的著作一搜一堆。以至业内为了嘲弄webpack筑设的丰富性，出现确一个工种“webpack筑设工程师”。怎样写筑设、loader、plugin，正在我看来是一种“查阅性常识”。用的光阴，能敏捷查到，无须的光阴，真记不住。
不过倘若对webpack的相识仅仅停止正在这个层面，总感到和webpack依然很生疏，和webpack之间依旧搁着一层看不睹、摸不着的面纱。
这层“面纱”背后是什么？小编认为该当是宏观层面临webpack计划理念的认知。如webpack从何而来、要处理什么题目、怎样处理这些题目，来日怎样演变等等。不过，倘若运用百度或者谷歌搜求“webpack 计划理念”，你会察觉，得不到太众内容，坦直讲，简直没有。
感观上来讲，webpack和node.js八竿子打不着。不过，将再生事物的成立，放正在它所属的汗青境遇下去看，就会察觉中央尚有些奇怪的因果相闭。
通过上图的颜色能够区别为三大生态，一是以粉血色为代外的JS模块化发扬门途。另一个是橙色为代外的node.js生态扩张门途。最终一个是以橘血色为代外的webapck。
由上述可睹，webpack作家看到node.js生态中存正在着大方的js代码，却不也许被浏览器端复用。以是就萌生了思把基于CommonJS榜样的模块化代码，打包成也许被script加载的模块。以是，说一句webpack缘起于node.js该当是只是分的。
倘若咱们从webpack的官方文档去明白它，会察觉它具备的性能至极众。ts加载、图片加载、sourcemap、代码压缩、代码盘据、热加载、treeshaking等等....
终归哪一个才是webpack的中枢性能？终归哪里才是webpack的扩张畛域？岂非跟着版本的迭代，webpack的性能会向来无节制地膨胀下去吗？指引作家背后的发扬思绪，终归是什么？
原本上述各种疑义，早正在作家写的第一个commit中的package.json文献中作过说明：
只是跟着前端技巧生态的一直演化和强盛，涌现了许众新的名堂：ts、vue、electron、es6等等。为了应对这些新的趋向，webpack的生态也一直往前发扬、扩张。不过，依然那句话，无论webpack怎样发扬、扩张，初心向来未改，向来都是潜心于“打包”。当然，为了让“打包”这个事件更浅易、安逸。webpack顺带处理了许众“打包”必要的周边小性能。譬喻代码盘据、按需加载、CDN加快、treeshaking等等。
起初，得思举措把浏览器无法直接识其余vue、ts等文献，转换成能够被相识的js文献。此外，倘若一个vue、ts模块中援用了其它模块，得思举措通过理会取得他们的依赖相闭，然后把他们打包正在一块。
原本，思到以上三点，就一经能够触及到webpack的计划精神了。webpack作家正在最初计划的光阴，必要处理的中枢题目，原本也基础是上述三点。不过，大凡人和大神之间的区别是，大凡人也便是思一思。而大神却能够给出一个堪称完满且也许经受时代检验的架构计划，处理上述题目。
为明白决上述三个题目。起初webpack作家提出一个构想“万物皆module”。无论是js代码文献、依然各式图片资源，最终都用“module”的观点将之归拢。作家也通过“module”的观点，将各式丰富庞杂的文献类型，拉齐到了一个平等的相闭轴上。
其次，webpack作家通过计划了以下4个观点：Entry、Output、Loaders、Plugins，为webpack告终了一个构造明显、性能怒放、能够陆续迭代的的架构计划。
这几个观点，咱们正在筑设webpack时时常遭遇。但往往只是瞎子摸象，得其片面，而不得其整个。为了加深对这4个观点剖析的整个性，咱们再画一张图，再现webpack作家的计划思绪。
同时，由于Plugins和Loaders是对外怒放的计划，以是保障了webpack具有陆续的矫健性。倘若用一句话点评webpack的架构计划的话，那便是：简明而宽裕性命力。
倘若说“打包”是webpack第一中枢的才气，那么“拆包（代码盘据）”便是webpack第二中枢的才气。原本这个真理很好剖析。“打包”和“拆包（代码盘据）”向来便是一对共生体，倘若webpack仅仅只闭切于“打包”，那么最终出来的“包”也可以会由于体积太大而不适用。
倘若咱们深入剖析了为什么会有webpack以及webpack终归处理什么题目时，就会察觉正在出名软件中，原本webpack并没有所谓的“竞品”。
产物定位是打通node.js与浏览器端JS代码资源的模块打包器。固然，现正在webpack的loader和plugin性能让它看起来无所不行，不过webpack对本人是个模块打包器的定位永远没有改观。看起来壮健，只是webpack怒放性计划带来的出格好处。
是一个工作履行者，有大方现成的插件封装了常睹的工作，也能管制工作之间的依赖相闭，自愿化履行依赖的工作。
webapck性子是模块打包器，由于其怒放性计划，刚好能够做少许修建器械的事情；Grunt是纯粹的工作履行者；Gulp的定位才是修建器械。
奈何说呢，webpack误打误撞，侵入了其它产物的对象规模。但webapck的初志永远没变。最终，再来回味一下webpack官网的这句话：
6月10-11日，即将于深圳举办的2022K+环球软件研发行业立异峰会特邀杨高尚，为众人带来“转转圭臬webview修理之途”中心演讲。返回搜狐，查看更众