1.手写webpacktapable源码，打打包官方tapable的包源性能真的就一定是好的吗？
2.webpack的打包原理是什么
3.webpack打包原理 ? 看完这篇你就懂了 !
4.WebPack插件实现：打包之后自动混淆加密JS文件
5.webpack 4 源码主流程分析（十一）：文件的生成

手写webpacktapable源码，官方tapable的源码性能真的就一定是好的吗？

       完整的手写源码仓库

       tapable是Webpack?插件机制核心。?泄漏mini-tapable?不仅解读官方?tapable?的源码，还用自己的打打包思路去实现一遍，并且和官方的包源thinkphp l函数源码运行时间做了个比较，我和webpack作者相关的源码讨论可以点击查看。webpacktapable源码内部根据newFunction动态生成函数执行体这种优化方式不一定是泄漏好的。当我们熟悉了tapable后，打打包就基本搞懂了webpackplugin的包源底层逻辑，再回头看webpack源码就轻松很多

目录

       src目录。源码这个目录下是泄漏手写所有的tapablehook的源码，每个hook都用自己的打打包思路实现一遍，并且和官方的包源hook执行时间做个对比。

tapable的源码设计理念：单态、多态及内联缓存

       由于在webpack打包构建的过程中，会有上千(数量其实是取决于自身业务复杂度)个插件钩子执行，同时同类型的钩子在执行时，函数参数固定，函数体相同，因此tapable针对这些业务场景进行了相应的优化。这其中最重要的是运用了单态性及多态性概念，内联缓存的原理，也可以看这个issue。为了达到这个目标，tapable采用newFunction动态生成函数执行体的方式，主要逻辑在源码的HookCodeFactory.js文件中。

如何理解tapable的设计理念

       思考下面两种实现方法，哪一种执行效率高，linux源码怎么读哪一种实现方式简洁？

//方法一：constcallFn=(...tasks)=>(...args)=>{ for(constfnoftasks){ fn(...args)}}//方法二：constcallFn2=(a,b,c)=>(x,y)=>{ a(x,y);b(x,y);c(x,y);}

       callFn及callFn2的目的都是为了实现将一组方法以相同的参数调用，依次执行。很显然，方法一效率明显更高，并且容易扩展，能支持传入数量不固定的一组方法。但是，如果根据单态性以及内联缓存的说法，很明显方法二的执行效率更高，同时也存在一个问题，即只支持传入a，b，c三个方法，参数形态也固定，这种方式显然没有方法一灵活，那能不能同时兼顾效率以及灵活性呢？答案是可以的。我们可以借助newFunction动态生成函数体的方式。

classHookCodeFactory{ constructor(args){ this._argNames=args;this.tasks=[];}tap(task){ this.tasks.push(task);}createCall(){ letcode="";//注意思考这里是如何拼接参数已经函数执行体的constparams=this._argNames.join(",");for(leti=0;i<this.tasks.length;i++){ code+=`varcallback${ i}=this.tasks[${ i}];callback${ i}(${ params})`;}returnnewFunction(params,code);}call(...args){ constfinalCall=this.createCall();//将函数打印出来，方便观察最终拼接后的结果console.log(finalCall);returnfinalCall.apply(this,args);}}//构造函数接收的arg数组里面的参数，就是taska、b、c三个函数的参数constcallFn=newHookCodeFactory(["x","y","z"]);consta=(x,y,z)=>{ console.log("taska:",x,y,z);};constb=(x,y,z)=>{ console.log("taskb:",x,y,z);};constc=(x,y,z)=>{ console.log("taskc:",x,y,z);};callFn.tap(a);callFn.tap(b);callFn.tap(c);callFn.call(4,5,6);

       当我们在浏览器控制台执行上述代码时：

       拼接后的完整函数执行体：

       可以看到，通过这种动态生成函数执行体的方式，我们能够同时兼顾性能及灵活性。我们可以通过tap方法添加任意数量的任务，同时通过在初始化构造函数时newHookCodeFactory(['x','y',...,'n'])传入任意参数。

       实际上，这正是网上申报系统源码官方tapable的HookCodeFactory.js的简化版本。这是tapable的精华所在。

tapable源码解读

       tapable最主要的源码在Hook.js以及HookCodeFactory.js中。Hook.js主要是提供了tap、tapAsync、tapPromise等方法，每个Hook都在构造函数内部调用consthook=newHook()初始化hook实例。HookCodeFactory.js主要是根据newFunction动态生成函数执行体。

demo

       以SyncHook.js为例，SyncHook钩子使用如下：

const{ SyncHook}=require("tapable");debugger;consttesthook=newSyncHook(["compilation","name"]);//注册plugin1testhook.tap("plugin1",(compilation,name)=>{ console.log("plugin1",name);compilation.sum=compilation.sum+1;});//注册plugin2testhook.tap("plugin2",(compilation,name)=>{ console.log("plugin2..",name);compilation.sum=compilation.sum+2;});//注册plugin3testhook.tap("plugin3",(compilation,name)=>{ console.log("plugin3",compilation,name);compilation.sum=compilation.sum+3;});constcompilation={ sum:0};//第一次调用testhook.call(compilation,"mytest1");//第二次调用testhook.call(compilation,"mytest2");//第三次调用testhook.call(compilation,"mytest3");...//第n次调用testhook.call(compilation,"mytestn");

       我们用这个demo做为用例，一步步debug。

SyncHook.js源码

       主要逻辑如下：

constHook=require("./Hook");constHookCodeFactory=require("./HookCodeFactory");//继承HookCodeFactoryclassSyncHookCodeFactoryextendsHookCodeFactory{ }constfactory=newSyncHookCodeFactory();constCOMPILE=function(options){ factory.setup(this,options);returnfactory.create(options);};functionSyncHook(args=[],name=undefined){ //初始化Hookconsthook=newHook(args,name);//注意这里修改了hook的constructorhook.constructor=SyncHook;...//每个钩子都必须自行实现自己的compile方法！！！hook.compile=COMPILE;returnhook;}Hook.js源码

       主要逻辑如下：

//问题一：思考一下为什么需要CALL_DELEGATEconstCALL_DELEGATE=function(...args){ //当第一次调用时，实际上执行的是CALL_DELEGATE方法this.call=this._createCall("sync");//当第二次或者第n次调用时，此时this.call方法已经被设置成this._createCall的返回值returnthis.call(...args);};...classHook{ constructor(args=[],name=undefined){ this._args=args;this.name=name;this.taps=[];//存储我们通过hook.tap注册的插件this.interceptors=[];this._call=CALL_DELEGATE;//初始化时，this.call被设置成CALL_DELEGATEthis.call=CALL_DELEGATE;...//问题三：this._x=undefined是什么this._x=undefined;//this._x实际上就是this.taps中每个插件的回调//问题四：为什么需要在构造函数中绑定这些函数this.compile=this.compile;this.tap=this.tap;this.tapAsync=this.tapAsync;this.tapPromise=this.tapPromise;}//每个钩子必须自行实现自己的compile方法。compile方法根据this.taps以及this._args动态生成函数执行体compile(options){ thrownewError("Abstract:shouldbeoverridden");}//生成函数执行体_createCall(type){ returnthis.compile({ taps:this.taps,interceptors:this.interceptors,args:this._args,type:type});}..._tap(type,options,fn){ ...this._insert(options);}tap(options,fn){ this._tap("sync",options,fn);}_resetCompilation(){ this.call=this._call;this.callAsync=this._callAsync;this.promise=this._promise;}_insert(item){ //问题二：为什么每次调用testhook.tap()注册插件时，都需要重置this.call等方法？this._resetCompilation();...}}思考Hook.js源码中的几个问题

       问题一：为什么需要CALL_DELEGATE

       问题二：为什么每次调用testhook.tap()注册插件时，都需要重置this.call等方法？

       问题三：this._x=undefined是什么

       问题四：为什么需要在构造函数中绑定this.compile、this.tap、this.tapAsync以及this.tapPromise等方法

       当我们每次调用testhook.tap方法注册插件时，流程如下：

       方法往this.taps数组中添加一个插件。this.__insert方法逻辑比较简单，但这里有一个细节需要注意一下，为什么每次注册插件时，都需要调用this._resetCompilation()重置this.call等方法？我们稍后再看下这个问题。先继续debug。中文 心型源码

       当我们第一次(注意是第一次)调用testhook.call时，实际上调用的是CALL_DELEGATE方法

constCALL_DELEGATE=function(...args){ //当第一次调用时，实际上执行的是CALL_DELEGATE方法this.call=this._createCall("sync");//当第二次或者第n次调用时，此时this.call方法已经被缓存成this._createCall的返回值returnthis.call(...args);};

       CALL_DELEGATE调用this._createCall函数根据注册的this.taps动态生成函数执行体。并且this.call被设置成this._createCall的返回值缓存起来，如果this.taps改变了，则需要重新生成。

       此时如果我们第二次调用testhook.call时，就不需要再重新动态生成一遍函数执行体。这也是tapable的优化技巧之一。这也回答了问题一：为什么需要CALL_DELEGATE。

       如果我们调用了n次testhook.call，然后又调用testhook.tap注册插件，此时this.call已经不能重用了，需要再根据CALL_DELEGATE重新生成一次函数执行体，这也回答了问题二：为什么每次调用testhook.tap()注册插件时，都需要重置this.call等方法。可想而知重新生成的过程是很耗时的。因此我们在使用tapable时，最好一次性注册完所有插件，再调用call

testhook.tap("plugin1");testhook.tap("plugin2");testhook.tap("plugin3");testhook.call(compilation,"mytest1");//第一次调用call时，会调用CALL_DELEGATE动态生成函数执行体并缓存起来testhook.call(compilation,"mytest2");//不会重新生成函数执行体，使用第一次的testhook.call(compilation,"mytest3");//不会重新生成函数执行体，使用第一次的

       避免下面的调用方式：

testhook.tap("plugin1");testhook.call(compilation,"mytest1");//第一次调用call时，会调用CALL_DELEGATE动态生成函数执行体并缓存起来testhook.tap("plugin2");testhook.call(compilation,"mytest2");//重新调用CALL_DELEGATE生成函数执行体testhook.tap("plugin3");testhook.call(compilation,"mytest3");//重新调用CALL_DELEGATE生成函数执行体

       现在让我们看看第三个问题，调用this.compile方法时，实际上会调用HookCodeFacotry.js中的setup方法：

setup(instance,options){ instance._x=options.taps.map(t=>t.fn);}

       对于问题四，实际上这和V8引擎的最新源码分享HiddenClass有关，通过在构造函数中绑定这些方法，类中的属性形态固定，这样在查找这些方法时就能利用V8引擎中HiddenClass属性查找机制，提高性能。

HookCodeFactory.js

       主要逻辑：

classHookCodeFactory{ constructor(config){ this.config=config;this.options=undefined;this._args=undefined;}create(options){ this.init(options);letfn;switch(this.options.type){ case'sync':fn=newFunction(...)breakcase'async':fn=newFunction(...)breakcase'promise':fn=newFunction(...)break}this.deinit();returnfn;}setup(instance,options){ instance._x=options.taps.map(t=>t.fn);}...}手写tapable每个Hook

       手写tapable中所有的hook，并比较我们自己实现的hook和官方的执行时间

       这里面每个文件都会实现一遍官方的hook，并比较执行时间，以SyncHook为例，批量注册个插件时，我们自己手写的MySyncHook执行时间0.ms，而官方的需要6ms，这中间整整倍的差距！！！

       具体可以看我的仓库

原文：/post/

webpack的打包原理是什么

       webpack打包原理是根据文件间的依赖关系对其进行静态分析，然后将这些模块按指定规则生成静态资源，当 webpack 处理程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

       webpack有两种组织模块的依赖方式，同步、异步。异步依赖将作为分割点，形成一个新的块；在优化了依赖树之后，每一个异步区块都将作为一个文件被打包。

       webpack有一个智能解析器，几乎可以处理任何第三方库。无论它们的模块形式是CommonJS、AMD还是普通的JS文件；甚至在加载依赖的时候，允许使用动态表require("、/templates/"+name+"、jade")。

扩展资料

       在使用webpack构建的典型应用程序或站点中，有三种主要的代码类型：

       1、团队编写的源码。

       2、源码会依赖的任何第三方的library或"vendor"代码。

       3、webpack的runtime和manifest，管理所有模块的交互。

       runtime 包含：在模块交互时，连接模块所需的加载和解析逻辑；包括浏览器中的已加载模块的连接，以及懒加载模块的执行逻辑。

webpack打包原理 ? 看完这篇你就懂了 !

       深入浅出 webpack

       webpack 是一个现代 JavaScript 应用程序的静态模块打包器，其本质是对模块进行递归构建依赖关系图，然后打包成一个或多个 bundle。

       理解 webpack 的工作流程，像是理解一条生产线，每一步都有其职责，依赖于前一步骤的结果。插件则像是生产线中的功能模块，根据特定时机对资源进行处理。

       webpack 通过 Tapable 组织整个生产流程，它在运行中广播事件，插件只需监听感兴趣的事件，即可加入流程，改变整个系统。事件流机制确保了插件的有序性，提高了系统的扩展性。

       webpack 的核心概念包括：入口起点（Entry），定义了构建开始的模块；输出（Output），指定生成的 bundle 存储位置；模块（Module），一切皆模块，所有资源被转换为模块；代码块（Chunk），多个模块组合用于代码优化；loader，处理非 JavaScript 文件，将所有类型转换为可引用的模块；插件，执行更广泛任务。

       理解 webpack 的构建流程，从入口文件开始，遍历依赖关系，转换为浏览器可执行代码，并生成最终的 bundle。在实践过程中，定义 Compiler 类，使用 babel 解析源代码，遍历 AST 抽象语法树，找出依赖模块，转换为可执行代码，并构建依赖关系图，重写 require 函数以输出 bundle。

       完成 webpack 的理解，需要通过实践，例如构建一个简易版本的 webpack。从定义 Compiler 类开始，解析入口文件，使用 babel 解析内部语法，找出依赖模块，将 AST 转换为代码，递归解析所有依赖项，构建依赖关系图，重写 require 函数以输出 bundle。

       通过实际操作，可以深入理解 webpack 的 bundle 实现过程，从入口文件执行开始，利用 eval 执行代码，处理依赖引用，生成最终的 bundle。通过这个实践过程，可以全面掌握 webpack 的工作原理和使用方法。

WebPack插件实现：打包之后自动混淆加密JS文件

       在WebPack中实现对打包生成的JS文件进行混淆加密，可采用JShaman插件，确保代码安全性和可维护性。

       插件实现步骤如下：

       1、创建插件文件JShamanObfuscatorPlugin.js，编写代码用于混淆加密JS文件。该插件需实现混淆加密功能，以便对编译后的JS文件进行保护。

       2、在webpack.config.js配置文件中引入JShamanObfuscatorPlugin，并将其添加到plugins数组中。配置时需确保插件能够正确识别并处理打包过程中的JS文件，实现混淆加密。

       功能测试阶段，通过编写Example.js和Mod.js两个示例文件来验证混淆加密效果。

       Example.js示例代码如下，用于展示未混淆加密前的JS代码结构。

       Mod.js示例代码如下，展示未混淆加密前的JS代码逻辑。

       运行Webpack编译，生成的bundle.js文件中，JS代码已被混淆加密处理。加密后的代码呈现出高度不可读性，有效保护了源代码信息。

       相比之下，未使用JShaman插件的bundle.js文件，其代码结构和逻辑清晰可读。对比显示，插件实现的混淆加密功能显著提高了代码的安全性和复杂性。

webpack 4 源码主流程分析（十一）：文件的生成

       本文深入分析了 Webpack 4 中文件生成的具体流程。在资源写入文件阶段，通过一系列优化和处理，最终返回到 Compiler.js 的 compile 方法，其中 Compiler 的属性 _lastCompilationFileDependencies 和 _lastCompilationContextDependencies 被赋予了 fileDependencies 和 contextDependencies。紧随其后的是创建目标文件夹的过程，该操作通过 outputPath 属性配置，结合 mkdirp 函数完成。

       在创建目标文件并写入阶段，通过 asyncLib.forEachLimit 方法并行处理每个文件资源，实现路径拼接、源码转换为 buffer，最后写入真实路径的文件。对于不同类型的 source 实例，如 CachedSource、ConcatSource 和 ReplaceSource，其处理逻辑各不相同，但最终目标都是获取替换后的字符串并合并返回 resultStr。所有文件创建写入完成后，执行回调，触发Compiler.afterEmit:hooks，进一步设置 stats 并打印构建信息。

       至此，构建流程全部结束。通过本文的分析，我们可以更直观地了解 Webpack 4 中文件生成的具体实现细节，为深入理解 Webpack 的工作原理和优化提供理论支持。本章小结，下章将解析打包后的文件，敬请期待。