鍓嶈█瀵逛簬webpack鏉ヨ锛宭oader鍜宲lugin鍙互璇存槸闇€姹傛渶骞挎硾鐨勯厤缃」浜嗐€備絾鏄紝浠呴厤缃彲鑳借繕涓嶅銆傚鏋滄垜浠湁鏃跺€欐兂DIY涓€涓渶姹傦紝浣嗘槸webpack娌℃湁鐩稿叧鐨刲oader鍜宲lugin銆傝繖涓椂鍊欐垜浠彲鑳借寮€濮嬮€犱竴浜涜疆瀛愮粰鑷繁鐢ㄤ簡銆傚洜姝わ紝鍦ㄤ粖澶╃殑鏂囩珷涓紝鎴戝皢甯﹂澶у鎵嬪啓涓€涓畝鍗曠殑loader鍜宲lugin锛屽涔犲浣曞湪椤圭洰涓娇鐢ㄨ嚜宸辩紪鍐欑殑loader鍜宲lugin銆備竴璧锋潵瀛︿範鍚馃摙1.濡備綍鍐欎竴涓狶oader1銆傚湪涓婁竴绡囨枃绔犱腑锛屾垜浠皥鍒颁簡涓€浜涘姞杞藉櫒閰嶇疆銆傞偅涔堝鏋滄妸閭ｄ簺寮曠敤鐨刲oader鏀规垚鎴戜滑鍐欑殑loader鎬庝箞鍔炲憿锛熺幇鍦紝璁╂垜浠湅鐪嬪浣曟墜鍔ㄧ紪鍐欎竴涓畝鍗曠殑鍔犺浇鍣ㄥ苟灏嗗叾搴旂敤鍒版垜浠殑椤圭洰涓€?.椤圭洰缁撴瀯棣栧厛鐢ㄤ竴寮犲浘鏉ョ湅涓€涓嬫垜浠殑椤圭洰缁撴瀯銆傚涓嬪浘鎵€绀猴細鎴戜滑瑕佺紪鍐欑殑loader鏀惧湪loaders鏂囦欢澶逛笅锛岄噷闈㈢殑replaceLoader.js鏂囦欢鍖呭惈浜嗘垜浠嵆灏嗙紪鍐欑殑loader鐨勪唬鐮侀€昏緫銆備箣鍚巌ndex.js鏂囦欢灏辨槸鎴戜滑鐨勫叆鍙ｆ枃浠讹紝鎴戜滑鏀剧疆涓氬姟閫昏緫鐨勫湴鏂广€倃ebpack.config.js鏂囦欢鏀剧疆浜唚ebpack鐨勭浉鍏抽厤缃紝dist鏂囦欢澶逛腑鐨勫唴瀹规槸鎴戜滑閫氳繃webpack鎵撳寘鍚庣敓鎴愮殑鎵撳寘鏂囦欢銆?.涓氬姟浠ｇ爜缂栧啓(1)鍏ュ彛鏂囦欢浠ｇ爜涓嬮潰鎴戜滑鍏堟潵缂栧啓鍏ュ彛鏂囦欢index.js鐨勪唬鐮併€傚叿浣撲唬鐮佸涓嬶細console.log('hellomonday');(2)鍔犺浇鍣ㄥ叆鍙ｆ枃浠剁殑鍐呭鍐欒捣鏉ュ緢绠€鍗曘€傛垜浠瀹炵幇鐨勬槸杈撳嚭璇彞hellomonday銆傜幇鍦紝鎴戜滑鏉ュ啓loader鐨勫唴瀹癸紝灏卞埌浜嗕慨鏀瑰叆鍙ｆ枃浠秈ndex.js鍐呭鐨勫湴姝ヤ簡銆俽eplaceLoader.js鏂囦欢鐨勪唬鐮佸涓嬶細module.exports=function(source){constresult=source.replace('monday','mondaylab');this.callback(null,result);}涓婇潰浠ｇ爜鐨勬剰鎬濇槸锛屽皢鍏ュ彛鏂囦欢index.js涓殑monday鏇挎崲涓簃ondaylab銆傝繖鏍峰啓濂藉儚娌′粈涔堥棶棰橈紝浣嗘槸澶у鏈夋病鏈夋兂杩囷紝鏈夋椂鍊欐垜浠紶閫掔殑灞炴€у彲鑳戒細寰堝鎬紝涓嶄竴瀹氭瘡娆￠兘杩欐牱鐢ㄥ瓧绗︿覆鐨勫舰寮忔潵鏇挎崲銆傚洜姝わ紝鎴戜滑鍙傝€僿ebpack瀹樻柟鎺ㄨ崘鐨刲oadertils宸ュ叿鏉ヨВ鍐宠繖涓棶棰樸€傜1姝ワ細瀹夎loader-utils鎻掍欢銆傚叿浣撳懡浠ゅ涓嬶細npminstallloader-utils--save-dev绗簩姝ワ細杞崲loader鏂囦欢銆傛帴涓嬫潵鎴戜滑鍗囩骇replaceLoader.js鏂囦欢锛屽叿浣撲唬鐮佸涓嬶細constloaderUtils=require('loader-utils');//涔嬫墍浠ヤ娇鐢╢unction鏄负浜嗕笟鍔″眰璋冪敤杩欎釜//source鏄鍏ユ枃浠剁殑婧愪唬鐮乵odule.exports=function(source){//getOptions浼氳嚜鍔ㄥ府鎴戜滑瑙ｆ瀽this.query锛岀劧鍚庢妸鍙傛暟鐨勬墍鏈夊唴瀹规斁鍒皁ptions涓璫onstoptions=loaderUtils.getOptions(this);constresult=source.replace('monday',options.name);this.callback(null,result);}鍙互鐪嬪埌锛岄€氳繃浣跨敤loaderUtils鎻掍欢锛岄棿鎺ヨ皟鐢╣etOptions鏂规硶鑷姩甯垜浠В鏋恡his.query锛屼粠鑰屽緱鍒版垜浠兂瑕佺殑鍐呭銆傚€煎緱娉ㄦ剰鐨勬槸锛屾垜浠繕闇€瑕佷簡瑙ｄ竴涓媡his.callback鐨勫唴瀹广€備竴鑸儏鍐典笅锛屽鏋滄垜浠凡缁忔敹鍒版簮鐮乻ource锛岄偅涔堢幇鍦ㄥ彧鑳藉婧愮爜杩涜澶勭悊浜嗐€備絾鏄紝鏈夋椂鍊欙紝鎴戜滑鎯充娇鐢ㄤ竴浜泂ourceMap锛屾垨鑰呭垎鏋愬畬婧愮爜鍚庯紝鎴戜滑涓嶄粎瑕佽繑鍥炴簮鐮侊紝杩樿鎶妔ourceMap甯﹀洖鏉ャ€傚洜涓烘垜浠繑鍥炵殑鏃跺€欏彧鑳借繑鍥炰竴涓弬鏁帮紝鍏朵綑澶氫綑鐨勫唴瀹规槸甯︿笉鍑烘潵鐨勩€傝繖鏃跺€欏氨闇€瑕乼his.callback鏉ュ府鎴戜滑甯﹀嚭sourceMap浜嗐€傛墍浠ワ紝涓€鑸娇鐢╰his.callback鏉ヨ繑鍥炲唴瀹广€?3)寮曠敤loader鐜板湪锛屾垜浠湪webpack.config.js涓紝鏉ヤ粙缁嶆垜浠笂闈㈢殑loader銆傚叿浣撻厤缃涓嬶細constpath=require('path');module.exports={mode:'development',entry:{main:'./src/index.js'},module:{rules:[{test:/\.js/,use:[{loader:path.resolve(__dirname,'./loaders/replaceLoader.js'),//nameinoptions.name涓婇潰options:{name:'mondaylab'}}]}]},output:{path:path.resolve(__dirname,'dist'),filename:'[name].js'}}閫氳繃涓婇潰鐨勬柟娉曪紝鎴戜滑鍐欎簡涓€涓畝鍗曠殑loader锛屽疄鐜颁簡鏇挎崲monday涓簃ondaylab鐨勪竴涓嚱鏁般€傚苟涓旇鎴戜滑鍦╳ebpack涓娇鐢ㄦ垜浠嚜宸辩殑鍔犺浇鍣ㄣ€?4)鍦╨oader涓仛涓€浜涘紓姝ユ搷浣溿€傜幇鍦紝濡傛灉鎴戜滑鎯冲鍔犺浇鍣ㄨ繘琛屼竴浜涘紓姝ユ搷浣滐紝鎴戜滑璇ュ浣曞疄鐜板憿锛熶负鎴戜滑缂栧啓鐨勫姞杞藉櫒娣诲姞寮傛鎿嶄綔锛岄渶瑕佽皟鐢ㄥ畼鏂规彁渚涚粰鎴戜滑鐨則his.async()API鏉ュ疄鐜般€傜幇鍦紝璁╂垜浠慨鏀箁eplaceLoader.js鏂囦欢鐨勪唬鐮併€傚叿浣撲唬鐮佸涓嬶細constloaderUtils=require('loader-utils');module.exports=function(source){constoptions=loaderUtils.getOptions(this);//璋冪敤this.async()API缁欏嚭寮傛浠ｇ爜Useconstcallback=this.async();setTimeout(()=>{constresult=source.replace('monday',options.name);callback(null,result);},1000);}杩欐牱鎴戜滑灏卞彲浠ュ湪loader涓啓寮傛浠ｇ爜鏉ュ疄鐜版垜浠兂瑕佺殑鏁堟灉銆?5)loader璺緞鑷畾涔夋湁涓皬娉ㄦ剰鐐广€傛垜浠湪webpack.config.js鏂囦欢涓厤缃甽oader鐨勮矾寰勬椂锛屾瘡娆￠兘闇€瑕乸ath.resolve鏉ユ煡鎵捐矾寰勬枃浠躲€傛枃浠跺皯鐨勬椂鍊欒繕濂斤紝鏂囦欢澶氫簡鎬庝箞鍔烇紵浼氫笉浼氬緢楹荤儲銆傛墍浠ワ紝鎴戜滑鍙傝€價esolveLoader鏉ョ畝鍖栧畠銆傜幇鍦ㄦ垜浠湪webpack.config.js鏂囦欢涓繘琛屾敼閫犮€傚叿浣撻厤缃涓嬶細constpath=require('path');module.exports={//鍏堝幓node_modules閲屾壘锛屽鏋滄壘涓嶅埌鍐嶅幓./loaders鐩綍閲屾壘resolveLoader:{modules:['node_modules','./loaders']},module:{rules:[{test:/\.js/,use:[{loader:'replaceLoader'}]}]}}鍙傝€冨墠绔珮绾ч潰璇曢鐨勮缁嗙瓟妗堬紝閰嶇疆resolveLoader鏉ユ墽琛宭ookup鍦ㄦ枃浠剁洰褰曚笂锛岀畝鍖栦簡璺緞鍐呭銆備簩銆佸浣曞啓涓€涓狿lugin1.宀佸瞾鍦ㄨ瑙ｆ彃浠朵箣鍓嶏紝鍏堜簡瑙ｄ竴涓媗oader鍜宲lugin鐨勫尯鍒€傚綋鎴戜滑鍦ㄦ簮鐮佷腑寮曞叆涓€涓柊鐨刯s鏂囦欢鎴栬€呭叾浠栨牸寮忕殑鏂囦欢鏃讹紝鎴戜滑鍙互浣跨敤loader鏉ュ府鍔╂垜浠鐞嗘垜浠紩鐢ㄧ殑loader鏂囦欢銆俵oader鐨勪綔鐢ㄥ氨鏄府鍔╂垜浠鐞嗗紩鐢ㄧ殑妯″潡銆傝嚦浜庢彃浠讹紝鎴戜滑鍦ㄦ墦鍖呯殑鏃跺€欙紝鍦ㄦ煇浜涚壒瀹氱殑鏃跺埢锛屾瘮濡傛垜浠墦鍖呬箣鍚庯紝鎴戜滑瑕佺敓鎴愪竴涓猦tml鏂囦欢銆傝繖鏃跺€欐垜浠彲浠ヤ娇鐢╤tmlWebpackPlugin杩欎釜鎻掍欢銆備娇鐢ㄥ悗浠栦細鍦ㄦ墦鍖呭畬鎴愬悗甯垜浠敓鎴愬搴旂殑html鏂囦欢銆傚啀姣斿锛屾垜浠渶瑕佸湪鎵撳寘鍓嶆竻绌篸ist鐩綍銆傝繖鏃跺€欐垜浠氨鍙互浣跨敤cleanWebpackPlugin鏉ュ府鎴戜滑鍋氳繖浠朵簨銆傞偅涔堬紝鎻掍欢浠€涔堟椂鍊欑敓鏁堝憿锛熷湪鎴戜滑鎵撳寘杩囩▼鐨勬煇涓椂鍒伙紝灏辨槸鎻掍欢鐢熸晥鐨勫満鏅€俻lugin鐨勫啓娉曚細姣攍oader闅句竴鐐广€備絾鏄紝濡傛灉浣犵湅杩噖ebpack鐨勬簮鐮侊紝浣犲彲鑳界煡閬搘ebpack鐨勪竴浜涘簳灞傚師鐞嗘槸鍩轰簬plugin缂栧啓鐨勩€傛墍浠ワ紝鎴戜滑杩樻槸鏈夊繀瑕佸涔犱竴涓嬫彃浠剁紪鍐欑殑銆備笅闈㈠皢甯﹂澶у鍐欎竴涓畝鍗曠殑鎻掍欢~2銆傞」鐩粨鏋勫浜巜ebpack鐨刾lugin鏉ヨ锛屾槸鍩轰簬鍙戝竷鑰呰闃呯殑璁捐妯″紡锛屼篃鍙互璇存槸鍩轰簬浜嬩欢椹卞姩鏉ュ疄鐜扮殑銆傚湪杩欑浜嬩欢椹卞姩涓紝浠ｇ爜鐨勬墽琛屾槸鐢变簨浠堕┍鍔ㄧ殑銆傛帴涓嬫潵锛岃鎴戜滑缂栧啓涓€涓畝鍗曠殑鎻掍欢銆傞鍏堢敤涓€寮犲浘鏉ョ湅涓€涓嬫垜浠殑椤圭洰缁撴瀯銆傚涓嬪浘鎵€绀猴細鎴戜滑瑕佸啓鐨勬彃浠舵斁鍦╬lugins鏂囦欢澶逛笅锛岄噷闈㈢殑copyright-webpack-plugin.js鏂囦欢鍖呭惈浜嗘垜浠鍐欑殑鎻掍欢鐨勪唬鐮侀€昏緫銆備箣鍚巌ndex.js鏂囦欢灏辨槸鎴戜滑鐨勫叆鍙ｆ枃浠讹紝鎴戜滑鏀剧疆涓氬姟閫昏緫鐨勫湴鏂广€倃ebpack.config.js鏂囦欢鏀剧疆浜唚ebpack鐨勭浉鍏抽厤缃紝dist鏂囦欢澶逛腑鐨勫唴瀹规槸鎴戜滑閫氳繃webpack鎵撳寘鍚庣敓鎴愮殑鎵撳寘鏂囦欢銆?.涓氬姟浠ｇ爜缂栧啓(1)鍏ュ彛鏂囦欢浠ｇ爜涓嬮潰鎴戜滑鍏堟潵缂栧啓鍏ュ彛鏂囦欢index.js鐨勪唬鐮併€傚叿浣撲唬鐮佸涓嬶細console.log('hellomonday');(2)缂栧啓鎻掍欢鐜板湪锛屾垜浠潵缂栧啓鎻掍欢鐨勫唴瀹广€俢opyright-webpack-plugin.js鏂囦欢鐨勪唬鐮佸涓嬶細compile.tap('CopyrightWebpackPlugin',()=>{console.log('compiler');});//寮傛鏃跺埢//鎯虫妸浠ｇ爜鏀惧埌dist鐩綍涓嬬殑鏃跺€欙紝闇€瑕佸埌涓嬮潰杩欎釜鍑芥暟//Compilation瀛樻斁鎵€鏈夋墦鍖呯殑鍐呭锛孋ompilation.assets鏀剧疆鐢熸垚鐨勫唴瀹筩ompiler.hooks.emit.tapAsync('CopyrightWebpackPlugin',(Compilation,cb)=>{debugger;//鍦ㄤ唬鐮佷腑娣诲姞涓€涓枃浠讹紝copyright.txtCompilation.assets['copyright.txt']={source:function(){return'copyrightbymonday';},澶у皬:function(){return19;}};cb();})}}module.exports=CopyrightWebpackPlugin;涓婇潰鎻掍欢瑕佸疄鐜扮殑鍔熻兘鏄幏鍙栫増鏈巿鏉冧俊鎭?3)寮曠敤鎻掍欢鐜板湪锛屾垜浠湪webpack.config.js涓紝浠嬬粛涓€涓嬫垜浠笂闈㈢殑鎻掍欢銆傚叿浣撻厤缃涓嬶細constpath=require('path');constCopyrightWebpackPlugin=require('./plugins/copyright-webpack-plugin');module.exports={mode:'development',entry:{main:'./src/index.js'},鎻掍欢:[newCopyrightWebpackPlugin({name:'monday'})],杈撳嚭:{path:path.resolve(__dirname,'dist'),鏂囦欢鍚?'[name].js'}}閫氳繃涓婇潰鐨勪唬鐮侊紝鎴戜滑鍙互浜嗚В鍒帮紝鍦紙2锛変腑锛屾垜浠鍏堥渶瑕佸畾涔変竴涓被锛岀劧鍚庡湪绫讳腑鍐欎竴涓瀯閫犲嚱鏁板拰涓€涓猘pply()鏂规硶鏉ヨ皟鐢ㄣ€傜劧鍚庯紝鍙互鐪嬪埌锛?锛夛紝浣跨敤require鏂规硶鏂板缓涓€涓疄渚嬶紝瀹炰緥鍖栦竴涓彃浠讹紝鍦ㄩ」鐩腑浣跨敤杩欎釜鎻掍欢銆傛渶鍚庢垜浠殑椤圭洰鎵撳寘鐨勬椂鍊欎細鐢熸垚涓€涓猟ist鐩綍锛岀洰褰曚笅浼氬鍔犱竴涓猚opyright.txt鏂囦欢锛屾枃浠朵腑鐨勫唴瀹规槸copyrightbymonday銆?.缁撴潫璇湪涓婇潰鐨勬枃绔犱腑锛屾垜璁茶В浜唋oader鍜宲lugin鐨勫熀鏈紪鍐欐€濊矾锛屼互鍙婂浣曞湪椤圭洰涓娇鐢ㄣ€傜浉淇″ぇ瀹跺杩欎釜鍐呭閮芥湁浜嗗熀鏈殑浜嗚В銆傝嚦姝わ紝loader鍜宲lugin鐨勭紪鍐欒瑙ｅ氨缁撴潫浜嗭紒甯屾湜瀵瑰ぇ瀹舵湁鎵€甯姪~
