搴熻瘽涓嶅璇达紝鐪嬪畼鏂硅浠€涔?銆乄ebpack5鐨勬柊鐗规€?.浣跨敤鎸佷箙缂撳瓨鎻愬崌鏋勫缓鎬ц兘2.浣跨敤鏇村ソ鐨勭畻娉曞拰榛樿鍊兼彁鍗囬暱鏈熺紦瀛橈紙闀挎湡缂撳瓨锛?.娓呯悊鍐呴儴缁撴瀯锛屼笉寮曞叆浠讳綍鐮村潖鎬х殑鍙樺寲4.寮曞叆涓€浜涚牬鍧忔€х殑鍙樺寲锛岃v5鐗堟湰鍙互灏藉彲鑳介暱鐨勪娇鐢紵npminit-ynpmiwebpack@next--save-dev鍙互鐩存帴閫氳繃@next瀹夎webpack5鐗堟湰锛屽綋鍓嶇増鏈负鈥淾5.0.0-alpha.23鈥濆厛鐪嬪熀鏈粨鏋勨敎鈹€鈹€bootstrap.js//鎵嬪姩鍚姩webpack鈹溾攢鈹€pack.js//鑷瀹炵幇webpack鈹溾攢鈹€package-lock.json鈹溾攢鈹€package.json鈹溾攢鈹€README.md鈹溾攢鈹€src鈹溾攢鈹€a.js//鍏ュ彛鏂囦欢浼氬紩鐢╝.js鈹傗敂鈹€鈹€index.js//鎵撳寘濂界殑鍏ュ彛鏂囦欢鈹斺攢鈹€webpack.config.js//webpack閰嶇疆鏂囦欢a.js鍙槸瀵煎嚭涓€涓彉閲忥紝寰堢畝鍗昺odule.exports='webyouxuan'index.js璐熻矗寮曞叆a.js妯″潡letwebyouxuan=require('./a');console.log(webyouxuan)webpack.config鏂囦欢constpath=require('path');module.exports={:'development',entry:'./src/index.js',output:{path:path.join(__dirname,'dist'),filename:'main.js'}}浣犱細鍙戠幇鍩烘湰娌℃湁閰嶇疆涓巜ebpack4鏇存敼寮€濮嬫墦鍖咃紝浣犱細鍙戠幇npxwebpack闇€瑕亀ebpack-cli鐨勬敮鎸侊紝姣旇緝灏村艾鐨勬槸鐩墠杩樻病鏈夊尮閰嶇殑webpack-cli锛屾垜浠彧濂芥墜鍔ㄥ惎鍔╳ebpack~~~bootstrap.js浠嬬粛webpack-for鎵撳寘椤圭洰constwebpack=require('webpack');constwebpackOptions=require('./webpack.config');//閰嶇疆鏂囦欢闇€瑕佷紶鍏ebpack锛屾墦鍖呮垚鍔熷悗鎵撳嵃stats淇℃伅webpack(webpackOptions,(err,stats)=>{if(err){console.log(err);}else{console.log(stats.toJson())}})鏌ョ湅鎵撳寘鍚庣殑淇℃伅锛氭垜浠渶瑕佹帉鎻′竴浜涘叧閿瓧锛歮odule:webpack涓殑鎵€鏈夋枃浠堕兘鏄ā鍧楋紝涓€涓ā鍧楀搴斿埌涓€涓枃浠朵腑锛寃ebpack浼氶€氳繃鍏ュ彛chunk:浠ｇ爜鍧楁壘鍒版墍鏈変緷璧栫殑妯″潡锛屼竴涓猚hunk鐢卞涓ā鍧楃粍鎴恆ssets:鎵撳寘鐨勮祫婧愶紝涓€鑸拰chunk涓€鏍锋煡鐪嬬紪璇戝悗鐨勬簮鐮侊紝鍙戠幇鎵撳寘鍚庣殑缁撴灉鏄‘瀹炴瘮webpack4灏戝緢澶氾紒鏇寸畝娲佹槗璇伙紙杩欓噷鎴戝垹鎺変簡娉ㄩ噴锛?/2.鏁翠綋鍑芥暟鏄竴涓嚜鎵ц鍑芥暟((modules)=>{//3.浼犲叆鐨勬ā鍧楁槸鎵€鏈夋墦鍖呭悗鐨勭粨鏋渧arinstalledModules={};function__webpack_require__(moduleId){if(installedModules[moduleId]){//瀵逛簬缂撳瓨锛屽彲浠ュ拷鐣eturninstalledModules[moduleId].exports;}varmodule=(installedModules[moduleId]={//5.鍒涘缓妯″潡锛屾瘡涓ā鍧楅兘鏈変竴涓猠xports瀵硅薄i:moduleId,l:false,exports:{}});modules[moduleId](module,module.exports,__webpack_require__);//6.璋冪敤鐩稿簲鐨勬ā鍧楀嚱鏁帮紝灏嗘ā鍧梕xports浼犵粰module.l=true;//8.鐢ㄦ埛灏哖utmodule.exports瀵硅薄涓婄殑缁撴灉returnmodule.exports;}functionstartup(){//閫氳繃鍏ュ彛寮€濮嬪姞杞絩eturn__webpack_require__("./src/index.js");//榛樿鎯呭喌涓嬶紝module.exports缁撴灉isreturn;}returnstartup();//4.寮€濮嬪姞杞絵)({//1.鍒楀嚭鎵撳寘濂界殑妯″潡"./src/a.js":module=>{eval("module.exports='webyouxuan'\n\n//#sourceURL=webpack:///./src/a.js?");},"./src/index.js":(__unusedmodule,__unusedexports,__webpack_require__)=>{//7.鍔犺浇鍏朵粬妯″潡锛岃幏鍙栧叾浠栨ā鍧楃殑module.exports缁撴灉eval('letwebpack_require__(/*!./a*/"./src/a.js");\nconsole.log(webyouxuan)\n\n//#sourceURL=webpack:///./src/index.js?');}});涓€鑸潵璇达紝涓嶉毦鐞嗚В銆傚叾瀹炲唴閮ㄥ疄鐜颁簡涓€涓猒__webpack_require__鏂规硶銆?杩欐牱鎴戜滑灏卞彲浠ョ洿鎺ユ妸main.js瀵煎叆html浜唦锛岀湅鐪媤ebyouxuan鑳戒笉鑳芥墦鍗板嚭鏉ワ紝椤轰究鎵撲釜骞垮憡锛屽叧娉ㄦ垜浠紒鎸佺画鎺ㄩ€佷紭璐ㄦ枃绔狅紝缁欏ぇ瀹剁偣涓禐馃憤鎳掑姞杞芥垜浠湪绱㈠紩鍏ュ彛鏂囦欢涓娇鐢╥mport璇硶鍔ㄦ€佸鍏ユ枃浠禼onstbutton=document.createElement('button');button.innerHTML='鍏虫敞webyouxuan';document.body.appendChild(button);document.addEventListener('click',()=>{import('./a').then(data=>{console.log(data.default);})});鍥炲幓鐪嬬紪璇戠粨鏋滐紝濂藉儚鎵撳寘鍚庣殑缁撴灉鏈夌偣澶嶆潅锛屾棤鎵€璋擄紒鍏跺疄鏍稿績寰堢畝鍗曪紝灏辨槸涓€涓猨sonp鍔犺浇鏂囦欢銆傛墦鍖呭悗鐨勭粨鏋滃浜嗕竴涓猻rc_a_js.main.js(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["src_a_js"],{"./src/a.js":module=>{eval("module.exports='webyouxuan'\n\n//#sourceURL=webpack:///./src/a.js?");}}]);鏈€缁堜細閫氳繃script鏍囩鍔犺浇杩欎釜鏂囦欢銆傚姞杞藉畬鎴愬悗浼氶粯璁よ皟鐢╳indow涓嬬殑webpackJsonp鐨刾ush鏂规硶銆傛垜浠潵鐪嬬湅main.js鍙戠敓浜嗗摢浜涘彉鍖栥€備唬鐮佹湁鐐瑰鏉傘€傝鎴戜滑鍏堢湅鐪嬬储寮曟ā鍧楁墍鍋氱殑浜嬫儏銆傛柟渚挎垜鏁寸悊浠ｇ爜"./src/index.js":((__unusedmodule,__unusedexports,__webpack_require__)=>{eval(`constbutton=document.createElement('button');button.innerHTML='鍏虫敞webyouxuan';document.body.appendChild(button);document.addEventListener('click',()=>{__webpack_require__.e("src_a_js").then(__webpack_require__.t.bind(__webpack_require__,"./src/a.js",7)).then(data=>{console.log(data.default);})})`);})杩欓噷鏈変袱涓柟娉昣_webpack_require__.e鍜宊_webpack_require__.t__webpack_require__.e鏂规硶濂藉儚鏄敤鏉ュ姞杞芥枃浠剁殑锛岃鎴戜滑鎵惧嚭__webpack_require__.f={};__webpack_require__.e=(chunkId)=>{//chunkId=>src_a_js鍔ㄦ€佸姞杞芥ā鍧梤eturnPromise.all(Object.keys(__webpack_require__.f).reduce((promises,key)=>{__webpack_require__.f[key](chunkId,promises);//璋冪敤j鏂规硶浼犳暟缁勮繑鍥瀙romises;},[]));};varinstalledChunks={"main":0//榛樿main宸插姞杞絵;//Onf鏂规硶鏈変竴涓猨灞炴€_webpack_require__.f.j=(chunkId,promises)=>{varinstalledChunkData=Object.prototype.hasOwnProperty.call(installedChunks,chunkId)?installedChunks[chunkId]:undefined;if(installedChunkData!==0){//榛樿鐨刬nstalledChunks蹇呴』娌℃湁妯″潡鍔犺浇if(installedChunkData){promises.push(installedChunkData[2]);}else{if(true){//鍒涘缓涓€涓猵romise骞跺皢褰撳墠promise鐨勬垚鍔熸垨澶辫触淇濆瓨鍒癷nstalledChunksvarpromise=newPromise((resolve,reject)=>{installedChunkData=installedChunks[chunkId]=[resolve,reject];});//瀹夎鍧梉src_a_js]=[resolve,reject,promise]promises.push(installedChunkData[2]=promise);//杩欏彞璇濈殑鎰忔€濇槸鐪嬫槸鍚﹂厤缃簡publicPath锛屽鏋滈厤缃簡锛屽垯娣诲姞鍓嶇紑varurl=__webpack_require__.p+__webpack_require__銆備綘锛堝潡ID锛夛紱//1)鍒涘缓鑴氭湰鏍囩varscript=document.createElement('script');varonScriptComplete;script.charset='utf-8';script.timeout=120;鑴氭湰.src=url;//2)寮€濮嬪姞杞借繖涓枃浠秜arerror=newError();onScriptComplete=function(event){//瀹屾垚宸ヤ綔script.onerror=script.onload=null;娓呴櫎瓒呮椂锛堣秴鏃讹級锛泇arreportError=loadingEnded();if(reportError){varerrorType=event&&(event.type==='load'?'missing':event.type);varrealSrc=event&&event.target&&浜嬩欢.target.src;error.message='鍔犺浇鍧?+chunkId+'澶辫触銆俓n('+errorType+':'+realSrc+')';error.name='ChunkLoadError';error.type=閿欒绫诲瀷锛沞rror.request=realSrc;鎶ュ憡閿欒锛堥敊璇級锛泒};vartimeout=setTimeout(function(){//瓒呮椂onScriptComplete({type:'timeout',target:script});},120000);鑴氭湰.onerror=script.onload=onScriptComplete;鏂囨。.head.appendChild锛堣剼鏈級锛?/3)灏嗘爣绛炬彃鍏ラ〉闈elseinstalledChunks[chunkId]=0;}}};铏界劧浠ｇ爜閲忔瘮杈冨ぇ锛屼絾鏄牳蹇冨叾瀹炲氨鏄共涓€浠朵簨锛氬垱寤轰竴涓猻cript鏍囩锛屾枃浠跺姞杞藉洖鏉ョ殑鏃跺€欙紝push鏂规硶鑲畾浼氳璋冪敤锛佸厛璺宠繃杩欎竴娈碉紝鐪嬩笅闈㈢殑(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["src_a_js"],{"./src/a.js":module=>{eval("module.exports='webyouxuan'\n\n//#sourceeURL=webpack:///./src/a.js?");}}]);functionwebpackJsonpCallback(data){//3)鏂囦欢鍔犺浇瀹屾垚鍚庝細璋冪敤璇ユ柟娉晇archunkIds=data[0];//浠€涔堟槸鏁版嵁锛岀湅鐪媠rc_a_js鏄€庝箞鍐欑殑灏辩煡閬撲簡锛乕"src_a_js"]varmoreModules=data[1];//鑾峰彇鏂版ā鍧梫armoduleId,chunkId,i=0,resolves=[];for(;i
