webpack 3 姝ｅ紡鍙戝竷锛岃浣犳洿鈥滃揩鈥?/h1> Posted 濂囪垶鍛ㄥ垔
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webpack 3 姝ｅ紡鍙戝竷锛岃浣犳洿鈥滃揩鈥?/h1>
相关的知识，希望对你有一定的参考价值。
缂栬€呮寜锛氭湰鏂囩敱sangle7鍦ㄤ紬鎴愮炕璇戝钩鍙颁笂缈昏瘧銆倃ebpack3姝ｅ紡鍙戝竷浜嗭紝鐪嬬湅浣犱笉鑳介敊杩囩殑鏂扮壒鎬ф湁鍝簺銆?/span>
缁堜簬璧板埌杩欓噷锛屽お缇庝簡
馃嵕馃殌webpack 3 姝ｅ紡鍙戝竷馃殌馃嵕
鑼冨洿鎻愬崌锛屸€滈瓟娉曟敞閲娾€濓紝浠ュ強鏇村鏂扮壒鎬э紒
鍦ㄥ彂甯冧簡 webpack v2 涔嬪悗锛屾垜浠浘鍚戠ぞ鍖哄仛浜嗕竴浜涙壙璇恒€傛垜浠壙璇哄皢浼氬彂甯冪敱鐢ㄦ埛绁ㄩ€夊嚭鏉ョ殑鍔熻兘銆傛澶栵紝鎴戜滑鎵胯鍙戝竷鍛ㄦ湡浼?span class="mq-8">鏇村揩锛屾洿绋冲畾銆?/p>
杩欐娌℃湁 beta 鐗堟湰锛屽畬鍏ㄥ悜涓嬪吋瀹广€傛垜浠壙璇鸿浣犱滑鈥斺€斾績杩?webpack 鎴愰暱鐨勭ぞ鍖烘垚鍛樹滑鈥斺€旀洿杞绘澗鍦颁娇鐢ㄣ€?/p>
webpack 鍥㈤槦鑷豹鍦板甯冿紝浠婂ぉ鎴戜滑鍙戝竷浜?webpack 3.0.0锛?鐜板湪灏卞彲浠ヤ笅杞芥垨鍗囩骇锛?/p>
npm install webpack@3.0.0 --save-dev
鎴栬€?/p>
yarn add webpack@3.0.0 --dev
浠?webpack 2 杩佺Щ鍒?3锛?span class="mq-18">浣犲彧闇€瑕佹墽琛屽崌绾у懡浠?/strong>锛岃€屼笉闇€瑕佷慨鏀逛换浣曚唬鐮併€傛垜浠皢杩欐鍗囩骇鏍囪涓虹増鏈殑閲嶅ぇ鍗囩骇锛屾槸鍥犱负鍐呴儴鐨勭獊鐮存€у彉鍖栧彲鑳戒細褰卞搷鏌愪簺鎻掍欢鐨勪娇鐢ㄣ€?/p>
鍒扮洰鍓嶄负姝紝98% 鐨勫崌绾х殑鐢ㄦ埛閮芥病鏈夐亣鍒颁换浣曚笉鍏煎锛?/strong>
鏈夊摢浜涙柊鐗规€?
涓婃枃宸茬粡鎻愬埌锛屾垜浠彂甯冧簡涓€浜涚敱鐢ㄦ埛鎶曠エ閫夊嚭鐨勫姛鑳斤紝鎰熻阿 Github , 璧炲姪鍟嗗拰鎴戜滑鐨勬敮鎸佽€咃紝鏈変簡浠栦滑鎴戜滑鎵嶈兘鍋氬嚭姣忎竴涓敼杩涖€傪煒?/p>
馃敩鑼冨洿鎻愬崌锛圫cope Hoisting 锛夝煍?/h3>
鑼冨洿鎻愬崌鏄?webpack 3 鐨勯噸鐐瑰姛鑳姐€備箣鍓?webpack 鍦ㄦ墦鍖呮椂锛屾偍鐨?bundle 涓殑姣忎釜妯″潡閮藉皢琚寘瑁呭湪鍗曠嫭鐨勫嚱鏁伴棴鍖呬腑銆傝繖浜涢棴鍖呬細浣挎偍鐨?JavaScript 鍦ㄦ祻瑙堝櫒涓墽琛岄€熷害鏇存參銆傜浉姣斾箣涓嬶紝鍍?Closure Compiler 鍜?RollupJS 杩欐牱鐨勫伐鍏峰彲浠ュ皢鎵€鏈夋ā鍧楀寘瑁呭湪涓€涓ぇ鐨勯棴鍖呭唴锛屼粠鑰屼娇鎮ㄧ殑浠ｇ爜鍦ㄦ祻瑙堝櫒涓叿鏈夋洿蹇殑鎵ц閫熷害銆?/p>
濡備粖锛屼娇鐢?webpack 3锛屾偍鐜板湪灏卞彲浠?span class="mq-29">鍦ㄩ厤缃腑娣诲姞涓嬮潰鐨勬彃浠朵互鍚敤鑼冨洿鎻愬崌锛?/p>
module.exports = {
plugins: [
new webpack.optimize.ModuleConcatenationPlugin()
]
};
鑼冨洿鎻愬崌鏄熀浜?ECMAScript 妯″潡锛圡odule锛夎娉曞疄鐜扮殑涓€涓壒寰併€傞€氳繃鑼冨洿鎻愬崌锛寃ebpack 鍙互鏍规嵁浣犳鍦ㄤ娇鐢ㄧ殑妯″潡鍜?span class="mq-52">涓€浜涘叾浠栨潯浠?/span>鏉ュ垽鏂槸鍚﹂渶瑕佸洖閫€鍒版櫘閫氱殑鎵撳寘鏂瑰紡銆?/p>
涓轰簡浜嗚В浠€涔堣Е鍙戜簡杩欎簺鍥為€€锛屾垜浠坊鍔犱簡涓€涓?span class="mq-54">--display-optimization-bailout cli鏍囧織锛屽畠灏嗗憡璇変綘鏄粈涔堝鑷寸殑鍥為€€銆?/p>
鍚屾椂锛岀敱浜庤寖鍥存彁鍗囦細绉婚櫎妯″潡澶栫殑鍑芥暟鍖呰锛屼綘鍙兘浼氱湅鍒颁竴浜涘皬鐨勪綋绉敼杩涖€傜劧鑰岋紝鏇存樉钁楃殑鏀硅繘鏄?JavaScript 鍦ㄦ祻瑙堝櫒涓姞杞界殑閫熷害銆傚鏋滄偍鍦ㄦ瘮杈冧娇鐢ㄤ箣鍓嶅拰涔嬪悗鏃跺彂鐜板姞杞介€熷害鍙栧緱浜嗛潪甯告鐨勬敼杩涳紝璇烽殢鏃跺弽棣堜竴浜涙暟鎹紝鎴戜滑灏嗗緢鑽ｅ垢鍒嗕韩锛?/p>
馃敭鈥滈瓟娉曟敞閲娾€?Magic Comments)馃敭
褰撴垜浠湪 webpack 2 涓紩鍏ュ姩鎬佸鍏ヨ娉曪紙import()锛夌殑鐢ㄦ硶鏃讹紝鐢ㄦ埛琛ㄧず锛屼粬浠笉鑳藉儚浣跨敤require.ensure涓€鏍峰垱寤哄懡鍚嶄唬鐮佸潡锛坈hunk锛夈€?/p>
鎴戜滑鐜板湪浠嬬粛鐢辩ぞ鍖哄垱寤虹殑鈥滈瓟娉曟敞閲娾€濓紝瀹冨彲浠ヤ紶閫掍唬鐮佸潡鐨勫悕绉帮紝杩樻湁鏇村鍔熻兘锛屼緥濡傚彲浠ユ坊鍔犳洿澶氱殑鍐呰仈娉ㄩ噴鍒?span class="mq-64">import()璇彞涓€?/p>
import(/* webpackChunkName: "my-chunk-name" */ 'module');
閫氳繃浣跨敤娉ㄩ噴锛屾垜浠兘澶熷湪浣跨敤鍔ㄦ€佸鍏ヨ娉曠殑鍚屾椂锛屽浠ｇ爜鍧楄繘琛屽懡鍚嶃€?/p>
灏界杩欐槸鎴戜滑鍦?v2.4 鍜?v2.6 涓彂甯冪殑鎶€鏈壒鎬э紝浣嗗湪 v3 涓紝鎴戜滑淇浜嗚繖浜涘姛鑳界殑涓€浜涢敊璇紝浣垮叾鍙樺緱鏇寸ǔ瀹氥€?鐜板湪鍏佽鍔ㄦ€佸鍏ヨ娉曞叿鏈変笌require.ensure鐩稿悓鐨勭伒娲绘€с€?/p>
瑕佷簡瑙ｆ洿澶氫俊鎭紝璇峰弬闃呮垜浠?span class="mq-79">鏈€鏂版枃妗ｇ殑浠ｇ爜鍒嗗壊閮ㄥ垎锛屾柊鍔熻兘閮ㄥ垎宸茬粡楂樹寒锛?/p>
馃槏 鎺ヤ笅鏉ュ仛浠€涔堬紵 馃槏
鎴戜滑鏈夊緢澶氬姛鑳藉拰澧炲己鍔熻兘鎯宠鎺ㄥ嚭锛佷絾鎴戜滑闇€瑕佷簡瑙ｇ敤鎴烽渶姹傜殑浼樺厛绾с€傛墍浠?span class="mq-82">璁块棶鎴戜滑鐨勬姇绁ㄩ〉闈紝骞舵彁鍑轰綘鎯崇湅鍒扮殑鍔熻兘锛?/span>
杩欎簺鏄垜浠笇鏈涜兘甯︾粰鎮ㄧ殑涓€浜涘姛鑳斤細
鏇村ソ鍦版瀯寤虹紦瀛?/p>
鏇村揩鐨勫垵濮嬫瀯寤哄拰澧為噺鏋勫缓
鏇村ソ鐨?TypeScript 浣撻獙
鏀硅繘闀挎湡缂撳瓨
WASM 妯″潡鏀寔
鏀瑰杽鐢ㄦ埛浣撻獙
濂囪垶鍛ㄥ垔
鈥斺€斺€?span class="mq-100">鈥斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€?/span>鈥斺€斺€?/span>
棰嗙暐鍓嶇鎶€鏈?闃呰濂囪垶鍛ㄥ垔
闀挎寜浜岀淮鐮侊紝鍏虫敞濂囪垶鍛ㄥ垔
鈻?/strong>
以上是关于webpack 3 姝ｅ紡鍙戝竷锛岃浣犳洿鈥滃揩鈥?/h1>
Posted 濂囪垶鍛ㄥ垔
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webpack 3 姝ｅ紡鍙戝竷锛岃浣犳洿鈥滃揩鈥?/h1>
缂栬€呮寜锛氭湰鏂囩敱sangle7鍦ㄤ紬鎴愮炕璇戝钩鍙颁笂缈昏瘧銆倃ebpack3姝ｅ紡鍙戝竷浜嗭紝鐪嬬湅浣犱笉鑳介敊杩囩殑鏂扮壒鎬ф湁鍝簺銆?/span>
缁堜簬璧板埌杩欓噷锛屽お缇庝簡
馃嵕馃殌webpack 3 姝ｅ紡鍙戝竷馃殌馃嵕
鑼冨洿鎻愬崌锛屸€滈瓟娉曟敞閲娾€濓紝浠ュ強鏇村鏂扮壒鎬э紒
鍦ㄥ彂甯冧簡 webpack v2 涔嬪悗锛屾垜浠浘鍚戠ぞ鍖哄仛浜嗕竴浜涙壙璇恒€傛垜浠壙璇哄皢浼氬彂甯冪敱鐢ㄦ埛绁ㄩ€夊嚭鏉ョ殑鍔熻兘銆傛澶栵紝鎴戜滑鎵胯鍙戝竷鍛ㄦ湡浼?span class="mq-8">鏇村揩锛屾洿绋冲畾銆?/p>
杩欐娌℃湁 beta 鐗堟湰锛屽畬鍏ㄥ悜涓嬪吋瀹广€傛垜浠壙璇鸿浣犱滑鈥斺€斾績杩?webpack 鎴愰暱鐨勭ぞ鍖烘垚鍛樹滑鈥斺€旀洿杞绘澗鍦颁娇鐢ㄣ€?/p>
webpack 鍥㈤槦鑷豹鍦板甯冿紝浠婂ぉ鎴戜滑鍙戝竷浜?webpack 3.0.0锛?鐜板湪灏卞彲浠ヤ笅杞芥垨鍗囩骇锛?/p>
npm install webpack@3.0.0 --save-dev
鎴栬€?/p>
yarn add webpack@3.0.0 --dev
浠?webpack 2 杩佺Щ鍒?3锛?span class="mq-18">浣犲彧闇€瑕佹墽琛屽崌绾у懡浠?/strong>锛岃€屼笉闇€瑕佷慨鏀逛换浣曚唬鐮併€傛垜浠皢杩欐鍗囩骇鏍囪涓虹増鏈殑閲嶅ぇ鍗囩骇锛屾槸鍥犱负鍐呴儴鐨勭獊鐮存€у彉鍖栧彲鑳戒細褰卞搷鏌愪簺鎻掍欢鐨勪娇鐢ㄣ€?/p>
鍒扮洰鍓嶄负姝紝98% 鐨勫崌绾х殑鐢ㄦ埛閮芥病鏈夐亣鍒颁换浣曚笉鍏煎锛?/strong>
鏈夊摢浜涙柊鐗规€?
涓婃枃宸茬粡鎻愬埌锛屾垜浠彂甯冧簡涓€浜涚敱鐢ㄦ埛鎶曠エ閫夊嚭鐨勫姛鑳斤紝鎰熻阿 Github , 璧炲姪鍟嗗拰鎴戜滑鐨勬敮鎸佽€咃紝鏈変簡浠栦滑鎴戜滑鎵嶈兘鍋氬嚭姣忎竴涓敼杩涖€傪煒?/p>
馃敩鑼冨洿鎻愬崌锛圫cope Hoisting 锛夝煍?/h3>
鑼冨洿鎻愬崌鏄?webpack 3 鐨勯噸鐐瑰姛鑳姐€備箣鍓?webpack 鍦ㄦ墦鍖呮椂锛屾偍鐨?bundle 涓殑姣忎釜妯″潡閮藉皢琚寘瑁呭湪鍗曠嫭鐨勫嚱鏁伴棴鍖呬腑銆傝繖浜涢棴鍖呬細浣挎偍鐨?JavaScript 鍦ㄦ祻瑙堝櫒涓墽琛岄€熷害鏇存參銆傜浉姣斾箣涓嬶紝鍍?Closure Compiler 鍜?RollupJS 杩欐牱鐨勫伐鍏峰彲浠ュ皢鎵€鏈夋ā鍧楀寘瑁呭湪涓€涓ぇ鐨勯棴鍖呭唴锛屼粠鑰屼娇鎮ㄧ殑浠ｇ爜鍦ㄦ祻瑙堝櫒涓叿鏈夋洿蹇殑鎵ц閫熷害銆?/p>
濡備粖锛屼娇鐢?webpack 3锛屾偍鐜板湪灏卞彲浠?span class="mq-29">鍦ㄩ厤缃腑娣诲姞涓嬮潰鐨勬彃浠朵互鍚敤鑼冨洿鎻愬崌锛?/p>
module.exports = {
plugins: [
new webpack.optimize.ModuleConcatenationPlugin()
]
};
鑼冨洿鎻愬崌鏄熀浜?ECMAScript 妯″潡锛圡odule锛夎娉曞疄鐜扮殑涓€涓壒寰併€傞€氳繃鑼冨洿鎻愬崌锛寃ebpack 鍙互鏍规嵁浣犳鍦ㄤ娇鐢ㄧ殑妯″潡鍜?span class="mq-52">涓€浜涘叾浠栨潯浠?/span>鏉ュ垽鏂槸鍚﹂渶瑕佸洖閫€鍒版櫘閫氱殑鎵撳寘鏂瑰紡銆?/p>
涓轰簡浜嗚В浠€涔堣Е鍙戜簡杩欎簺鍥為€€锛屾垜浠坊鍔犱簡涓€涓?span class="mq-54">--display-optimization-bailout cli鏍囧織锛屽畠灏嗗憡璇変綘鏄粈涔堝鑷寸殑鍥為€€銆?/p>
鍚屾椂锛岀敱浜庤寖鍥存彁鍗囦細绉婚櫎妯″潡澶栫殑鍑芥暟鍖呰锛屼綘鍙兘浼氱湅鍒颁竴浜涘皬鐨勪綋绉敼杩涖€傜劧鑰岋紝鏇存樉钁楃殑鏀硅繘鏄?JavaScript 鍦ㄦ祻瑙堝櫒涓姞杞界殑閫熷害銆傚鏋滄偍鍦ㄦ瘮杈冧娇鐢ㄤ箣鍓嶅拰涔嬪悗鏃跺彂鐜板姞杞介€熷害鍙栧緱浜嗛潪甯告鐨勬敼杩涳紝璇烽殢鏃跺弽棣堜竴浜涙暟鎹紝鎴戜滑灏嗗緢鑽ｅ垢鍒嗕韩锛?/p>
馃敭鈥滈瓟娉曟敞閲娾€?Magic Comments)馃敭
褰撴垜浠湪 webpack 2 涓紩鍏ュ姩鎬佸鍏ヨ娉曪紙import()锛夌殑鐢ㄦ硶鏃讹紝鐢ㄦ埛琛ㄧず锛屼粬浠笉鑳藉儚浣跨敤require.ensure涓€鏍峰垱寤哄懡鍚嶄唬鐮佸潡锛坈hunk锛夈€?/p>
鎴戜滑鐜板湪浠嬬粛鐢辩ぞ鍖哄垱寤虹殑鈥滈瓟娉曟敞閲娾€濓紝瀹冨彲浠ヤ紶閫掍唬鐮佸潡鐨勫悕绉帮紝杩樻湁鏇村鍔熻兘锛屼緥濡傚彲浠ユ坊鍔犳洿澶氱殑鍐呰仈娉ㄩ噴鍒?span class="mq-64">import()璇彞涓€?/p>
import(/* webpackChunkName: "my-chunk-name" */ 'module');
閫氳繃浣跨敤娉ㄩ噴锛屾垜浠兘澶熷湪浣跨敤鍔ㄦ€佸鍏ヨ娉曠殑鍚屾椂锛屽浠ｇ爜鍧楄繘琛屽懡鍚嶃€?/p>
灏界杩欐槸鎴戜滑鍦?v2.4 鍜?v2.6 涓彂甯冪殑鎶€鏈壒鎬э紝浣嗗湪 v3 涓紝鎴戜滑淇浜嗚繖浜涘姛鑳界殑涓€浜涢敊璇紝浣垮叾鍙樺緱鏇寸ǔ瀹氥€?鐜板湪鍏佽鍔ㄦ€佸鍏ヨ娉曞叿鏈変笌require.ensure鐩稿悓鐨勭伒娲绘€с€?/p>
瑕佷簡瑙ｆ洿澶氫俊鎭紝璇峰弬闃呮垜浠?span class="mq-79">鏈€鏂版枃妗ｇ殑浠ｇ爜鍒嗗壊閮ㄥ垎锛屾柊鍔熻兘閮ㄥ垎宸茬粡楂樹寒锛?/p>
馃槏 鎺ヤ笅鏉ュ仛浠€涔堬紵 馃槏
鎴戜滑鏈夊緢澶氬姛鑳藉拰澧炲己鍔熻兘鎯宠鎺ㄥ嚭锛佷絾鎴戜滑闇€瑕佷簡瑙ｇ敤鎴烽渶姹傜殑浼樺厛绾с€傛墍浠?span class="mq-82">璁块棶鎴戜滑鐨勬姇绁ㄩ〉闈紝骞舵彁鍑轰綘鎯崇湅鍒扮殑鍔熻兘锛?/span>
杩欎簺鏄垜浠笇鏈涜兘甯︾粰鎮ㄧ殑涓€浜涘姛鑳斤細
鏇村ソ鍦版瀯寤虹紦瀛?/p>
鏇村揩鐨勫垵濮嬫瀯寤哄拰澧為噺鏋勫缓
鏇村ソ鐨?TypeScript 浣撻獙
鏀硅繘闀挎湡缂撳瓨
WASM 妯″潡鏀寔
鏀瑰杽鐢ㄦ埛浣撻獙
濂囪垶鍛ㄥ垔
鈥斺€斺€?span class="mq-100">鈥斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€斺€?/span>鈥斺€斺€?/span>
棰嗙暐鍓嶇鎶€鏈?闃呰濂囪垶鍛ㄥ垔
闀挎寜浜岀淮鐮侊紝鍏虫敞濂囪垶鍛ㄥ垔
鈻?/strong>
以上是关于webpack 3 姝ｅ紡鍙戝竷锛岃浣犳洿鈥滃揩鈥?/h1>