1.详解webpackpluginçåçåç¼åä¸ä¸ªplugin
2.手写webpacktapable源码,手手写官方tapable的写源性能真的就一定是好的吗?
3.手写loader并不难
4.webpack5loader和plugin原理解析
5.Webpack手写loader和plugin
详解webpackpluginçåçåç¼åä¸ä¸ªplugin
plugin解å³äºä»ä¹é®é¢ï¼
plugin解å³äºWebpackæ建çå½å¨æè¿ç¨ä¸çåè½å®å¶é®é¢ï¼å¯ä»¥å©ç¨pluginåä¸å°webpackæ建æµç¨ä¸çå个é¶æ®µå¹¶å«æåä¸äºä»£ç å¤çã
æ¯å¦ï¼æå åéè¦çæä¸ä¸ªhtmlæ件ï¼é£ä¹å°±å¯ä»¥ä½¿ç¨html-webpack-pluginãè¿æï¼å¨æå ä¹åædistæ件å é¤ï¼å°±å¯ä»¥ä½¿ç¨clean-webpack-pluginã
webpackæ¬èº«å°±æ¯ä¸ä¸ªæ建è¿ç¨çç¶ææºï¼å ¶èªèº«çæ ¸å¿åè½ä¹æ¯æ建å¨loaderåpluginçæºå¶ä¸çã
compileråcompilationå ·ä½æ¯å¹²ä»ä¹çï¼é¦å æ们æ¥çä¸ä¸ªwebpackèªå¸¦çæ件BannerPlugin代ç ï¼å ¶å®webpackçå¾å¤æ ¸å¿å ¬å¸å°±æ¯å©ç¨æ件æ¥å®ç°çã
æ件çæ ¼å¼
ä¸ä¸ªJavaScriptå½æ°æJavaScriptç±»;
å¨å®ååä¸å®ä¹çapplyæ¹æ³ï¼ä¼å¨å®è£ æ件æ¶è¢«è°ç¨ï¼å¹¶è¢«webpackcompilerè°ç¨ä¸æ¬¡;
æå®ä¸ä¸ªè§¦åå°webpackæ¬èº«çäºä»¶é©åï¼å³hooksï¼ç¨äºç¹å®æ¶æºå¤çé¢å¤çé»è¾;
classBannerPlugin{ constructor(options){ this.options=options;}apply(compiler){ constoptions=this.options;constbanner=this.banner;compiler.hooks.compilation.tap("BannerPlugin",compilation=>{ compilation.hooks.processAssets.tap({ name:"BannerPlugin"},()=>{ for(constchunkofcompilation.chunks){ for(constfileofchunk.files){ constdata={ chunk,filename:file};//çæ注éconstcomment=compilation.getPath(banner,data);//æ注éå å ¥å°æ件ä¸compilation.updateAsset(file,old=>{ constsource=options.footer?newConcatSource(old,"\n",comment):newConcatSource(comment,"\n",old);returnsource;}});}}}}}}ä»ä»£ç ä¸åºç°äºcompileråcompilationï¼é£å®ä»¬å°åºæ¯ä»ä¹å¢ï¼
compilercompiler模åæ¯Webpackææ ¸å¿ç模åãæ¯æ¬¡æ§è¡Webpackæ建çæ¶åï¼å¨Webpackå é¨ï¼ä¼é¦å å®ä¾åä¸ä¸ªCompiler对象ï¼ç¶åè°ç¨å®çrunæ¹æ³æ¥å¼å§ä¸æ¬¡å®æ´çç¼è¯è¿ç¨ãcompiler对象代表äºå®æ´çwebpackç¯å¢é ç½®ï¼æ件å¯ä»¥éè¿å®è·åå°webpackçé 置信æ¯ï¼å¦entryãoutputãmoduleçé ç½®ã
compileré©åcompileræå¾å¤é©åï¼ä¸é¢åªä»ç»å¸¸ç¨çå 个:é©åå?|Tapableç±»å|触åæ¶æº?|ä¼ å ¥callbackçåæ°?||--------------------|-----------------|------------------------------------------|---------------------------------||entryOption?|SyncBailHook?|å¨webpackä¸çentryé ç½®å¤çè¿ä¹å|contextï¼entry||afterPlugins|SyncHook?|åå§åå®å ç½®æ件ä¹å|compiler||environment?|SyncHook?|åå¤ç¼è¯ç¯å¢ï¼webpackpluginsé ç½®åå§åå®æä¹å|compiler||beforeRun|AsyncSeriesHook?|å¼å§æ£å¼ç¼è¯ä¹å?|compiler||run?|AsyncSeriesHook?|å¼å§ç¼è¯ä¹åï¼è¯»årecordsä¹åï¼|compiler||compile?|SyncHook?|ä¸æ¬¡compilationç¼è¯å建ä¹å?|compilationParams?||compilation?|SyncHook?|compilationå建æåä¹å?|compilationï¼compilationParams||emit|AsyncSeriesHook?|çæèµæºå°outputç®å½ä¹å?|compilation||done|AsyncSeriesHook?|compilationå®æä¹å|stats?||failed?|SyncHook?|compilation失败|
æ´ä¸ªCompilerå®æ´å°å±ç°äºWebpackçæ建æµç¨ï¼
åå¤é¶æ®µï¼makeä¹ååçäºæ é½å±äºåå¤é¶æ®µï¼è¿é¶æ®µçcalbackå ¥å以compiler为主ï¼
ç¼è¯é¶æ®µï¼è¿é¶æ®µä»¥compilationçé©å为主ï¼calbackå ¥å以compilation为主ï¼
产åºé¶æ®µï¼è¿é¶æ®µä»compilationå¼å§ï¼æååå°Compileré©åä¸ï¼calbackä¼ å ¥åæ°æ¯è·ç»æç¸å ³çæ°æ®ï¼å æ¬statsãerrorã
compilationå¨compilationé¶æ®µï¼æ¨¡åä¼è¢«å è½½(loaded)ãå°å(sealed)ãä¼å(optimized)ãåå(chunked)ãåå¸(hashed)åéæ°å建(restored)ï¼Compilation对象å å«äºå½åç模åèµæºãç¼è¯çæèµæºãååçæ件çãCompilation对象ä¹æä¾äºå¾å¤äºä»¶åè°ä¾æ件åæ©å±ï¼éè¿Compilationä¹è½è¯»åå°Compiler对象ã
Compilationé©å
å¨Compilationä¸å¤çç对象åå«æ¯moduleãchunkãassetsï¼ç±modulesç»æchunksï¼ç±chunksçæassetsï¼å¤ç顺åºæ¯ï¼moduleâmodulesâchunksâassetsï¼å ä»å个moduleå¼å§å¤çï¼æ¥æ¾ä¾èµå ³ç³»ï¼æåå®æå个moduleå¤çï¼å®æå ¨é¨modulesä¹åï¼å¼å§chunksé¶æ®µå¤çï¼æåå¨æ ¹æ®ä¼åé ç½®ï¼æéçæassetsã
æ以æ´ä¸ªCompilationççå½å¨æé©åè½ç¶æ¯è¾å¤ï¼ä½æ¯å¤§è§å¾ä¸æ¯å´ç»è¿ä¸ªé¡ºåºè¿è¡çï¼å ·ä½çé©åå¯ä»¥æ¥çwebpackå®ç½ã
Stats对象å¨Webpackçåè°å½æ°ä¸ä¼å¾å°stats对象ãè¿ä¸ªå¯¹è±¡å®é æ¥èªäºCompilation.getStats()ï¼è¿åçæ¯ä¸»è¦å«æmodulesãchunksåassetsä¸ä¸ªå±æ§å¼ç对象ã
modulesï¼è®°å½äºææ解æåç模åï¼
chunksï¼è®°å½äºææchunkï¼
assetsï¼è®°å½äºææè¦çæçæ件ã
æäºå¯¹compilercompilationçç解ï¼é£ç°å¨æ¥ççBannerPluginçå®ç°ï¼è¿ä¸ªæ件çåè½æ¯å¨æåçæçæ件ç头é¨å ä¸ä¸æ®µæ们èªå®ä¹ç注éï¼é£ä¹å®çæ§è¡æ¶æºè¯å®æ¯å¨ç¼è¯å®æä¹åï¼çææå æ件ä¹é´ï¼ä¹å°±æ¯å¨compiler.hooks.compilationè¿ä¸ªå¤§é©åä¸é¢çprocessAssetsé©åéé¢æ§è¡æ们çé»è¾ã
ç¼åpluginplugin:å¨æ件尾é¨æå ¥ä¸æ®µæ³¨éé¦å å建ä¸ä¸ªplugins/FootPlugin.jsï¼ä»£ç å¦ä¸:
const{ ConcatSource}=require('webpack-sources')classFootPlugin{ constructor(options){ this.options=options}apply(compiler){ compiler.hooks.compilation.tap('FootPlugin',compilation=>{ compilation.hooks.processAssets.tap('FootPlugin',()=>{ for(constchunkofcompilation.chunks){ for(constfileofchunk.files){ console.log('file--',file)//bundle.js//å®ä¹æ³¨éçå 容constcomment=`/*${ this.options.banner}*/`compilation.updateAsset(file,old=>{ //æ注éåæ§ä»£ç è¿è¡æ¼æ¥returnnewConcatSource(old,'\n',comment)})}}})})}}module.exports=FootPluginwebpack.config.js
constFootPlugin=require('./plugins/FootPlugin')module.exports={ plugins:[newwebpack.BannerPlugin({ banner:'欢è¿å¦ä¹ '}),newFootPlugin({ banner:'ç»æå¦ä¹ '})]}å¯ä»¥çå°å¨bundle.jsçå¼å¤´åç»å°¾é½æ对åºç注éã
plugin:æä»¶è¶ è¿ä¸å®å¤§å°æ¶ç»åºè¦åconst{ resolve}=require('path')constfs=require('fs')classBundleSizeWebpackPlugin{ constructor(options){ this.options=options}apply(compiler){ const{ sizeLimit}=this.optionsconsole.log('bundlesizeplugin')//å¨ç¼è¯å®æåï¼æ§è¡åè°ï¼æ¿å°æå åæ件路å¾ï¼ç¶å读åæ件信æ¯è·åæ件大å°ï¼ç¶åå®ä¹ä¸äºé»è¾compiler.hooks.done.tap('BundleSizePlugin',stats=>{ const{ path,filename}=stats.compilation.outputOptionsconstbundlePath=resolve(path,filename)const{ size}=fs.statSync(bundlePath)constbundleSize=size/if(bundleSize<sizeLimit){ console.log('safe:bundle-size',bundleSize,'\nsizelimit:',sizeLimit)}else{ console.warn('unsafe:bundle-size',bundleSize,'\nsizelimit:',sizeLimit)}})}}module.exports=BundleSizeWebpackPluginæ¬ç« å°è¿éå°±ç»æäºï¼æ们å¼å§ä»ç»äºwebpackçæ ¸å¿æ¦å¿µï¼æäºå¯¹webpackçåºæ¬é ç½®çäºè§£ï¼æ¥çå©ç¨css-loaderåstyle-loader对webpackçloaderæºå¶è¿è¡äºè¯¦ç»åæï¼æåï¼å¯¹webpackpluginçå·¥ä½æºå¶åæµç¨è¿è¡äºæ¢³çï¼å¹¶æåäºä¸¤ä¸ªpluginï¼è®©ä½ 对pluginä¸åè§å¾é¥ä¸å¯åãæäºè¿äºåç½®ç¥è¯ï¼å°±å¯ä»¥å¯¹æ们åç项ç®è¿è¡å·¥ç¨åçæ¹é äºãæå¾ ä½ çå¦ä¹ ã
åæï¼/post/手写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的目的都是为了实现将一组方法以相同的参数调用,依次执行。很显然,方法一效率明显更高,并且容易扩展,能支持传入数量不固定的一组方法。但是,如果根据单态性以及内联缓存的说法,很明显方法二的执行效率更高,同时也存在一个问题,lwr指标源码公式即只支持传入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是ai量化公式源码什么
问题四:为什么需要在构造函数中绑定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/手写loader并不难
理解并掌握webpack的loader配置并非难事。loader在webpack中扮演关键角色,用于处理模块源代码,例如将不同语言转换为JavaScript,或在JavaScript中引入CSS文件。loader支持链式传递,按照相反顺序执行,且遵循单一原则,即每个loader只负责特定任务。配置loader时,确保遵循最佳实践,如使用绝对路径,并配置指向自定义loader的路径。
loader本质上是一个函数,负责生成预期的JavaScript输出。它们应保持无状态,确保不同模块之间独立运行。遵循这些原则,合理配置loader,即可实现模块预处理。通过`use`属性指向自定义loader,如`use: ['loader/loader.js']`,实现链式调用。
在`loader.js`文件中,处理传入的代码并返回有效输出至关重要。若返回值非Buffer或String,春天还会源码诗文则可能导致构建失败。例如,`use`属性配置确保正确使用loader路径。
loader运行原理相对简单,但实际应用时,需关注代码处理细节。了解loader的不同模式(如`pre`、`normal`、`inline`、`post`)有助于优化配置。通过调整`use`属性,可以控制不同loader之间的执行顺序和优先级。
loader通常由两部分组成:pitch和normal。pitch部分在执行前先运行,若返回值则跳过后续loader。通过添加`pitch`方法,可实现自定义逻辑。loader还支持异步处理,使用`this.async()`和`this.callback`来处理复杂的场景。
探索更多loader特性,如通过`loader-utils`获取配置参数,以及API文档,能进一步提升loader应用能力。理解loader的工作机制,结合实际需求进行定制,是编写高效loader的关键。
webpack5loader和plugin原理解析
大家好,今天为大家解析下loader和plugin一、区别loader是文件加载器,能够加载资源文件,并对这些文件进行一些处理,诸如编译、压缩等,最终一起打包到指定的文件中
plugin赋予了Webpack各种灵活的功能,例如打包优化、资源管理、环境变量注入等,目的是解决loader无法实现的其他事从整个运行时机上来看,如下图所示:
可以看到,两者在运行时机上的区别:
loader运行在打包文件之前plugins在整个编译周期都起作用在Webpack运行的生命周期中会广播出许多事件,Plugin可以监听这些事件,在合适的时机通过Webpack提供的API改变输出结果
对于loader,实质是一个转换器,将A文件进行编译形成B文件,操作的是文件,比如将A.scss或A.less转变为B.css,单纯的文件转换过程
下面我们来看看loader和plugin实现的原理
Loader原理loader概念帮助webpack将不同类型的文件转换为webpack可识别的模块。
loader执行顺序分类
pre:前置loader
normal:普通loader
inline:内联loader
post:后置loader
执行顺序
4类loader的执行优级为:pre>normal>inline>post。
相同优先级的loader执行顺序为:从右到左,从下到上。
例如:
//此时loader执行顺序:loader3-loader2-loader1module:{ rules:[{ test:/\.js$/,loader:"loader1",},{ test:/\.js$/,loader:"loader2",},{ test:/\.js$/,loader:"loader3",},],},//此时loader执行顺序:loader1-loader2-loader3module:{ rules:[{ enforce:"pre",test:/\.js$/,loader:"loader1",},{ //没有enforce就是normaltest:/\.js$/,loader:"loader2",},{ enforce:"post",test:/\.js$/,loader:"loader3",},],},使用loader的方式
配置方式:在webpack.config.js文件中指定loader。(pre、normal、postloader)
内联方式:在每个import语句中显式指定loader。(inlineloader)
开发一个loader1.最简单的loader//loaders/loader1.jsmodule.exports=functionloader1(content){ console.log("hellofirstloader");returncontent;};它接受要处理的源码作为参数,输出转换后的js代码。
2.loader接受的参数content源文件的内容
mapSourceMap数据
meta数据,可以是任何内容
loader分类1.同步loadermodule.exports=function(content,map,meta){ returncontent;};this.callback方法则更灵活,因为它允许传递多个参数,而不仅仅是content。
module.exports=function(content,map,meta){ //传递map,让source-map不中断//传递meta,让下一个loader接收到其他参数this.callback(null,content,map,meta);return;//当调用callback()函数时,总是返回undefined};2.异步loadermodule.exports=function(content,map,meta){ constcallback=this.async();//进行异步操作setTimeout(()=>{ callback(null,result,map,meta);},);};由于同步计算过于耗时,在Node.js这样的单线程环境下进行此操作并不是好的方案,我们建议尽可能地使你的loader异步化。但如果计算量很小,同步loader也是可以的。
3.RawLoader默认情况下,资源文件会被转化为UTF-8字符串,然后传给loader。通过设置raw为true,loader可以接收原始的Buffer。
module.exports=function(content){ //content是一个Buffer数据returncontent;};module.exports.raw=true;//开启RawLoader4.PitchingLoadermodule.exports=function(content){ returncontent;};module.exports.pitch=function(remainingRequest,precedingRequest,data){ console.log("dosomethings");};webpack会先从左到右执行loader链中的每个loader上的pitch方法(如果有),然后再从右到左执行loader链中的每个loader上的普通loader方法。
在这个过程中如果任何pitch有返回值,则loader链被阻断。webpack会跳过后面所有的的pitch和loader,直接进入上一个loader。
loaderAPI方法名含义用法this.async异步回调loader。返回this.callbackconstcallback=this.async()this.callback可以同步或者异步调用的并返回多个结果的函数this.callback(err,content,sourceMap?,meta?)this.getOptions(schema)获取loader的optionsthis.getOptions(schema)this.emitFile产生一个文件this.emitFile(name,content,sourceMap)this.utils.contextify返回一个相对路径this.utils.contextify(context,request)this.utils.absolutify返回一个绝对路径this.utils.absolutify(context,request)更多文档,请查阅webpack官方loaderapi文档
手写clean-log-loader作用:用来清理js代码中的console.log
//loaders/clean-log-loader.jsmodule.exports=functioncleanLogLoader(content){ //将console.log替换为空returncontent.replace(/console\.log\(.*\);?/g,"");};手写banner-loader作用:给js代码添加文本注释
loaders/banner-loader/index.js
constschema=require("./schema.json");module.exports=function(content){ //获取loader的options,同时对options内容进行校验//schema是options的校验规则(符合JSONschema规则)constoptions=this.getOptions(schema);constprefix=`/**Author:${ options.author}*/`;return`${ prefix}\n${ content}`;};loaders/banner-loader/schema.json
//此时loader执行顺序:loader1-loader2-loader3module:{ rules:[{ enforce:"pre",test:/\.js$/,loader:"loader1",},{ //没有enforce就是normaltest:/\.js$/,loader:"loader2",},{ enforce:"post",test:/\.js$/,loader:"loader3",},],},0手写babel-loader作用:编译js代码,将ES6+语法编译成ES5-语法。
下载依赖
//此时loader执行顺序:loader1-loader2-loader3module:{ rules:[{ enforce:"pre",test:/\.js$/,loader:"loader1",},{ //没有enforce就是normaltest:/\.js$/,loader:"loader2",},{ enforce:"post",test:/\.js$/,loader:"loader3",},],},1loaders/babel-loader/index.js
//此时loader执行顺序:loader1-loader2-loader3module:{ rules:[{ enforce:"pre",test:/\.js$/,loader:"loader1",},{ //没有enforce就是normaltest:/\.js$/,loader:"loader2",},{ enforce:"post",test:/\.js$/,loader:"loader3",},],},2loaders/banner-loader/schema.json
//此时loader执行顺序:loader1-loader2-loader3module:{ rules:[{ enforce:"pre",test:/\.js$/,loader:"loader1",},{ //没有enforce就是normaltest:/\.js$/,loader:"loader2",},{ enforce:"post",test:/\.js$/,loader:"loader3",},],},3手写file-loader作用:将文件原封不动输出出去
下载包
//此时loader执行顺序:loader1-loader2-loader3module:{ rules:[{ enforce:"pre",test:/\.js$/,loader:"loader1",},{ //没有enforce就是normaltest:/\.js$/,loader:"loader2",},{ enforce:"post",test:/\.js$/,loader:"loader3",},],},4loaders/file-loader.js
//此时loader执行顺序:loader1-loader2-loader3module:{ rules:[{ enforce:"pre",test:/\.js$/,loader:"loader1",},{ //没有enforce就是normaltest:/\.js$/,loader:"loader2",},{ enforce:"post",test:/\.js$/,loader:"loader3",},],},5loader配置
//此时loader执行顺序:loader1-loader2-loader3module:{ rules:[{ enforce:"pre",test:/\.js$/,loader:"loader1",},{ //没有enforce就是normaltest:/\.js$/,loader:"loader2",},{ enforce:"post",test:/\.js$/,loader:"loader3",},],},6手写style-loader作用:动态创建style标签,插入js中的样式代码,使样式生效。
loaders/style-loader.js
//此时loader执行顺序:loader1-loader2-loader3module:{ rules:[{ enforce:"pre",test:/\.js$/,loader:"loader1",},{ //没有enforce就是normaltest:/\.js$/,loader:"loader2",},{ enforce:"post",test:/\.js$/,loader:"loader3",},],},7Plugin原理Plugin的作用通过插件我们可以扩展webpack,加入自定义的构建行为,使webpack可以执行更广泛的任务,拥有更强的构建能力。
Plugin工作原理webpack就像一条生产线,要经过一系列处理流程后才能将源文件转换成输出结果。这条生产线上的每个处理流程的职责都是单一的,多个流程之间有存在依赖关系,只有完成当前处理后才能交给下一个流程去处理。插件就像是一个插入到生产线中的一个功能,在特定的时机对生产线上的资源做处理。webpack通过Tapable来组织这条复杂的生产线。webpack在运行过程中会广播事件,插件只需要监听它所关心的事件,就能加入到这条生产线中,去改变生产线的运作。webpack的事件流机制保证了插件的有序性,使得整个系统扩展性很好。——「深入浅出Webpack」
站在代码逻辑的角度就是:webpack在编译代码过程中,会触发一系列Tapable钩子事件,插件所做的,就是找到相应的钩子,往上面挂上自己的任务,也就是注册事件,这样,当webpack构建的时候,插件注册的事件就会随着钩子的触发而执行了。
Webpack内部的钩子什么是钩子钩子的本质就是:事件。为了方便我们直接介入和控制编译过程,webpack把编译过程中触发的各类关键事件封装成事件接口暴露了出来。这些接口被很形象地称做:hooks(钩子)。开发插件,离不开这些钩子。
TapableTapable为webpack提供了统一的插件接口(钩子)类型定义,它是webpack的核心功能库。webpack中目前有十种hooks,在Tapable源码中可以看到,他们是:
//此时loader执行顺序:loader1-loader2-loader3module:{ rules:[{ enforce:"pre",test:/\.js$/,loader:"loader1",},{ //没有enforce就是normaltest:/\.js$/,loader:"loader2",},{ enforce:"post",test:/\.js$/,loader:"loader3",},],},8Tapable还统一暴露了三个方法给插件,用于注入不同类型的自定义构建行为:
tap:可以注册同步钩子和异步钩子。
tapAsync:回调方式注册异步钩子。
tapPromise:Promise方式注册异步钩子。
Plugin构建对象Compilercompiler对象中保存着完整的Webpack环境配置,每次启动webpack构建时它都是一个独一无二,仅仅会创建一次的对象。
这个对象会在首次启动Webpack时创建,我们可以通过compiler对象上访问到Webapck的主环境配置,比如loader、plugin等等配置信息。
它有以下主要属性:
compiler.options可以访问本次启动webpack时候所有的配置文件,包括但不限于loaders、entry、output、plugin等等完整配置信息。
compiler.inputFileSystem和compiler.outputFileSystem可以进行文件操作,相当于Nodejs中fs。
compiler.hooks可以注册tapable的不同种类Hook,从而可以在compiler生命周期中植入不同的逻辑。
compilerhooks文档
Compilationcompilation对象代表一次资源的构建,compilation实例能够访问所有的模块和它们的依赖。
一个compilation对象会对构建依赖图中所有模块,进行编译。在编译阶段,模块会被加载(load)、封存(seal)、优化(optimize)、分块(chunk)、哈希(hash)和重新创建(restore)。
它有以下主要属性:
compilation.modules可以访问所有模块,打包的每一个文件都是一个模块。
compilation.chunkschunk即是多个modules组成而来的一个代码块。入口文件引入的资源组成一个chunk,通过代码分割的模块又是另外的chunk。
compilation.assets可以访问本次打包生成所有文件的结果。
compilation.hooks可以注册tapable的不同种类Hook,用于在compilation编译模块阶段进行逻辑添加以及修改。
compilationhooks文档
生命周期简图开发一个插件最简单的插件plugins/test-plugin.js
//此时loader执行顺序:loader1-loader2-loader3module:{ rules:[{ enforce:"pre",test:/\.js$/,loader:"loader1",},{ //没有enforce就是normaltest:/\.js$/,loader:"loader2",},{ enforce:"post",test:/\.js$/,loader:"loader3",},],},9注册hook//loaders/loader1.jsmodule.exports=functionloader1(content){ console.log("hellofirstloader");returncontent;};0启动调试通过调试查看compiler和compilation对象数据情况。
package.json配置指令
//loaders/loader1.jsmodule.exports=functionloader1(content){ console.log("hellofirstloader");returncontent;};1运行指令
//loaders/loader1.jsmodule.exports=functionloader1(content){ console.log("hellofirstloader");returncontent;};2此时控制台输出以下内容:
PSC:\Users\\Desktop\source>//loaders/loader1.jsmodule.exports=functionloader1(content){ console.log("hellofirstloader");returncontent;};2>source@1.0.0debug>node--inspect-brk./node_modules/webpack-cli/bin/cli.jsDebuggerlisteningonws://.0.0.1:/ea-7b--a7-fccForhelp,see:/post/开发思路:
我们需要借助html-webpack-plugin来实现
在html-webpack-plugin输出index.html前将内联runtime注入进去
删除多余的runtime文件
如何操作html-webpack-plugin?官方文档
实现:
//loaders/loader1.jsmodule.exports=functionloader1(content){ console.log("hellofirstloader");returncontent;};7Webpack手写loader和plugin
深入理解Webpack内部工作原理,让我们通过手写loader和plugin来揭示它们的运作机制。首先,让我们构建一个简单的less-loader,它会处理less文件并以style标签的形式插入到页面。
在Webpack中,loader是按链式方式工作,从上一个loader传递资源给下一个。开发loader时,关键点是定义一个导出的函数,接受文件资源和SourceMap,对其进行处理后返回,注意避免使用箭头函数,因为需要通过this访问内部属性和方法。
在项目中,我们创建一个loader文件夹,编写自定义的style-loader。loader处理完毕后,输出的内容会以JS字符串形式返回,包含在webpack生成的模块中。
对于异步操作,loader可以使用async/await或回调函数。记得在处理过程中考虑是否返回源代码的Source Map,这对于调试至关重要,但仅在开发环境中启用。
加载本地loader时,需要在webpack配置中指定正确路径,通过resolveLoader属性进行解析。避免与第三方loader重名,以防止覆盖。
在配置loader时,参数传递是常见的,通过options属性。Webpack的query属性在处理字符串和对象参数时表现不稳定,推荐使用loader-utils包进行参数处理。
接下来,我们分析官方less-loader的源码,它同样调用less.render进行资源处理,并通过callback返回处理结果和Source Map。
在loader中,我们可能需要引用外部资源,通过this.addDependency来声明依赖,确保缓存失效和观察模式下的更新。
为了优化性能,对于耗时计算的loader,可以启用缓存。但有时需要禁用,比如不想缓存某些特定操作的结果。
接下来转向plugin部分。Plugin是监听Webpack生命周期事件并在适当时机修改输出的组件。我们创建一个简单的插件,通过apply函数注册事件并访问compiler对象。
通过实例化插件和传递参数,可以在构建时初始化插件的行为。掌握compiler和compilation的区别,有助于理解插件在Webpack中的作用。
最后,我们实现一个FileListPlugin,它会在打包目录中生成一个文件列表,展示了构建的所有输出文件。这个插件演示了如何利用webpack输出对象和compilation进行操作。