銆愮1203鏈熴€憌ebpack 4 鍙戝竷浜嗭紒

Posted 2021-04-29 鍓嶇鏃╄璇?/a> 銆愮

鍓嶈█

鍒氬紑鏄ュ氨鍙戝竷浜?.0銆備粖鏃ユ棭璇绘枃绔犵敱浼楁垚缈昏瘧@lizheming缈昏瘧鍒嗕韩銆?/p>

姝ｆ枃浠庤繖寮€濮嬶綖

浠ｅ彿: _Legato 馃幎

浠婂ぉ鎴戜滑鎰夊揩鐨勫甯?webpack 4(Legato)姝ｅ紡鍙戝竷浜嗭紒浣犲彲浠ヤ娇鐢?yarn 鎴栬€?npm 鑾峰緱瀹冿細

$> yarn add webpack --dev

鎴栬€?/p>

$> npm i webpack --save-dev

馃幖 涓轰粈涔堝彨 Legato?

棣栧厛鎴戜滑浼氬紑濮嬩竴涓柊浼犵粺锛氫负鎴戜滑浠ュ悗鐨勬瘡涓ぇ鐗堟湰璁惧畾浠ｅ彿锛佸洜姝わ紝鎴戜滑鍐冲畾灏嗗懡鍚嶈繖涓壒鏉冪粰浜堟垜浠渶澶х殑 OpenCollective 鎹愯禒鑰咃細trivago锛?/p>

褰撴垜浠悜鍏跺彂鍑鸿姹傚悗浠栦滑鏄繖涔堝洖澶嶆垜浠殑锛?/p>

[鍦?trivago] 鎴戜滑閫氬父浠ラ煶涔愪富棰樻潵鍛藉悕鎴戜滑鐨勯」鐩€備緥濡傦紝鎴戜滑涔嬪墠鐨?JS 妗嗘灦鍙?鈥淗armony鈥濓紝鎴戜滑鐨勬柊妗嗘灦鍙€淢elody鈥濄€侾HP 鐨勮瘽鎴戜滑浣跨敤鍩轰簬 Symfony 涓婂眰灏佽锛屾垜浠彨瀹冣€淥rchestra鈥濄€?br> Legato 鎰忓懗鐫€姣棤闂撮殭鍦拌繛缁紨濂忔瘡涓妭濂忋€?/strong>
杩欑偣鍜?Webpack 寰堝儚锛學ebpack 灏嗘垜浠殑鍓嶇璧勬簮锛圝S锛孋SS鐢氳嚦鏇村锛夋棤闂撮殭鐨勬墦鍖呭湪涓€璧枫€傚洜姝ゆ垜浠浉淇?鈥淟egato鈥?/strong> 杩欎釜浠ｅ彿浼氶€傚悎 Webpack銆?br> 鈥斺€? 鈥奝atrick Gotthardt

鎴戜滑寰楃煡鍚庝篃闈炲父鍦版縺鍔紝鍥犱负鏂扮増 Webpack 涓垜浠墍鍋氱殑姣忎竴涓洿鏂扮洰鐨勯兘鍦ㄤ簬姝わ紝涓轰簡褰撳ぇ瀹跺湪浣跨敤 Webpack 鐨勬椂鍊欐晱鎹?em>杩炵画姣棤椤挎尗鎰熴€傞潪甯告劅璋㈣繃鍘荤殑杩欎簺骞?trivago 瀵?webpack 鐨勬棤绉佹崘璧犳敮鎸侊紝鏇存劅璋㈠叾涓?webpack 4 鍛藉悕锛?span>馃憦馃憦

寮曠敵闃呰锛?/strong>馃帄 trivago 甯姪淇濇姢 webpack 鐨勬湭鏉?馃帄

馃暤锔忊€?鏈変粈涔堟洿鏂帮紵

webpack 4 鏈夊お澶氱殑鏂颁笢瑗垮彲浠ヨ浜嗭紝浣嗘槸鎴戜笉鍙兘鍦ㄦ湰鏂囦腑鍒椾妇鎵€鏈夌殑鍐呭锛屽惁鍒欒繖绡囨枃绔犲氨瑕佹帹杩熷緢涔呮墠鑳藉彂甯冧簡銆傚洜姝や笅闈㈡垜浼氬拰澶у鍒嗕韩涓€浜涙垜瑙夊緱鏈夎叮鐨勬洿鏂板唴瀹癸紝濡傛灉澶у鎯宠鐪嬫墍鏈夌殑鏇存柊鐨勮瘽鍙互鏌ラ槄 webpack 4 鐨勬洿鏂版棩蹇?/strong>銆?/p>

馃弾 webpack 4 鏇村揩锛堥€熷害鎻愬崌98%锛夛紒

鎴戜滑鍦ㄧぞ鍖轰腑璇锋眰澶у瀵?webpack 4 杩涜鏋勫缓鎬ц兘娴嬭瘯锛屽緱鍑虹殑缁撴灉闈炲父鏈夎叮銆傜粨鏋滃緢鎯婁汉锛屾瀯寤烘椂闂撮檷浣庝簡 60%-98%锛侊紒杩欓噷缁欏ぇ瀹跺垎浜竴涓嬫煇涓敤鎴风殑娴嬭瘯缁撴灉锛?/strong>

鏉ユ簮锛?/strong>Twitter

褰撶劧杩欏彧鏄竴閮ㄥ垎鐢ㄦ埛鐨勬祴璇曟暟鎹紝浣犲彲浠ュ湪鎴戠殑鎺ㄦ枃鐨勫洖澶嶄腑鏌ョ湅浠栦滑鎵€鏈夌殑缁撴灉銆?/p>

鎬ц兘娴嬭瘯杩囩▼涓篃鍙戠幇浜嗕竴浜?loader 鐨?bug 鎴戜滑宸茬粡鍙婃椂淇浜嗭紒锛丳S: 鎴戜滑杩樻病鏈夊疄鐜板杩涚▼锛屾垨鑰呯紦瀛樺姛鑳斤紙璁″垝鍦╲5鐗堝疄鐜帮級銆傛墍浠ョ悊璁轰笂鎴戜滑鐨勬€ц兘杩樻湁闈炲父澶х殑鎻愬崌绌洪棿锛侊紒锛侊紒

鏋勪欢閫熷害鏄垜浠娆″彂甯冩渶涓昏鐨勭洰鏍囥€備綘鍙互鎶婃墍鏈夌殑鍔熻兘閮芥坊鍔犲埌宸ュ叿涓紝浣嗘槸濡傛灉涓嶈兘鑺傜渷寮€鍙戞椂闂撮偅浣犲姞杩欎簺鍔熻兘鍙堟湁浠€涔堢敤鍛紵褰撶劧浠ヤ笂鐨勮繖浜涢兘鏄儴鍒嗙ず渚嬶紝鎴戜滑闈炲父娆㈣繋澶у鍦ㄦ帹鐗逛笂浣跨敤 #webpack #webpack4 寮€澶存彁浜や綘浠殑鏋勫缓鏃堕棿鎶ュ憡銆?/p>

馃槏 Mode, 闆堕厤缃互鍙婇粯璁ゅ€?/h2>

鎴戜滑涓?webpack 鏂板浜嗕竴涓?mode 閰嶇疆椤广€侻ode 鏈変袱涓€硷細development 鎴栬€呮槸 production锛岄粯璁ゅ€兼槸 production銆侻ode 鏄垜浠负鍑忓皬鐢熶骇鐜鏋勫缓浣撶Н浠ュ強鑺傜害寮€鍙戠幆澧冪殑鏋勫缓鏃堕棿鎻愪緵鐨勪竴绉嶄紭鍖栨柟妗堛€?/p>

濡傛灉鎯宠浜嗚В鏇村 mode 閰嶇疆椤圭殑鍐呭锛屽ぇ瀹跺彲浠ョ湅鐪嬫垜浠箣鍓嶇殑涓€绡囨枃绔狅細 webpack 4: mode 鍜屼紭鍖栥€?/p>

鍙﹀锛?code class="mq-34">entry锛?code class="mq-35">output 杩欎簺閰嶇疆椤逛篃閮芥湁榛樿鍊间簡銆傝繖鎰忓懗鐫€浣犱笉闇€瑕佹瘡娆￠兘閰嶇疆瀹冧滑浜?span>锛?/em>褰撶劧鍖呮嫭 mode銆傝繖鍙兘鎰忓懗鐫€浠庣幇鍦ㄥ紑濮嬶紝浣犵殑閰嶇疆鏂囦欢鍦ㄦ垜浠仛鍑哄姝ゅ法澶ф敼鍙樹箣鍚庝細鍙樺緱闈炲父灏忥紒

Legato 鎰忓懗鐫€姣棤闂撮殭鍦拌繛缁紨濂忔瘡涓妭濂忋€?/strong>

鍙﹀锛屾垜浠彁渚涢浂閰嶇疆骞冲彴鏉ユ墿灞曘€倃ebpack 鏈€澶х殑涓€涓壒鑹插氨鏄彲鎵╁睍鎬с€傛渶缁堟垜浠疄鐜扮殑闆堕厤缃钩鍙颁細鏄粈涔堟牱瀛愬憿锛熷綋鎴戜滑瀹炵幇浜?webpack presets 鍔熻兘鍚庯紝杩欐剰鍛崇潃浣犲彲浠ュ熀浜庨浂閰嶇疆骞冲彴閰嶇疆浣犺嚜宸憋紝鍏徃锛岀敋鑷虫槸绀惧尯鐨勫伐浣滄祦閰嶇疆鐢ㄤ互缁ф壙鐩存帴浣跨敤銆?/p>

鉁?鍐嶈 CommonsChunkPlugin

鍦ㄦ柊鐗堜腑鎴戜滑搴熷純骞剁Щ闄や簡 CommonsChunkPlugin锛屽苟涓斾娇鐢ㄤ竴浜涢粯璁ゅ€间互鍙婃洿瀹规槗琚鍐欑殑鏂?API optimize.splitChunks 鏉ヤ唬鏇垮畠銆傜幇鍦ㄤ綘鍙互鍦ㄥぇ閮ㄥ垎鍦烘櫙涓韩鍙楄嚜鍔ㄥ垎鍧楀甫鏉ョ殑渚垮埄浜嗭紒

濡傛灉鎯宠浜嗚В鏇村璇?API 鍙互鏌ョ湅杩欑瘒鏂囩珷锛歸ebpack 4: 浠ｇ爜鍒嗗潡浠ュ強鍒嗗潡浼樺寲

馃敩 WebAssembly 鏀寔

Webpack 鐜板湪榛樿鏀寔鍦ㄤ换浣曟湰鍦?WebAssembly 妯″潡涓殑 import 鍜?export 璇彞銆傝繖鎰忓懗鐫€浣犲彲浠ョ洿鎺ュ湪 Rust, C++, C 鎴栬€呭叾瀹?WebAssembly 鏀寔璇█涓娇鐢?import銆?/p>

馃悙 妯″潡绫诲瀷绠€浠嬩互鍙?.mjs 鏀寔

涔嬪墠锛孞S 涓€鐩撮兘鏄?Webpack 鍞竴鐨勪竴绛夋ā鍧楃被鍨嬨€傚綋鐢ㄦ埛涓嶉渶瑕佷娇鐢?CSS/html 鐨勬椂鍙兘浼氶€犳垚涓€浜涢夯鐑︺€傛垜浠熀浜庢柊鐨?API 鎶借薄瀹炵幇浜?JS 绫诲瀷銆傜洰鍓嶏紝鎴戜滑宸茬粡鏀寔5绉嶆ā鍧楃被鍨嬪疄鐜帮細

• javascript/auto: 锛坵ebpack 3 榛樿鍊硷級 鎵€鏈夌殑 JS 妯″潡瑙勮寖閮藉彲鐢細CommonJS锛孉MD锛孍SM

• javascript/esm锛欵cmaScript 妯″潡瑙勮寖锛屽叾瀹冪殑妯″潡瑙勮寖閮戒笉鍙敤 (.mjs 鏂囦欢鐨勯粯璁ゅ€?

• javascript/dynamic: 浠呮敮鎸?CommonJS 鍜?AMD锛孍cmaScript 妯″潡瑙勮寖涓嶅彲鐢?/p>

• json: JSON 鏁版嵁锛屼娇鐢?require 鍜?import 瀵煎叆 JSON 鏁版嵁鏃跺彲鐢?锛?json 鏂囦欢鐨勯粯璁ゅ€硷級

• webassembly/experimental: WebAssembly 妯″潡 (.wasm 鏂囦欢鐨勯粯璁ゅ€硷紝鐩墠杩樻槸璇曢獙闃舵锛?/em>

• 鍙﹀ webpack 鏀寔鐩存帴鏌ユ壘 .wasm, .mjs, .js 鍜?.json 鍚庣紑鏂囦欢

鏈€璁╀汉婵€鍔ㄧ殑鏄紝鎴戜滑鐢氳嚦鍙互鏀寔 CSS 鍜?HTML 妯″潡绫诲瀷锛堣鍒掑湪 webpack 4.x - 5 闂寸増鏈疄鐜帮級銆?/strong> 瀹冨皢鍏佽鎴戜滑鐩存帴灏?HTML 浣滀负鍏ュ彛鏂囦欢锛?/p>

馃洃 濡傛灉浣犳鍦ㄤ娇鐢?HtmlWebpackPlugin

鍦ㄥ彂甯冧箣鍓嶆垜浠鐣欎簡涓€涓湀鐨勬椂闂?鏉ュ崌绾ф墍鏈夌殑鎻掍欢鍜?loader 浠ラ€傞厤 webpack 4 鐨?API銆傜劧鑰岋紝Jan Nicklas 鍥犱负宸ヤ綔鍘熷洜娌″姙娉曞弬鍔狅紝鍥犳鎴戜滑涓嶅緱涓嶅彂甯冧簡涓€涓?html-webpack-plugin 鐨?fork 鐗堛€備綘鍙互浣跨敤濡備笅鍛戒护瀹夎瀹冿細

$> yarn add html-webpack-plugin@webpack-contrib/html-webpack-plugin

褰?Jan 鏈湀搴曚粠娴峰宸ヤ綔鍥炴潵鏃讹紝鎴戜滑浼氬皢鎴戜滑鐨勬洿鏂板悎骞跺洖 jantimon/html-webpack-plugin 浠撳簱涓紒鍦ㄦ涔嬪墠锛屽鏋滀綘鏈変换浣曢棶棰橈紝鍙互鎻愪氦鍒拌繖閲岋紒

濡傛灉浣犳槸鎻掍欢鎴?loader 鐨勫紑鍙戣€咃紝浣犲彲浠ユ煡鐪嬫垜浠殑杩佺Щ鎸囧崡锛歸ebpack 4: 鎻掍欢/loader 杩佺Щ鎸囧崡銆?/p>

馃挅 杩樻湁锛?/h2>

杩樻湁鏇村鐨勭壒鎬ф病鏈夊湪鏈枃鍒楀嚭锛屾垜浠己鐑堝缓璁ぇ瀹跺幓鐪嬩竴涓嬫垜浠殑瀹樻柟鏇存柊鏃ュ織銆?/p>

馃悾 v4 鐨勬枃妗ｅ湪鍝紵

鎴戜滑椹笂瑕佸畬鎴愯縼绉绘寚鍗楀拰v4 鐨勬枃妗ｄ簡銆備綘鍙互璁块棶 鏂囨。浠撳簱 鍒囨崲鍒?next 鍒嗘敮鏉ヨ幏鍙栨洿鏂版儏鍐碉紝褰撶劧鑳芥惌鎶婃墜甯釜蹇欐槸鍐嶅ソ涓嶈繃浜嗭紒

馃し鈥?鍚勬鏋?cli 宸ュ叿鏀寔鎬庝箞鏍蜂簡?

鍦ㄨ繃鍘荤殑涓€涓湀鎴戜滑涔熶负姣忎釜妗嗘灦鐨勮剼鎵嬫灦宸ヤ綔纭繚瀹冧滑鑳芥敮鎸?webpack 4銆傜敋鑷虫渶娴佽鐨勫簱渚嬪 lodash-es, RxJS 宸茬粡鏀寔 sideEffects  閫夐」锛屽洜姝や娇鐢ㄥ畠浠殑鏈€鏂扮増鍚庝綘浼氬彂鐜版墦鍖呬綋绉細澶у箙搴︾殑鍑忓皬銆?/p>

AngularCLI 鍥㈤槦宸茬粡璁″垝鍦ㄨ繎鍑犲懆鍗冲皢鍙戝竷鐨勫ぇ鐗堟湰涓洿鎺ヤ娇鐢?webpack 4锛佸鏋滀綘鎯宠鐭ラ亾鏈€鏂拌繘灞曪紝鍙互鐩存帴鑱旂郴浠栦滑锛屽苟璇㈤棶浠栦滑浣犺兘甯粈涔堝繖鑰屼笉鏄洿鎺ヨ闂畠浠€涔堟椂鍊欏彂甯?/em>銆?/p>

馃槖 涓轰粈涔堜綘鐢ㄥ姝ゅ鐨?emoji 琛ㄦ儏锛?/h2>

鍥犱负杩欐牱鍐欐枃绔犲緢寮€蹇冨憖锛佸ぇ瀹朵篃鍙互璇曡瘯 馃槏銆?/p>

馃帹 鎺ヤ笅鏉ワ紵

鎴戜滑宸茬粡鍦ㄧ潃鎵嬭鍒掍笅涓€涓増鏈?webpack 4.x 鍜?5 鐨勭壒鎬т簡锛屽寘鎷絾涓嶉檺浜庯細

• ESM 妯″潡瀵煎嚭鏀寔

• 鎸佷箙缂撳瓨

• WebAssembly 鏀寔浠?experimental 鍗囩骇涓?stable 绋冲畾鐗堛€傚苟澧炲姞 tree-shaking 鍜屾湭浣跨敤浠ｇ爜鍘婚櫎锛?/p>

• Presets 鈥斺€?鍩轰簬闆堕厤缃璁★紝浠讳綍涓滆タ閮借兘鏀寔闆堕厤缃?/p>

• CSS 妯″潡绫诲瀷鈥斺€旀敮鎸?CSS 浣滀负鍏ュ彛鏂囦欢锛堝啀瑙佸惂 ExtractTextWebpackPlugin锛?/p>

• HTML 妯″潡绫诲瀷鈥斺€旀敮鎸?HTML 浣滀负鍏ュ彛鏂囦欢

• URL/鏂囦欢 妯″潡绫诲瀷

• 鑷畾涔夋ā鍧楃被鍨?/p>

• 澶氱嚎绋?/p>

• 閲嶆柊瀹氫箟鎴戜滑鐨勭粍缁囩珷绋嬪拰璁″垝浠诲姟

• Google Summer of Code (涔嬪悗鍗曠嫭鍐欐枃璇存槑!!!)

馃檱 鍐嶆鎰熻阿 馃檱

瀵逛簬鎴戜滑鐨勮础鐚€呭洟闃燂紝鏍稿績鍥㈤槦锛宭oader 鍜屾彃浠朵綔鑰咃紝閭ｄ簺绗竴娆℃彁浜や粬浠殑鎻愪氦锛屾垨鑰呭府鍔╄В鍐虫晠闅滅殑浜猴細鎴戜滑涓嶈兘涓嶆劅璋綘浠€傝繖涓骇鍝佹槸涓轰綘鑰岀敓鐨勶紝浣犱滑甯姪濉戦€犱簡瀹冦€?/p>

2018 鎴戜滑灏嗘敞瀹氳鎶涘純鑰佸彜钁ｆ€濈淮锛岃繋鎺?JS 鐨勭編涓藉鍏达紒鉂?/p>

鎴戜箣鍓嶅凡缁忓娆″己璋冭繃锛屽湪 JS 澶嶅叴 鐨勪粖澶╋紝娌℃湁绀惧尯鐨勫府蹇欙紝webpack 鏄笉浼氬彉鐨勫姝ゅ己澶э紝鍙寔缁互鍙婅摤鍕冪殑鐢熼暱銆傚鏋滄病鏈変綘浠殑甯姪锛寃ebpack 鍙兘鐜板湪涔熻繕鍙槸鍙﹀涓€娆炬櫘閫氱殑鏋勫缓宸ュ叿[Yet Another Build Tool (YABT)]鑰屽凡銆?/p>

鏈€鍚庯紝涓轰綘鎺ㄨ崘

以上是关于銆愮1203鏈熴€憌ebpack 4 鍙戝竷浜嗭紒的主要内容，如果未能解决你的问题，请参考以下文章

webpack 3 姝ｅ紡鍙戝竷锛岃浣犳洿鈥滃揩鈥?/h1>

Git 宸ヤ綔娴佺▼锛汫raphQL 浠庡叆闂ㄥ埌瀹炶返锛汚ngular 9.0 鍙戝竷锛両vy 姝ｅ紡鎶佃揪

Dubbo 鐢熸€佹坊鏂板叺锛孌ubbo Admin 鍙戝竷 v0.1

Hyperf 鍙戝竷 v1.1.13 鐗堟湰 | 浼佷笟绾х殑 PHP 寰湇鍔′簯鍘熺敓鍗忕▼妗嗘灦

Hyperf 鍙戝竷 杞婚噺绾ф湁鍚戞棤鐜浘浠诲姟缂栨帓搴?鍜?閫嗘尝鍏拌〃绀烘硶 瀛靛寲缁勪欢浠ュ強 v2.1.4 鐗堟湰

Stata锛氭満鍣ㄥ涔犲垎绫诲櫒澶у叏