1.手写webpacktapable源码，官方tapable的性能真的就一定是好的吗？
2.Webpack进阶less-loader、css-loader、style-loader源码解析
3.源码细读-深入了解terser-webpack-plugin的实现
4.了不起的 Webpack HMR 学习指南（含源码分析）

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

       完整的手写源码仓库

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

目录

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

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

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

如何理解tapable的设计理念

       思考下面两种实现方法，哪一种执行效率高，哪一种实现方式简洁？

//方法一：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三个方法，参数形态也固定，这种方式显然没有方法一灵活，那能不能同时兼顾效率以及灵活性呢？答案是美女网站源码cms可以的。我们可以借助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改变了，微信商城源码 php则需要重新生成。

       此时如果我们第二次调用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进阶less-loader、css-loader、style-loader源码解析

       Webpack进阶学习中，Loader的运用是关键环节。在深入理解Loader基础后，本文将解析less-loader、css-loader和style-loader的内部工作原理。

       less-loader是专为处理Less样式文件设计的，它将Less代码转换为浏览器能识别的CSS。以less文件为例，其工作原理是调用less库的功能，将扩展了CSS特性的Less代码转化为CSS，如变量、Mixin和函数等。

       css-loader的功能则更为复杂，它不仅处理@import和url语句，还支持css-modules，将样式文件内容合并并作为JavaScript模块输出。以多个样式文件（如a.css、b.css和c.css）为例，css-loader会将它们合并成一个JavaScript模块，输出包含所有样式内容的字符串。

       style-loader的作用在于将css-loader转化后的CSS样式代码插入到DOM中。理论上，我们可能期望直接在JavaScript中插入CSS代码，但css-loader返回的是模块化的代码，不能直接放入style标签。style-loader的实现通过一种巧妙的方式，将这些模块代码适当地包装，确保样式能正确插入到文档中。

       style-loader的设计思路独特，其内部逻辑涉及Loader调用链、执行顺序和模块化输出等多个层面，理解style-loader的运作机制，对于深化对Webpack和Loader的理解至关重要。深入研究这些Loader的源码，无疑能提升你对Webpack进阶应用的掌握程度。

源码细读-深入了解terser-webpack-plugin的实现

       terser-webpack-plugin 是一个基于 webpack 的插件，它利用 terser 库对 JavaScript 代码进行压缩和混淆。其核心功能在于通过在 webpack 的运行时钩子 optimizeChunkAssets 中注册，实现了代码优化过程。在 apply 函数中，它获取 compilation 实例，并通过 tapPromise 注册一个异步任务，当 webpack 执行优化阶段时，每个 chunk 会触发这个任务，执行 minify 函数进行压缩处理。

       optimise 函数是实际的任务处理入口，它负责具体的优化流程。函数内部，scheduleTask 负责并行处理，如果开启 parallel 模式，会利用jest-worker提供的线程池进行并发工作，线程池管理复杂，根据 node 版本不同采用 worker_threads 或 child_process。minify 函数则是压缩和混淆代码的核心操作，它直接使用 terser 库完成任务。

       总的来说，terser-webpack-plugin 的优化流程包括在 webpack 的优化阶段对代码进行压缩，使用 Jest 的 worker 线程池进行并行处理，以及通过 terser 库的实际压缩操作。理解这些核心环节，可以帮助开发者更深入地掌握该插件的使用和工作原理。

了不起的 Webpack HMR 学习指南（含源码分析）

       年6月日，深入学习了Webpack的HMR模块热替换技术，它在开发环境中提供了一个高效更新模块的解决方案，无需完全刷新页面。HMR的关键在于Webpack在运行时动态替换模块，显著提升了开发效率。

       要启用HMR，只需在webpack.config.js中添加相关配置，例如通过devServer选项设置hot为true，并使用HotModuleReplacementPlugin和NamedModulesPlugin。在package.json中调整scripts命令，即可开始使用。例如，通过修改引入的模块，观察HMR如何实时更新应用。

       HMR的核心工作流程涉及Webpack-dev-server监控代码变化，重新编译并将结果保存在内存中，而不是直接写入文件。当文件变化时，它会通过WebSocket同步编译状态，并在浏览器中触发相应的更新。HMR Runtime与Webpack-dev-server配合，通过API检测并应用模块更新，确保应用程序的平滑过渡。

       尽管本文没有详尽解析源码，但理解了HMR的工作原理，可以更有效地利用这一功能。进一步学习可参考官方文档和其他资源，如《Hot Module Replacement》和《Webpack HMR》。