娴烽様澶╃┖楸艰穬锛屽ぉ楂樹换楦熼銆傚杺鍠傚杺锛佹垜鏄Е鑹惧痉銆傪煒勪笂涓€绡囦粙缁嶄簡webpack鐨勫叆闂ㄧ骇鍩虹閰嶇疆锛堜紶閫侀棬馃殌馃殌馃殌锛夈€備笅闈㈡垜浠氨鏉ヨ璇村浣曢€氳繃浼樺寲閰嶇疆椤规潵鎻愬崌鎴戜滑椤圭洰鐨勬瀯寤烘€ц兘銆傚簲璇ヤ紭鍖栧摢浜涘唴瀹癸紵浠庨」鐩疄鎴樼殑瑙掑害锛屾垜浠洿鍏虫敞椤圭洰浠庡紑鍙戝埌鍙戝竷鐨勮繃绋嬨€傚洜姝わ紝浼樺寲椤瑰彲浠ヤ粠浠ヤ笅鍑犱釜缁村害鏉ヨ€冭檻锛氬紑鍙戠幆澧冧紭鍖栦唬鐮佽繍琛屾€ц兘浼樺寲浠ｇ爜璋冭瘯鐢熶骇鐜浼樺寲浼樺寲浠ｇ爜鎵撳寘鏋勫缓閫熷害浼樺寲浠ｇ爜杩愯鎬ц兘浼樺寲浠ｇ爜杩愯鎬ц兘锛堝紑鍙戠幆澧冿級寮€鍙戞湇鍔″櫒寮€鍙戠幆澧冧腑鐨刣evServer锛屼富瑕佷负浜嗕唬鐮佽兘澶熷弸濂界殑杩愯璧锋潵锛屾柟渚挎垜浠殑寮€鍙戝拰璋冭瘯锛屾墍浠ユ垜浠渶瑕佷娇鐢╠evServer鏉ュ惎鍔ㄤ竴涓湰鍦版湇鍔¤浠ｇ爜杩愯璧锋潵銆俤evServer鐢ㄤ簬椤圭洰鑷姩鍖栵紙鑷姩缂栬瘧銆佽嚜鍔ㄦ墦寮€娴忚鍣ㄣ€佽嚜鍔ㄥ埛鏂版祻瑙堝櫒绛夛級銆傚彧浼氬湪鍐呭瓨涓紪璇戞墦鍖咃紝鏋勫缓鍖呬笉浼氬澶栬緭鍑猴紝鑰屾槸瀛樺湪鍐呭瓨涓紝鍏抽棴鍚庝細鑷姩鍒犻櫎銆傚惎鍔ㄥ紑鍙戞湇鍔″櫒devServer锛岄渶瑕佷笅杞藉寘npmi-Dwebpack-dev-server骞跺啓鍏ュ熀纭€鏈嶅姟鍣ㄩ厤缃」devServer:{//椤圭洰鏋勫缓鍚庣殑璺緞contentBase:resolve(__dirname,'dist'),//绔彛鍙穚ort:3000,//鑷姩鎵撳紑娴忚鍣╫pen:true,}锛岄厤缃畬鎴愬悗锛屽氨鍙互鍚姩椤圭洰浜嗐€傛垜鐨剋ebpack瀹夎鍦ㄩ」鐩淮搴︼紝鎵€浠ヤ娇鐢╪px杩愯npxwebpack浼氬湪dist鏂囦欢澶逛笅杈撳嚭鎵撳寘缁撴灉npxwebpack-dev-server鍙細鍦ㄥ唴瀛樹腑缂栬瘧鎵撳寘锛屼笉浼氳緭鍑篐MR锛堟ā鍧楃儹鏇挎崲锛塇MR锛歨otmodulereplacementHotmodulereplacement/妯″潡鐑浛鎹紝鎰熺煡鏂囦欢鍙樺寲骞跺強鏃跺搷搴旈〉闈紝鍏嶅幓F5鎵嬪姩鍒锋柊銆傚彧闇€鍦╠evServer涓缃甴ot涓簍rue锛孒MR鍔熻兘灏变細鑷姩寮€鍚粯璁ゆ儏鍐典笅鍑芥暟寮廽s鏂囦欢锛氶粯璁ゆ儏鍐典笅锛屾偍涓嶈兘浣跨敤HMR鍑芥暟鏉ヤ慨鏀筳s妯″潡銆傛墍鏈夌殑js妯″潡閮戒細琚埛鏂般€傛樉鐒讹紝杩欐牱鍋氫細瀵艰嚧鐑浛鎹㈡晥鐜囦綆涓嬨€傛垜浠渶瑕佷慨鏀瑰叆鍙s鏂囦欢鐨勪唬鐮侊紝杩欐牱濡傛灉涓€涓ā鍧楀彂鐢熷彉鍖栵紝鍙噸寤鸿繖涓ā鍧楋紝鑰屼笉鏄叏閮ㄣ€?/print.jsisjsif(module.hot){//涓€鏃odule.hot涓虹湡锛屽垯琛ㄧず鍚敤浜咹MR鍔熻兘銆?->璁〩MR鍑芥暟浠ｇ爜鐢熸晥module.hot.accept('./print.js',function(){//璇ユ柟娉曚細鐩戝惉print.js鏂囦欢鐨勫彉鍖栵紝涓€鏃︽湁鍙樺寲锛屽彧璇ユā鍧楀皢琚噸鏂版墦鍖呭拰鏋勫缓銆傚叾浠栨ā鍧椾笉浼氥€?/浼氭墽琛屼笅闈㈢殑鍥炶皟鍑芥暟print();});}html鏂囦欢锛氶粯璁や笉鑳戒娇鐢℉MR鍔熻兘銆傛敞鎰忥細浣跨敤HMR浼氬鑷磆tml鏂囦欢琚儹鏇挎崲銆傚彲浠ヤ慨鏀筫ntry鏉＄洰锛屽皢html鏂囦欢瀵煎叆entry:['./src/index.js','./src/index.html']浼樺寲浠ｇ爜璋冭瘯锛堝紑鍙戠幆澧冿級灏哻ss鎻愬彇鍒板崟鐙殑鏂囦欢涓敱浜巆ss-loader灏哻ss鏂囦欢闆嗘垚鍒癹s鏂囦欢涓紝浼氶€犳垚濡備笅褰卞搷锛?:js鏂囦欢浣撶Н浼氬緢澶?:闇€瑕佸厛鍔犺浇js鍐嶅姩鎬佸垱寤簊tyle鏍囩锛宻tyle娓叉煋閫熷害浼氭參瑙ｅ喅鏂规硶锛氬皢style-loader鏇挎崲涓篗iniCssExtractPlugin.loader锛屽皢js涓殑css鎻愬彇鍒板崟鐙殑鏂囦欢涓紝浣犻渶瑕佸紩鍏ini-css-extract-pluginnpmi-Dmini-css-extract-plugin//webpack.config.jsconstMiniCssExtractPlugin=require('mini-css-extract-plugin'){module:{rules:[{娴嬭瘯锛?\.css$/锛屼娇鐢細[{loader:MiniCssExtractPlugin.loader,閫夐」锛歿publicPath:'../'}},],},]},鎻掍欢锛歔newMiniCssExtractPlugin({filename:'css/main.css'}),]}Css鍏煎鎬у鐞嗗湪寮€鍙戣繃绋嬩腑锛屾垜浠啓涓€浜涢珮绾ф牱寮忕殑鏃跺€欙紝鑰佷竴浠ｆ祻瑙堝櫒涓嶆敮鎸併€傝繖涓椂鍊欏氨闇€瑕佸紩鍏ヤ竴浜沴oader鏉ュ府鍔╂垜浠В鍐宠繖涓棶棰樸€傞渶瑕佸紩鍏ostcss-loaderpostcss-preset-envnpmi-Dpostcss-loaderpostcss-preset-env//webpack.config.js{loader:'postcss-loader',options:{ident:'postcss',plugins:()=>[require('postcss-preset-env')(),],},},瀵煎叆loader鍚庨渶瑕佸湪package.json涓畾涔塨rowserslist//package.json"browserslist":{//寮€鍙戠幆澧?development":[//杩欓噷鍙互鍖归厤涓嶅悓鐨勬祻瑙堝櫒"last1chromeversion","last1firefoxversion","last1safariversion"],//鐢熶骇鐜"production":[//婊¤冻澶ч儴鍒嗘祻瑙堝櫒閮芥槸compatiblewith">0.2%","notdead","notop_miniall"]}锛宩s鍏煎鎬у鐞嗕负浜嗗吋瀹硅€佷竴浠ｆ祻瑙堝櫒锛宩s涔熼渶瑕佸吋瀹广€傞渶瑕佸紩鍏abel-loader@babel/preset-envcore-js@babel/core{test:/\.js$/,exclude:/node_modules/,use:[{loader:'babel-loader',options:{presets:[['@babel/preset-env',{//鎸夐渶鍔犺浇useBuiltIns:'usage',//鎸囧畾core-js鐗堟湰corejs:{version:3},//鎸囧畾娴忚鍣ㄧ洰鏍囨槸鍝簺鐗堟湰鍏煎锛歿chrome:'60',firefox:'60',ie:'9',safari:'10',edge:'17'}}]],cacheDirectory:true}}],},source-mapsource-map锛氫竴绉嶆彁渚涗粠婧愪唬鐮佸埌鏋勫缓浠ｇ爜鐨勬槧灏勭殑鎶€鏈紙濡傛灉鏋勫缓浠ｇ爜鍑虹幇闂锛屽彲浠ラ€氳繃鏄犲皠璺熻釜婧愪唬鐮侀敊璇級鍙傛暟锛歔inline-|hidden-|eval-][nosources-][cheap-[module-]]source-mapdevtool:'eval-source-map'涓婇潰鍒楀嚭鐨勫弬鏁板彲浠ヤ换鎰忕粍鍚堬紝姣忎釜缁勫悎閮戒笉涓€鏍枫€傚父瑙佺殑缁勫悎鍙互鏈夊杈?绉嶆ā寮忥紝閭ｄ箞鎬庢牱鐨勭粍鍚堟瘮杈冨悎鐞嗗憿锛熸渶鍚庯紝鏈€濂界殑涓ょ鏂规鏄?锛歟val-source-map锛堝畬鏁存€ч珮锛岄€熷害蹇級2锛歟val-cheap-module-souce-map锛堥敊璇彁绀哄拷鐣ュ垪浣嗗寘鍚叾浠栦俊鎭紝閫熷害蹇級閰嶇疆eslint浠ｇ爜浣滈鐫ｅ療缁勭殑鍙戝睍锛岃鑼冭嚜鐒跺繀涓嶅彲灏戙€備釜浜鸿寰梕slint杩囦簬涓ヨ皑锛屽缓璁洟闃熸牴鎹嚜宸辩殑鎯呭喌鍐欎竴濂楀悎閫傜殑eslint瑙勫垯銆傝繖閲屾湁涓€缁勬祦琛岀殑js椋庢牸鐨刟irbnb浼犻€侀棬馃殌馃殌馃殌闇€瑕佸紩鍏slint-loadereslint//webpack.config.js{test:/\.js$/,exclude:/node_modules/,//蹇界暐node_modulesloader:'eslint-loader',options:{fix:true,//鑷姩淇},}瀵煎叆loader鍚庯紝杩橀渶瑕佸湪package.json鐨別slintConfig涓啓鍏ラ厤缃?/package.json"eslintConfig":{"extends":"airbnb-base",//缁ф壙airbnb鐨勬牱寮忚鑼?env":{"browser":true//鍙互鍦ㄦ祻瑙堝櫒涓娇鐢ㄥ叏灞€鍙橀噺锛堜娇鐢╳indow涓嶄細鎶ラ敊锛墋}浼樺寲浠ｇ爜灏佽鍜屾瀯寤洪€熷害锛堢敓浜х幆澧冿級oneOfoneOf锛氬姞杞藉櫒鍖归厤鍚庯紝涓嶅啀鍚戝悗鍖归厤锛屼紭鍖栫敓浜х幆澧冪殑鎵撳寘鏋勫缓閫熷害浼氬湪绗簩娆℃墦鍖呮瀯寤虹殑鏃跺€欐洿鏂般€傚叾浠栨湭鏇存敼鐨勫唴瀹硅繘鍏ョ紦瀛樸€傛墍浠ユ彁楂樻瀯寤洪€熷害//寮€鍚痓abel缂撳瓨cacheDirectory:true杩欓噷鏈変釜闂锛氬綋鏂囦欢鍚嶄笉鍙戠敓鍙樺寲鏃讹紝浼氱紦瀛樺悓鍚嶆枃浠躲€備細瀵艰嚧淇敼鍚庣殑鍐呭涓庡疄闄呮樉绀虹殑鍐呭涓嶄竴鑷淬€傝В鍐虫柟娉曪細浣跨敤hash鏉ュ懡鍚嶏紝閫氳繃鏇存敼鏂囦欢鍚嶆潵鍒ゆ柇鍝簺鏂囦欢闇€瑕佹洿鏂般€傚搱甯屽€煎彲浠ュ垎涓?hash,chunkhash,contenthash)銆傝繖閲屼娇鐢╟ontenthash姣旇緝鍚堢悊锛歸epack姣忔鎵撳寘閮戒細鐢熸垚涓€涓敮涓€鐨刪ash鍊笺€俢hunkhash锛氭牴鎹ā鍧楃敓鎴愮殑鍝堝笇鍊笺€傚睘浜庡悓涓€妯″潡鐨刪ash鍊间笌contenthash鐩稿悓锛歨ash鍊兼槸鏍规嵁鏂囦欢鐨勫唴瀹圭敓鎴愮殑锛屽彲浠ヤ繚璇佷笉鍚屾枃浠剁殑hash鍊肩殑鍞竴鎬с€傚杩涚▼鎵撳寘thread-loader浼氫负鍏惰儗鍚庣殑loader寮€鍚杩涚▼鎵撳寘銆傞渶瑕佸紩鍏hread-loader鏉ュ惎鍔╰hread-loader銆傚惎鍔╰hread-loader鐨勪唬浠锋槸姣旇緝鏄傝吹鐨勩€備笉鎺ㄨ崘浣跨敤npmi-Dthread-loader{loader:'thread-loader',options:{workers:2//鍚姩2涓繘绋媫},externalsexternals璁╀竴浜涚涓夋柟搴撲笉灏佽externals:{jquery:'jQuery'}浼樺寲浠ｇ爜杩愯鎬ц兘锛堢敓浜х幆澧冿級鍘嬬缉鏂囦欢鍘嬬缉鏍峰紡鏂囦欢闇€瑕佸紩鍏ptimize-css-assets-webpack-pluginnpmi-Doptimize-css-assets-webpack-pluginconstOptimizeCssAssetsWebpackPlugin=require('optimize-css-assets-webpack-plugin')plugins:[newOptimizeCssAssetsWebpackPlugin(),]鍘嬬缉html闇€瑕佸紩鍏tml-webpack-pluginhtml-webpack-plugin浼氳嚜鍔ㄥ崟鐙墦鍖呮牱寮忔枃浠讹紝閫氳繃閾炬帴鏍囩i瀵煎叆npm-Dhtml-webpack-pluginconstHtmlWebpackPlugin=require('html-webpack-plugin')plugins:[newHtmlWebpackPlugin({template:'./src/index.html',minify:{//鍒犻櫎绌烘牸collapseWhitespace:true,//绉婚櫎璇勮removeComments:true}}),]js浠ｇ爜浼氳嚜鍔ㄥ帇缂﹕鍦ㄧ敓浜х幆澧冧腑treeshaking锛堟爲鎽囧姩锛夊鏋滀綘鎶婄▼搴忔兂璞℃垚涓€妫垫爲锛屾垜浠鍦ㄤ娇鐢ㄧ殑鏈夌敤浠ｇ爜鎴栫涓夋柟搴撲唬琛ㄧ豢鍙躲€傞偅浜涙浠ｇ爜锛屾浠ｇ爜浠ｈ〃鏋悗鐨勬灟鍙躲€倀reeshaking灏卞儚涓€鍙棤褰㈢殑澶ф墜浣垮姴鎽囨爲锛屾妸鏋彾鎶栬惤锛堟棤鐢ㄤ唬鐮侊級銆俆reeshaking锛堟爲鎽囧姩锛夊墠鎻?锛氬繀椤讳娇鐢╡s6妯″潡鍖?锛氬紑鍚敓浜х幆澧冨湪浠ヤ笂涓や釜鍓嶆彁涓嬶紝webpack浼氳嚜鍔ㄥ幓鎺夋垜浠棤鐢ㄧ殑浠ｇ爜銆傚彲浠ュ湪package.json涓啓閰嶇疆椤规潵鎺у埗treeShake鑼冨洿//涓嶄細瀵筩ss/less鏂囦欢treeshaking澶勭悊鈥渟ideEffects鈥濓細["*.css","*.less"]浠ｇ爜鎷嗗垎webpack浼氭墦鍖呭拰灏唈s浠ｇ爜杈撳嚭鎴恇uild.js鏂囦欢锛岃繖瀵逛簬澶у瀷椤圭洰鏉ヨ鏃犵枒鏄嚧鍛界殑銆俠uild.js鏂囦欢杩囧ぇ锛屼細瀵艰嚧椤甸潰鍔犺浇鏃堕棿闀匡紝鍙敼涓€鐐逛唬鐮佸氨涓嬭浇鏁翠釜澶ф枃浠剁瓑涓€绯诲垪闂銆備唬鐮佹媶鍒嗗皢涓€涓墦鍖呰緭鍑虹殑澶undle.js鏂囦欢鎷嗗垎鎴愬涓皬鏂囦欢锛岃繖鏍峰彲浠ュ苟琛屽姞杞藉涓枃浠讹紝姣斿姞杞戒竴涓枃浠堕€熷害鏇村揩銆備唬鐮佹媶鍒嗘湁3绉嶅疄鐜版柟寮忥細1锛氬鍏ュ彛鎷嗗垎锛堝叆鍙ｅ叆鍙ｄ娇鐢ㄥ涓叆鍙ｆ枃浠讹級entry:{index:'./src/js/index.js',test:'./src/js/test.js'},output:{filename:'js/[name].[contenthash:10].js',path:resolve(__dirname,'build')},2:閰嶇疆浼樺寲optimization:{splitChunks:{chunks:'all'}},3:import鍔ㄦ€佸鍏ヨ娉昳mport('./test').then(({a,b})=>{//鏂囦欢鍔犺浇鎴愬姛~}).catch(()=>{//鏂囦欢鍔犺浇澶辫触~});鎳掑姞杞斤紙lazyloading/preloading锛夋噿鍔犺浇锛氬綋鏂囦欢闇€瑕佷娇鐢ㄦ椂鍔犺浇棰勫姞杞斤細鍦ㄤ娇鐢ㄥ墠锛屾棭鍔犺浇鍙互閫氳繃import瀹炵幇寤惰繜鍔犺浇鍜岄鍔犺浇dynamicimport//鍦ㄥ紓姝ュ洖璋冨嚱鏁颁腑浣跨敤瀵煎叆鐨勫唴瀹?鐒跺悗鍦ㄩ渶瑕佺殑鏃跺€欏姞杞?/webpackPrefetch:true琛ㄧず寮€鍚鍔犺浇import(/*webpackChunkName:'test',webpackPrefetch:true*/'./test').then(()=>{...});鍒扮洰鍓嶄负姝紝鍏充簬webpack浼樺寲鐨勫唴瀹瑰氨鏄繖浜涖€傝繖閲岀殑鎬荤粨鍙兘涓嶅叏闈紝浣嗚冻浠ュ簲瀵瑰ぇ閮ㄥ垎椤圭洰銆傝鎴戜滑浜掔浉榧撳姳锛屽姫鍔涘涔狅紝澶╁ぉ鍚戜笂銆傝阿璋㈠枩娆煈嶅啀鐪嬩竴閬嶏紝宸茬粡鎴愪负涔犳儻浜嗭紒鏈郴鍒楁寔缁洿鏂帮紝鎮ㄧ殑涓€閿笁杩炴槸鎴戠户缁啓涓嬪幓鐨勬渶澶у姩鍔涖€傚鏋滄偍瀵规湰鍗氬鏈変粈涔堟剰瑙佸拰寤鸿锛屾杩庣暀瑷€锛佹杩庢墦鎵帮紒馃槣馃槤
