鍓嶈█浠婂ぉ寰堥珮鍏村垎浜竴绡囨垜杩涘叆寮€鍙戜互鏉ヤ綋楠寃ebpack鐨勬枃绔狅紝鎬荤粨浜嗕竴浜涚煡璇嗙偣鈥斺€斿垎浜粰骞垮ぇ鍓嶇鐖卞ソ鑰咃紝甯屾湜瀵瑰ぇ瀹舵湁鎵€甯姪~馃榾寰堜箙寰堜箙浠ュ墠锛屽綋鎴戜滑鐨勫墠绔繕鍙槸涓€涓〉闈㈡姞鍥剧殑鏃跺€欙紝鎴戜滑鍦ㄥ紑鍙戜竴涓猦tml椤甸潰鐨勬椂鍊欙紝閫氬父浼氶亣鍒拌繖鏍风殑鎯呭喌锛氶渶瑕佸紩鍏ュ崄鍑犱釜css鍜宩s鏂囦欢锛岃€屼笖鍥犱负瀹冧滑鏄浉鍏崇殑鐩镐簰渚濊禆锛屾墍浠ュ紩鍏ョ殑椤哄簭涓嶈兘涔便€備紶缁熺殑html+css+js寮€鍙戞柟寮忔棤娉曞緢濂界殑鍒╃敤less/scss绛塩ss棰勫鐞嗗櫒鍜孍S6+鐨勯珮绾ц娉曘€備唬鐮佸鐢ㄦ€у樊锛屽彲缁存姢鎬у樊銆傝繖鏃跺€欏氨闇€瑕佷竴涓伐鍏锋潵澶勭悊杩欎簺闂锛寃ebpack灏卞簲杩愯€岀敓浜嗐€倃ebpack鍙互鐪嬩綔鏄竴涓ā鍧楁墦鍖呭伐鍏凤細瀹冩妸鍚勭闈欐€佽祫婧愶紙濡傦細javaScript鏂囦欢銆佸浘鐗囨枃浠躲€乧ss鏂囦欢绛夛級缁勫悎鍦ㄤ竴璧凤紝鎵撳寘濂界殑鏂囦欢灏卞彲浠ュ湪娴忚鍣ㄤ腑浣跨敤浜嗐€倃ebpack鐨勪紭鐐癸細浠ｇ爜杞崲锛歵ypeScript缂栬瘧鎴恓avaScript锛宻css锛宭ess缂栬瘧鎴恈ss銆傛枃浠朵紭鍖栵細鍘嬬缉javaScript銆乧ss銆乭tml浠ｇ爜锛屽帇缂╁悎骞跺浘鐗囥€備唬鐮佹媶鍒嗭細鎻愬彇澶氫釜椤甸潰鐨勫叕鍏变唬鐮侊紝灏嗕笉闇€瑕佸湪棣栧睆鎵ц鐨勪唬鐮佹彁鍙栧嚭鏉ワ紝璁╁叾寮傛鍔犺浇銆傛ā鍧楀悎骞讹細涓€涓ā鍧楀寲椤圭洰涓細鏈夊緢澶氭ā鍧楀拰鏂囦欢锛岄渶瑕佷竴涓瀯寤哄嚱鏁板皢妯″潡鍒嗙被鍚堝苟鍒颁竴涓枃浠朵腑銆傝嚜鍔ㄥ埛鏂帮細鐩戞帶鏈湴婧愪唬鐮佸彉鍖栵紝鑷姩閲嶅缓鍜屽埛鏂版祻瑙堝櫒銆傚己澶х殑鎵╁睍鎬у拰瀹屽杽鐨勬彃浠舵満鍒躲€倃ebpack鎵撳寘杩囩▼锛氫娇鐢╞abel瀹屾垚浠ｇ爜杞崲锛岀敓鎴愬崟涓枃浠剁殑渚濊禆銆備粠鍏ュ彛鐐归€掑綊鍒嗘瀽锛岀敓鎴愪緷璧栧浘銆傚皢姣忎釜寮曠敤鐨勬ā鍧楁墦鍖呮垚涓€涓珛鍗虫墽琛岀殑鍑芥暟銆傚皢鏈€缁堢殑bundle鏂囦欢鍐欏叆bundle.js銆俠igcore:entry:js鍏ュ彛婧愭枃浠秓utput:generatefileloader:鏂囦欢澶勭悊plugins:鎻掍欢锛屾瘮loader鏇村己澶э紝鍙互浣跨敤鏇村鐨剋ebpackapiEntrywebpack搴旇浣跨敤鍝釜妯″潡浣滀负鍏ュ彛鏂囦欢鏉ユ瀯寤哄畠鐨勫唴閮ㄤ緷璧栧浘Start銆備竴鏃﹁繘鍏ュ叆鍙ｇ偣锛寃ebpack浼氭壘鍑哄叆鍙ｇ偣锛堢洿鎺ュ拰闂存帴锛変緷璧栧摢浜涙ā鍧楀拰搴擄紝鐒跺悗澶勭悊姣忎釜渚濊禆椤瑰苟杈撳嚭鍒扮О涓篵undle鐨勬枃浠躲€傚崟涓潯鐩細鏉＄洰鏄竴涓瓧绗︿覆module.exports={entry:'./src/index.js'}澶氫釜鏉＄洰锛氭潯鐩槸涓€涓璞odule.exports={entry:{index:'./src/index.js',manager:'./src/manager.js'}}Output鍛婅瘔webpack灏嗗畠鍒涘缓鐨刡undle杈撳嚭鍒板摢閲岋紝浠ュ強濡備綍鍛藉悕杩欎簺鏂囦欢锛岃繖浜涘彲浠ュ湪webpack閰嶇疆鏂囦欢涓寚瀹氥€傚崟鍏ュ彛閰嶇疆module.exports={entry:'./src/index.js',output:{filename:'bundle.js',path:\_\_dirname+'/dist'}};澶氬叆鍙ｉ厤缃甿odule.exports={entry:{app:'./src/app.js',search:'./src/search.js'},output:{filename:'\[name\].js',path:\_\_dirname+'/dist'}}浣跨敤[name]鍗犱綅绗︽潵淇濊瘉鏂囦欢鍚嶇殑鍞竴Loaderloader浠ヤ究webpack鍙互澶勭悊閭ｄ簺闈瀓avaScript鏂囦欢锛坵ebpack鏈韩鍙噦javaScript锛夈€傚姞杞藉櫒鍙互灏嗘墍鏈夌被鍨嬬殑鏂囦欢杞崲鎴恮ebpack鍙互澶勭悊鐨勬湁鏁堟ā鍧楋紝鐒跺悗浣犲氨鍙互浣跨敤webpack鐨勬墦鍖呰兘鍔涙潵澶勭悊瀹冧滑浜嗐€俵oader鐨勭壒鐐逛竴涓狶oader鑱岃矗鍗曚竴锛屽彧闇€瑕佸畬鎴愪竴娆¤浆鎹€侺oader鍏跺疄灏辨槸涓€涓狽ode.js妯″潡锛岄渶瑕佸鍑轰竴涓嚱鏁般€傚姞杞界▼搴忔€绘槸浠庡彸鍒板乏璋冪敤銆傚父鐢ㄧ殑loader澶勭悊鏍峰紡css-loader锛氬姞杞?css鏂囦欢锛宻tyle-loader锛氫娇鐢╯tyle鏍囩灏哻ss-loader鍐呴儴鏍峰紡娉ㄥ叆鍒版垜浠殑html椤甸潰涓璴ess-loader锛宻ass-loader锛氳В鏋恈ss棰勫鐞嗗櫒澶勭悊js璁╀綘鍙互浣跨敤鏈€鏂扮殑js浠ｇ爜锛圗S6銆丒S7...锛夎繖鏍峰氨鍙互浣跨敤鍩轰簬js鎵╁睍鐨勮瑷€锛屾瘮濡俁eact鐨凧SX锛涘湪澶勭悊鏂囦欢鍜屽浘鐗囪祫婧愭椂锛屽父鐢ㄧ殑涓ょ鍔犺浇鍣ㄦ槸file-loader鎴杣rl-loader锛屼袱鑰呯殑涓昏鍖哄埆鏄€倁rl-loader鍙互璁剧疆鍥剧墖澶у皬闄愬埗銆傚綋鍥剧墖瓒呭嚭闄愬埗鏃讹紝鍏惰涓虹瓑鍚屼簬file-loader銆傚綋鍥剧墖涓嶈秴杩囬檺鍒舵椂锛屽浘鐗囦細浠ase64鐨勫舰寮忔墦鍖呭埌css鏂囦欢涓紝鍑忓皯璇锋眰澶勭悊.vue鏂囦欢鐨勬鏁皏ue-loader鏄痺ebpack鐨刲oader妯″潡锛屽彲浠ヨ鎴戜滑鍐欏崟鏂囦欢缁勪欢鍦?vue鏂囦欢鏍煎紡涓€傚崟鏂囦欢缁勪欢鏂囦欢鍖呭惈涓変釜閮ㄥ垎锛屾ā鏉裤€佽剼鏈拰鏍峰紡銆倂ue-loader妯″潡鍏佽webpack浣跨敤鍗曠嫭鐨勫姞杞藉櫒妯″潡锛堜緥濡俿ass鎴杝css鍔犺浇鍣級鎻愬彇鍜屽鐞嗘瘡涓儴鍒嗐€傛璁剧疆鍏佽鎴戜滑浣跨敤.vue鏂囦欢杩涜鏃犵紳缂栫▼銆傚紑鍙戜竴涓猯oader闇€姹傦細鎵嬪啓涓€涓猯oader锛屾妸'kobe'杞垚'BlackMamba'銆傚綋鐒讹紝鎮ㄥ彲浠ユ牴鎹嚜宸辩殑闇€瑕佽繘琛岃璁°€傝繖閲屽彧鏄В閲婁竴涓嬫柟娉曘€?.鍦ㄦ牴鐩綍涓嬬紪鍐檒oader锛屾柊寤轰竴涓洰褰昸obe-loader浣滀负鎴戜滑loader鐨勫悕瀛楋紝鎵цnpminit-y鍛戒护锛屾柊寤轰竴涓ā鍧楀寲椤圭洰锛岀劧鍚庢柊寤轰竴涓猧ndex.js鏂囦欢銆傜浉鍏虫簮鐮佸涓嬶細module.exports=function(content){returncontent&&content.replace(/kobe/gi,'BlackMamba')}2.娉ㄥ唽妯″潡姝ｅ父銆傛垜浠畨瑁呯殑loader鏄粠npm涓嬭浇瀹夎鐨勶紝浣嗘槸鎴戜滑鍙互浣跨敤kobe-loader鐩綍涓嬬殑npmlink鏉ュ仛鎶婃湰鍦版鍦ㄥ紑鍙戠殑涓€涓ā鍧楃殑婧愮爜閾炬帴鍒伴」鐩殑node_modules鐩綍涓嬶紝鑰屼笉鐢ㄥ彂甯冩ā鍧楋紝杩欐牱椤圭洰鍙互鐩存帴浣跨敤鏈湴鐨刵pm妯″潡銆俷pmlink鐒跺悗鍦ㄩ」鐩牴鐩綍涓嬫墽琛屽涓嬪懡浠ゅ皢鍏ㄥ眬娉ㄥ唽鐨勬湰鍦皀pm妯″潡閾炬帴鍒伴」鐩殑node_modules$npmlinkkobe-loader娉ㄥ唽鎴愬姛鍚庢垜浠彲浠ュ湪node_modules鐩綍涓嬫壘鍒板搴旂殑loader.3.鍦╳ebpack涓厤缃甽oader鍦╳ebpack.base.conf.js涓坊鍔犲涓嬮厤缃畕test:/\\.js/,loader:'kobe-loader'}杩欎釜鏃跺€欐垜浠湪鎵€鏈塲s涓嬪啓'kobe-loader'鏂囦欢'骞跺皢鍏跺叏閮ㄦ浛鎹负'榛戞浖宸?銆?銆佷互涓婇厤缃弬鏁颁负纭紪鐮佹浛鎹€傚鏋滄垜鎯抽€氳繃閰嶇疆椤规敼鍙樺畠浠紝鎴戝彲浠ュ湪鍔犺浇鍣ㄤ腑杩涜濡備笅璋冩暣銆?/custom-loader/index.jsvarutils=require('loader-utils')module.exports=function(content){constoptions=utils.getOptions(this)returncontent&&content.replace(/kobe/gi,options.name)}//webpack.base.conf.js{test:/\\.js/,use:{loader:'kobe-loader',options:{name:'kobe',}}}Plugin鏄竴涓姛鑳芥ā鍧楋紝涓撴敞浜庡湪webpack鐨勭紪璇戣繃绋嬩腑澶勭悊涓€涓壒瀹氱殑浠诲姟锛屽彲浠ョО涔嬩负涓€涓彃鍏ャ€侾lugin鐨勭壒鐐规槸涓€涓嫭绔嬬殑妯″潡妯″潡鏆撮湶浜嗕竴涓猨s鍑芥暟鍑芥暟鍘熷瀷锛坧rototype锛夛紝骞跺畾涔変簡涓€涓猘pply鏂规硶娉ㄥ叆鍒癱ompiler瀵硅薄涓€俛pply鍑芥暟闇€瑕侀€氳繃compiler瀵硅薄鎸傝浇涓€涓獁ebpack浜嬩欢閽╁瓙锛岄挬瀛愮殑鍥炶皟鍙互鑾峰彇褰撳墠缂栬瘧鐨勭紪璇戝璞°€傚鏋滄槸寮傛缂栬瘧鎻掍欢锛屽彲浠ヨ幏鍙朿allback鍥炶皟瀹屾垚鑷畾涔夊瓙缂栬瘧杩囩▼锛屽鐞哻omplition瀵硅薄鍐呴儴鏁版嵁銆傚鏋滀綘寮傛缂栬瘧鎻掍欢锛屽洖璋冧細鍦ㄦ暟鎹鐞嗗畬鎴愬悗鎵ц銆傚父鐢ㄧ殑PluginHotModuleReplacementPlugin浠ｇ爜鐑浛鎹€傚洜涓篐ot-Module-Replacement鐨勭儹鏇存柊渚濊禆浜巜ebpack-dev-server锛屽綋鎵撳寘鏂囦欢鍙戠敓鍙樺寲鏃朵細鏇存柊鎵撳寘鏂囦欢鎴栬€呴噸鏂板姞杞芥暣涓〉闈紝鑰孒RM鍙洿鏂颁慨鏀圭殑閮ㄥ垎銆侶tmlWebpackPlugin锛岀敓鎴恏tml鏂囦欢銆傚皢webpack涓璭ntry閰嶇疆鐨勭浉鍏砮ntrychunk鍜宔xtract-text-webpack-plugin鎻愬彇鐨刢ss鏍峰紡鎻掑叆鍒版彃浠舵彁渚涚殑妯℃澘鎴栬€卼emplateContent閰嶇疆椤规寚瀹氱殑鍐呭涓敓鎴恏tml鏂囦欢銆傚叿浣撴彃鍏ユ柟娉曟槸灏嗘牱寮忛摼鎺ユ彃鍏ュ埌head鍏冪礌涓紝鑴氭湰鎻掑叆鍒癶ead鎴栬€卋ody涓€侲xtractTextPlugin锛岀敓鎴恈ss鏂囦欢鑰屼笉鏄唴鑱斻€傛湰鎻掍欢鐨勪富瑕佺洰鐨勬槸鎻愬彇css鏍峰紡锛岄槻姝㈠湪js涓墦鍖呮牱寮忓鑷撮〉闈㈡牱寮忓姞杞戒贡搴忕殑鐜拌薄銆侼oErrorsPlugin鎶ラ敊浣嗕笉閫€鍑簑ebpack杩涚▼UglifyJsPlugin锛屼唬鐮佷笐闄嬶紝寮€鍙戣繃绋嬩腑涓嶅缓璁紑鍚€倁glifyJsPlugin鐢ㄤ簬鍘嬬缉js鏂囦欢锛屼粠鑰屽噺灏廽s鏂囦欢鐨勪綋绉紝鍔犲揩鍔犺浇閫熷害銆倁glifyJsPlugin浼氶檷浣巜ebpack鐨勭紪璇戦€熷害銆傚缓璁紑鍙戞椂鍏抽棴锛岄儴缃叉椂鎵撳紑銆傚涓猦tml鍏变韩涓€涓猨s鏂囦欢锛坈hunk锛夛紝鍙敤CommonsChunkPluginpurifycss-webpack銆傛墦鍖呯紪璇戞椂锛屽彲浠ュ幓鎺夐〉闈㈠拰js涓笉鐢ㄧ殑css锛岃繖鏍峰湪浣跨敤绗笁鏂圭被搴撴椂锛屽彧鍔犺浇鐢ㄥ埌鐨勭被锛屽ぇ澶у噺灏慶ss浣撶Нoptimize-css-assets-webpack-plugin鍘嬬缉css锛屼紭鍖朿ss缁撴瀯锛屾柟渚跨綉椤靛姞杞藉拰娓叉煋webpack-parallel-uglify-plugin鍙互骞惰杩愯UglifyJS鎻掍欢锛屽彲浠ユ湁鏁堝噺灏戞瀯寤烘椂闂淬€傚紑鍙戜竴涓彃浠禬ebpack鍦ㄧ紪璇戣繃绋嬩腑浼氬箍鎾緢澶氫簨浠讹紝姣斿run銆乧ompile銆乨one銆乫ail绛夛紝鍙互鏌ョ湅瀹樼綉锛沇ebpack鐨勪簨浠舵祦鏈哄埗閲囩敤瑙傚療鑰呮ā寮忥紝鎴戜滑缂栧啓鐨勬彃浠跺彲浠ョ洃鍚琖ebpack浜嬩欢瑙﹀彂鐩稿簲鐨勫鐞嗛€昏緫锛涙彃浠朵腑鍙互浣跨敤Webpack鎻愪緵鐨勫緢澶欰PI锛屾瘮濡傝鍙栬緭鍑鸿祫婧愩€佷唬鐮佸潡銆丮odules鍜屼緷璧栫瓑锛?.鍦ㄦ牴鐩綍涓嬬紪鍐欐彃浠讹紝鏂板缓鐩綍my-plugin浣滀负鎴戜滑缂栧啓鐨勬彃浠跺悕绉帮紝鎵цnpminit-y鍛戒护锛屾柊寤烘ā鍧楀寲椤圭洰锛岀劧鍚庢柊寤虹储寮?js鏂囦欢銆傜浉鍏虫簮鐮佸涓嬶細classMyPlugin{constructor(doneCallback,failCallback){//淇濆瓨鍒涘缓鎻掍欢瀹炰緥鏃朵紶鍏ョ殑鍥炶皟鍑芥暟this.doneCallback=doneCallbackthis.failCallback=failCallback}apply(compiler){//鎴愬姛瀹屾垚涓€涓畬鏁寸殑缂栬瘧杈撳嚭杩囩▼锛屼細瑙﹀彂done浜嬩欢浜嬩欢浼氳瑙﹀彂compiler.plugin('failed',err=>{this.failCallback(err)})}}module.exports=MyPlugin2.鎸夌収涓婇潰鐨勬柟娉曟敞鍐屾ā鍧楋紝鎴戜滑浣跨敤my-涓嬬殑npm閾炬帴plugin鐩綍瀵煎嚭妯″潡锛屼笉鍙戝竷妯″潡灏嗘鍦ㄥ紑鍙戠殑鏈湴妯″潡鐨勬簮浠ｇ爜閾炬帴鍒伴」鐩殑node_modules鐩綍锛岃繖鏍烽」鐩氨鍙互鐩存帴浣跨敤鏈湴鐨刵pm妯″潡銆俷pmlink鐒跺悗鍦ㄩ」鐩牴鐩綍涓嬫墽琛屽涓嬪懡浠わ紝灏嗗叏灞€娉ㄥ唽鐨勬湰鍦皀pm妯″潡閾炬帴鍒伴」鐩殑node_modules$npmlinkmy-plugin娉ㄥ唽鎴愬姛鍚庯紝鎴戜滑鍙互鍦╪ode_modules鐩綍涓嬫壘鍒板搴旂殑鎻掍欢銆?銆侀厤缃彃浠跺湪webpack.base.conf.js涓坊鍔犲涓嬮厤缃彃浠讹細\[newMyPlugin(stats=>{console.info('缂栬瘧鎴愬姛锛?)},err=>{console.error('缂栬瘧澶辫触!')})]鎵ц杩愯鎴栫紪璇戝懡浠わ紝鍙互鐪嬪埌鎴戜滑鐨勬彃浠跺彲浠ヨ繍琛屼簡銆傚ソ浜唦浠ヤ笂灏辨槸鎴戞€荤粨鐨剋ebpack鍟︼紒濡傛灉瑙夊緱瀵逛綘鏈夊府鍔╋紝璁板緱鍔ㄥ姩浣犵殑灏忔媷鎸囧摝馃憤~
