Webpack5.0 鏂扮壒鎬у皾椴滃疄鎴?馃馃 [姣忔棩鍓嶇澶滆瘽0x37]

Posted 2021-04-29 鍓嶇鍏堥攱

姣忔棩鍓嶇澶滆瘽0x37

姣忔棩鍓嶇澶滆瘽锛岄櫔浣犺亰鍓嶇銆?/strong>

姣忓ぉ鏅氫笂18:00鍑嗘椂鎺ㄩ€併€?/strong>

姝ｆ枃鍏憋細4733 瀛?nbsp;

棰勮闃呰鏃堕棿锛?12 鍒嗛挓

鍦ㄨ€佽鍐欒繖绡囨枃绔犵殑鏃跺€欙紝v5鐗堟湰浠嶇劧澶勪簬鏃╂湡闃舵锛屽彲鑳戒粛鐒舵湁闂銆傝€屼笖浣滀负涓€涓?span class="mq-21">major鐗堟湰锛屽叾涓湁涓€浜沚reaking changes锛屽彲鑳戒細瀵艰嚧涓€浜涢厤缃拰鎻掍欢涓嶅伐浣溿€備絾杩欏苟鏃犲Θ纰嶆垜浠幓寮€濮嬪changelog涓婄殑鏂扮壒鎬ц繘琛屽皾椴滃疄鎴樸€傚ぇ瀹跺鏋滈亣鍒颁粈涔堥棶棰樺彲浠ョЩ姝ュ埌杩?span class="mq-22">銆恏ttps://github.com/webpack/webpack/issues/8537銆?/span>杩涜鍙嶉銆傚彟澶栨湁鍏充簬Webpack4鐨勯厤缃拰Compiler->Compilation->Chunk->Module->Template鏁翠綋杩愯鍘熺悊鍥藉唴澶栨湁寰堝浼樼鐨勬枃绔犳垜杩欓噷灏变笉涓€涓€灞曞紑浜嗐€傛帴涓嬫潵澶╀篃涓嶆棭浜嗕汉涔熶笉灏戜簡锛岃鎴戜滑涓€璧峰共鐐规浜嬨€?/p>

锛堟湰鍥炬埅鑷猼witter鍒楀嚭浜嗘帴涓嬫潵v5鐗堟湰鐨勬敼杩涳紝鍡€︽劅瑙夊睆骞曡繕鏄皬浜嗕竴鐐癸級

锛堟湰鍥炬埅鑷猤ithub,鎴浘鏃堕棿涓?鏈?2鏃ャ€傛垜浠湅鍒扮洰鍓嶅紑鍙戣繘搴﹀埌浜?7%锛?

涓€椤挎搷浣滅寷濡傝檸鎸囧崡

• 鍗囩骇浣犵殑Node鍒?锛圴5灏哊ode.js鐗堟湰浠?鍗囩骇鍒颁簡8锛?/span>

• npm install webpack@next 鈥攕ave-dev

• npm install webpack-cli 鈥攕ave-dev

• package.json娣诲姞  "dev": "webpack --mode development"

• package.json 娣诲姞 "prod": "webpack --mode production"

寮€濮媁ebpack V5灏濋矞涔嬫梾

鏂板缓src鏂囦欢澶癸紝鐒跺悗鏂板缓index.js銆傜畝鍗曠殑鍐欎簡涓€鍙?console.log("Hello Webpack5")

1. dist鎵撳寘鏂囦欢娴嬭瘎

1#婵€鍔ㄧ殑蹇?nbsp;棰ゆ姈鐨勬墜
2npm run dev

鎴戠殑鍐呭績姣棤娉㈡緶鈥︹€﹀崚馃槼鈥﹀ソ浜嗭紝鍒拌繖閲岀粨鏉熶簡銆傛暎浜嗗惂~

3涓皬鏃朵互鍚庘€︽垜渚濇棫蹇冧笉姝?鍙戠幇浜嗚繖涓猧ssues銆?span class="mq-57">https://github.com/webpack/webpack-cli/issues/762銆戣В鍐炽€傝鎴戜滑涓€璧风湅鐪嬭繍琛屾垚鍔熶箣鍚嶸5鍜孷4鐨勫姣斿浘

V5鎵撳寘鍒癲ist鐨刴ain.js

cmd-markdown-logo

V4鎵撳寘鍒癲ist鐨刴ain.js

V5鎵撳寘杩囩▼

V5鎵撳寘杩囩▼

V4鎵撳寘杩囩▼

V4鎵撳寘杩囩▼

娌℃湁鏂囧寲鐨勬垜鍙兘璇翠竴鍙ワ紝鍝庡憖鎴戝幓锛侊紒浣撶Н灏忎簡涓€鍗婁箣澶氾紝鑰屼笖閭ｄ釜startup鍑芥暟绠€鐩撮獨姘旂殑涓€鎵桂煉?/em>

2. 璁╀汉鎻績鐨勬寜闇€鍔犺浇

浠ュ墠褰撴垜浠兂鍦╥ndex.js鍐呴儴 import(./async.js").then(...)鐨勬椂鍊欙紝濡傛灉鎴戜滑浠€涔堜篃涓嶅姞銆俈4浼氶粯璁ゅ杩欎簺鏂囦欢鐢熸垚涓€鍫?.js,1.js,2.js鈥︽槸澶氫箞鐨勬暣榻?鎵€浠ユ垜浠渶瑕佷娇鐢?br>import(/* webpackChunkName: "name" */ "module") 鎵嶈兘鍖栬В杩欎唤灏村艾銆備粖澶￢5鍙互鍦ㄥ紑鍙戞ā寮忎腑鍚敤浜嗕竴涓柊鍛藉悕鐨勫潡 id 绠楁硶锛岃绠楁硶鎻愪緵鍧?浠ュ強鏂囦欢鍚?鍙鐨勫紩鐢ㄣ€?妯″潡 ID 鐢卞叾鐩稿浜庝笂涓嬫枃鐨勮矾寰勭‘瀹氥€?鍧?ID 鏄敱鍧楃殑鍐呭鍐冲畾鐨勶紝鎵€浠ヤ綘涓嶅啀闇€瑕佷娇鐢∕agic Comments銆?/p>

1//src鏂囦欢澶筰ndex.js
2import("./async.js").then((_)=>{
3    console.log(_.data);
4})
5console.log("Hello Webpack5")

1//src鏂囦欢澶筧sync.js
2const data = "寮傛鏁版嵁馃崐";
3export default data; 

鍐嶆缂栬瘧涔嬪悗src_async_js.js 灏辫汉鍦ㄤ簡dist閲岎煂广€傚鏋滆繖涓椂鍊欏幓鎵ц npm run prod 浼氬湪dist閲屽嚭鐜颁竴涓凡鏁板瓧寮€澶寸殑js鏂囦欢銆傛瘮濡傛垜鐨勬槸61.js锛屼綘鍙兘闈炲父濂藉锛岃繖鏄粈涔堥鉂?/p>

3. moduleIds & chunkIds寰楀凡纭畾

棣栧厛鎴戜滑鏀归€犱竴涓嬩笂闈㈢殑鏂囦欢銆?/p>

1//src鏂囦欢澶筰ndex.js
2import("./async.js").then((_) => {
3    console.log(_.data);
4})
5import("./async2.js").then((_) => {
6    console.log(_.data2);
7})
8console.log("Hello Webpack5")

1//src鏂囦欢澶筧sync2.js
2import common from "./common.js"
3console.log(common)
4const data2 = "寮傛鏁版嵁馃崕";
5export default data2;

鍦╒4鐨勭増鏈腑async.js銆乤sync2.js浼氳涓€娆″垎閰嶇粰涓€涓猚hunkId銆傜劧鍚庣敓鎴愮殑main.js鏍规嵁chunkId鍔犺浇瀵瑰簲鐨勬枃浠讹紝浣嗘槸鎮插墽鐨勪簨濡傛灉姝ゆ椂鎴戝垹鎺?span class="mq-154">import("./async.js").then(() => {console.log(.data);})杩欎竴琛岀殑璇濅細瀵艰嚧async2杩涜涓婁綅涔熷氨鏄師鏉ョ殑1鍙樻垚浜?銆傚涓嬪浘锛?/p>

鍒╃敤BeyondCompare鎴戜滑涔熸竻鏅扮殑鐪嬪埌浜唌ain鐨勫彉鍖栥€?br>

鏈夊悓瀛﹁杩欒繕涓嶅ソ鍔烇紝鎴戝張鍙互鐢∕agic Comments銆佷篃鍙互鐢ㄤ竴浜涙彃浠跺氨鍙互鍥哄畾浣忎粬鐨?moduleIds & chunkIds銆傛槸鐨勪綘璇寸殑娌￠敊锛屼絾鏄疺5灏嗕笉闇€瑕佸紩鍏ヤ换浣曠殑澶栧姏锛屽涓婃垜浠亣鍒皃rod闄岀敓鐨勫甫鏁板瓧鐨凧S锛屽氨鏄负浜嗗寮簂ong-term caching锛屽鍔犱簡鏂扮殑绠楁硶锛屽苟鍦ㄧ敓浜фā寮忎笅浣跨敤浠ヤ笅閰嶇疆寮€鍚€傝繖浜涚畻娉曚互纭畾鎬х殑鏂瑰紡涓烘ā鍧楀拰鏁版嵁鍧楀垎閰嶉潪甯哥煭(3鎴?涓瓧绗?鐨勬暟瀛?id銆?/p>

 1//Webpack4鐢熶骇鐜鐨勯粯璁ら厤缃?/span>
 2module.exports = {
 3    optimization:{
 4         chunkIds: "deterministic鈥?
 5        moduleIds: "deterministic"   
 6    }
 7}
 8//Webpack4鐢熶骇鐜鐨勯粯璁ら厤缃?br> 9module.exports = {
10    optimization:{
11         chunkIds: "natural鈥?
12        moduleIds: "size"   
13    }
14}

濡傛灉浣犺寰楄繖浜涙柊鐗规€ц浣犱笉鐖斤紝浣犱緷鏃у彲浠ヨ缃?optimization: { chunkIds: 'named' } 瀹冩槸鍏煎鐨勶紝杩欎竴鐐硅繕鏄€煎緱鐐硅禐鐨勩€?/p>

4. 楗卞彈璇熺梾鐨勭紪璇戦€熷害

Webpack鐨勭紪璇戦€熷害鐩镐俊鏄緢澶氬悓瀛︽瘮杈冨ご鐥涚殑闂锛屽綋鐒舵垜浠篃鏈夊緢澶氫紭鍖栫殑鍔炴硶銆傛瘮濡侶appyPack銆丆ache-loader銆佹帓闄ode_modules銆佸绾跨▼鍘嬬缉鐢氳嚦鍙互閲囩敤鍒嗗竷寮忕紪璇戠瓑绛夈€傚叾瀹濿ebpack缂栬瘧鎱㈣繕璺熶粬鐨刲aoder鏈哄埗涓嶆棤鍏崇郴锛屾瘮濡俿tring->ast->string杩欎竴鐐硅窡Parcel纭疄鏈変簺宸窛 馃摝銆傞偅鍦╒5鐨勭増鏈腑閮藉甫鏉ヤ簺鍝簺鏀瑰彉鍛紵鍏跺疄浣犲彧瑕佸湪閰嶇疆鏂囦欢涓姞涓婅繖鏍蜂竴鍙?

1module.exports = {
2    cache: {
3        type: "filesystem"
4    }
5}

鍏跺疄cache鍦╒4鐗堟湰涓氨鏈塩ache,涓嶈繃濡備笂杩欎釜閰嶇疆瀹樼綉涓婁篃鍦ㄨ鏄竴涓疄楠屾€х殑锛屼篃璇村鏋滃綋浣跨敤鎸佷箙缂撳瓨鏃讹紝涓嶅啀闇€瑕?em class="mq-207">cache-loader銆?瀵逛簬 babel cacheDirectory 绛変篃鏄姝ゃ€傝€佽澶繖涔熸病鏈夋椂闂磋缁嗙殑缈绘墍鏈夌殑pr鍜屾簮鐮侊紝涓嶈繃澶ц嚧杩愯浜嗕笅璨屼技鏈夌殑鏁堟灉馃槞濡傛灉鍝綅澶х杩欓噷鏈夌┖缈昏繃浜嗘簮鐮佷篃娆㈣繋鍦ㄨ瘎璁哄尯璁ㄨ馃摉

(寮€鍚紦瀛樹箣鍚庣殑缂栬瘧閫熷害)

5. minSize&maxSize 鏇村ソ鐨勬柟寮忚〃杈?/span>

鍦╒4鐗堟湰涓粯璁ゆ儏鍐典笅锛屼粎鑳藉鐞?code class="mq-217">javascript鐨勫ぇ灏忦煒?/p>

 1module.exports = {
 2    optimization: {
 3        splitChunks: {
 4            cacheGroups: {
 5                commons: {
 6                    chunks: "all",
 7                    name: "commons",
 8                    minChunks: 1,
 9                    minSize: "鏁板€?,
10                    maxSize: "鏁板€?
11                }
12            }
13        }
14    }
15}

V5鐗堟湰鐨勫彉鏇达紝杩欎釜鍙樻洿绠€鐩存槸澶毊浜嗮煇?鑰佽宸茬粡璇曡繃浜嗭紝鏁堟灉杩樻槸铔笉閿欑殑銆?/p>

 1module.exports = {
 2    optimization: {
 3        splitChunks: {
 4            cacheGroups: {
 5                commons: {
 6                    chunks: "all",
 7                    name: "commons",
 8                }
 9            },
10            //鏈€灏忕殑鏂囦欢澶у皬 瓒呰繃涔嬪悗灏嗕笉浜堟墦鍖?/span>
11            minSize: {
12                javascript: 0,
13                style: 0,
14            },
15            //鏈€澶х殑鏂囦欢 瓒呰繃涔嬪悗缁х画鎷嗗垎
16            maxSize: {
17                javascript: 1, //鏁呮剰鍐欏皬鐨勬晥鏋滄洿鏄庢樉
18                style: 3000,
19            }
20        }
21    }
22}

7.缂栬瘧鍣ㄧ殑浼樺寲

濡傛灉澶у璇昏繃Webpack鐨勬簮鐮佷竴瀹氱煡閬揅ompiler鐨勯噸瑕佹€э紝鍦╓ebpack涓厖鏂ョ潃澶ч噺鐨勯挬瀛愬拰瑙﹀彂浜嬩欢銆?/p>

鍦ㄦ柊鐨勭増鏈腑锛岀紪璇戝櫒鍦ㄤ娇鐢ㄥ畬姣曞悗搴旇琚叧闂紝鍥犱负瀹冧滑鍦ㄨ繘鍏ユ垨閫€鍑虹┖闂茬姸鎬佹椂锛屾嫢鏈夎繖浜涚姸鎬佺殑 hook銆?鎻掍欢鍙互鐢ㄨ繖浜?hook 鏉ユ墽琛屼笉澶噸瑕佺殑宸ヤ綔锛堟瘮濡傦細鎸佷箙鎬х紦瀛樻妸缂撳瓨鎱㈡參鍦板瓨鍌ㄥ埌纾佺洏涓婏級銆傚悓鏃舵彃浠剁殑浣滆€呭簲璇ラ瑙佸埌鏌愪簺鐢ㄦ埛鍙兘浼氬繕璁板叧闂紪璇戝櫒锛屾墍浠?褰撶紪璇戝櫒鍏抽棴鎵€鏈夊墿涓嬬殑宸ヤ綔鏃跺簲灏藉揩瀹屾垚銆?鐒跺悗鍥炶皟灏嗕細閫氱煡宸插交搴曞畬鎴愩€?br> 褰撲綘鍗囩骇鍒?v5 鏃讹紝璇风‘淇濆湪瀹屾垚宸ヤ綔鍚庝娇鐢?Node.js API 璋冪敤 Compiler.close銆?/p>

8. Node.js polyfills 鑷姩琚Щ闄?/strong>

杩囧幓锛學ebpack  4鐗堟湰闄勫甫浜嗗ぇ澶氭暟 Node.js 鏍稿績妯″潡鐨?polyfills锛屼竴鏃﹀墠绔娇鐢ㄤ簡浠讳綍鏍稿績妯″潡锛岃繖浜涙ā鍧楀氨浼氳嚜鍔ㄥ簲鐢紝浣嗘槸鍏跺疄鏈変簺鏄笉蹇呰鐨勩€?V5涓殑灏濊瘯鏄嚜鍔ㄥ仠姝?polyfilling 杩欎簺鏍稿績妯″潡锛屽苟渚ч噸浜庡墠绔吋瀹圭殑妯″潡銆傚綋杩佺Щ鍒?v5鏃讹紝鏈€濂藉敖鍙兘浣跨敤鍓嶇鍏煎鐨勬ā鍧楋紝骞跺敖鍙兘鎵嬪姩娣诲姞鏍稿績妯″潡鐨刾olyfills銆?Webpack榧撳姳澶у澶氭彁浜よ嚜宸辩殑鎰忚锛屽洜涓鸿繖涓洿鏀瑰彲鑳戒細涔熷彲鑳戒笉浼氳繘鍏ユ渶缁堢殑 v5鐗堟湰銆傜幇鍦ㄥ井鍓嶇宸茬粡鍦ㄥ緢澶氬浗鍐呯殑鍥㈤槦澶ч噺搴旂敤锛岃€佽涓汉瑙夊緱杩欎釜鏀瑰姩瀵逛簬鍓嶇鏇翠笓娉ㄥ紑鍙戞ā鍧楁洿鏈夌泭澶勩€?/p>

---

鍦ㄦ湰鏂囧紑澶寸殑鏃跺€欙紝鎴戜滑鍒楀嚭浜嗕竴寮犱綔鑰呮紨璁茬殑鍥炬湁鍏充簬Webpack鐨勬敼鍔ㄣ€傚ぇ瀹跺彲浠ョ偣鍑昏繖閲屻€?span class="mq-306">https://github.com/webpack/changelog-v5/blob/master/README.md銆戠湅鍒板叏閮ㄣ€傛柊鐨勭増鏈彉鍔ㄥ繀灏嗗紩璧峰緢澶氭彃浠朵細鍑洪棶棰橈紝浣嗘槸V5鐨勬€ц兘鏀硅繘鏄垜浠洿鍔犳湡寰呯殑銆傛渶鍚庢垜鎯宠澶╀笅姝﹀姛鍑哄皯鏋楋紝澶╀笅鎶€鏈嚭鍩虹銆傚ぇ瀹跺く瀹炲熀纭€澶氭偀鍘熺悊鎵嶈兘璺熺殑涓婂彉鍖栧姝ゅ揩鐨勫墠绔ū涔愬湀銆?/p>

鑰佽浠庝笟8骞达紝鍑犲勾鍓嶄茎骞歌繘鍏ョ櫨搴﹀拰鑵捐锛屽悗鏉ュ湪闃块噷offer鍜屽垱涓氫箣闂撮€夋嫨浜嗗垱涓氾紝鏇翠茎骞稿湪27宀侀偅骞存嬁鍒颁簡鏈堣柂30K+銆?/p>

浠ヤ笅鏄垜鎬荤粨鐨勫墠绔妧鏈浘璋憋紝鍖呭惈鍗佸ぇ鍓嶇蹇呬細妯″潡锛屽彲鍋氬弬鑰?/p>

杩欎釜璇剧▼浣撶郴锛屾垜鎵撶（浜?骞达紝濡傛灉浣犳劅鍏磋叮锛屽彲浠ュ弬涓?鍏冭喘涔拌瘯鍚?/p>

 https://ke.qq.com/course/243381?flowToken=1008404

璐?鍏冭瘯鍚鍗冲彲鍏嶈垂鎶ュ悕 21澶╁墠绔缁冭惀

21澶╁墠绔缁冭惀鏄粈涔堬紵

蹇冪悊瀛﹀Ericsson(瀹夊痉鏂疯壘鍒╁厠妫崥澹?鐨勭爺绌跺彂鐜帮細鍐冲畾浼熷ぇ姘村钩鍜屼竴鑸按骞崇殑鍏抽敭鍥犵礌锛屾棦涓嶆槸澶╄祴锛屼篃涓嶆槸缁忛獙锛岃€屾槸銆愬埢鎰忕粌涔犮€戠殑绋嬪害銆?/em>

鎴戦潪甯哥悊瑙ｇ▼搴忓憳鍦ㄥ涔犳垚闀夸腑鐨勭棝鐐广€傛垜甯屾湜鑳芥湁涓€涓交閲忓寲鐨勮缁冭惀锛岀敤寰堝皯鐨勬椂闂达紝鏃㈣兘甯﹀ぇ瀹惰繙绂昏垝閫傚尯锛屽張鑳藉湪姣忓ぉ鐨勮缁冧腑鏈夋剰璇嗙殑鍒绘剰鎻愬崌鑷繁锛屽苟浠庤缁冧腑鎸佺画鑾峰緱鍙嶉锛屼粠鑰岀煡閬撹嚜宸变笉瓒崇殑閮ㄥ垎銆?/p>

21澶╄缁冭惀鍐呭

• 姣忔棩涓€閬撶簿閫夊墠绔潰璇曢锛屾瘡鏃ョ簿杩涖€?/span>

• 姣忓ぉ3鍒嗛挓锛屼粠HTML鍩虹鍒扮湡鍏ㄦ爤锛屽甫浣犳垚闀裤€?/span>

• 璁粌钀ョ粨鏉熻禒閫佺洿鎾锛氥€愪粠鏈堣柂5鍗冨埌5涓囷紝鍓嶇濡備綍楂樻晥鎴愰暱銆?/span>

璐拱1鍏冭瘯鍚鍚庯紝鎵弿涓嬫柟浜岀淮鐮佸姞鍏ュ井淇＄兢锛屽厤璐瑰紑鍚?1澶╄缁冭惀锛?/p>

濡傛灉浣犳潵鏅氫簡鍔犱笉杩涚兢锛屽彲浠ュ厛鍔犳捣娲嬭€佸笀寰俊  yidengxuetang  锛岀劧鍚庢媺浣犲叆缇?/strong>

---

浣滆€?蹇椾匠鑰佸笀

2019 骞?03鏈?12鏃?nbsp;