鏈郴鍒楁枃绔犳槸鎴戝湪瀛︿範webpack鏃剁殑鎬荤粨涓庢敹鑾枫€傛湰鏂囨槸绯诲垪鏂囩珷鐨勭涓夌瘒锛屽唴瀹瑰寘鎷墠绔柊鎵嬬粡甯稿拷瑙嗙殑娴忚鍣ㄥ吋瀹规€ч棶棰樺拰postcss鐨勬祻瑙堝櫒鍏煎鎬ч棶棰樸€傜洰鍓嶅競闈笂鐨勬祻瑙堝櫒寰堝锛岄€傞厤涓嶅悓鐨勬祻瑙堝櫒锛屽簲璇ユ€庝箞瑙ｅ喅鍛紵棣栧厛瑕佹敞鎰忕殑鏄紝杩欓噷鐨勬祻瑙堝櫒閫傞厤鎸囩殑鏄涓嶅悓娴忚鍣ㄧ壒鎬х殑鏀寔锛氭瘮濡侰SS鐗规€с€丣avaScript璇硶鐗规€х瓑銆傞偅涔堬紝杩欓噷灏辨湁涓€涓棶棰橈紝濡備綍鍒ゆ柇鏀寔鍝簺鐗堟湰鐨勬祻瑙堝櫒鍛紵鍦ㄩ」鐩紑鍙戜腑锛屾垜浠粡甯镐細鍦?broswerslistrc鎴栬€卲ackage.json涓湅鍒板涓嬮厤缃細>1%last4versionnotdead閫氳繃杩欎簺閰嶇疆锛屽湪鈥淐anIuse鈥濅娇鐢ㄨ〃涓煡璇㈢鍚堟潯浠剁殑娴忚鍣紝鐒跺悗閽堝杩欎簺娴忚鍣ㄥ仛鐗规€у吋瀹?涓轰簡鑳藉鍦ㄥ涓墠绔伐鍏蜂箣闂村叡浜繖浜涢厤缃紝闇€瑕佷娇鐢ㄤ竴涓彨鍋歜rowserlistBrowserslist鐨勫伐鍏凤紝鍦ㄤ笉鍚岀殑鍓嶇宸ュ叿涔嬮棿鍏变韩鐩爣娴忚鍣ㄥ拰Node.js鐗堟湰鐨勯厤缃€傚畠鐢ㄤ簬锛欰utoprefixerBabelpostcss-preset-enveslint-plugin-compatstylelint-no-unsupported-browser-featurespostcss-normalizeobsolete-webpack-pluginbrowserslist鍐欏叆瑙勫垯榛樿鍊硷細Browserslist鐨勯粯璁ゆ祻瑙堝櫒锛?0.5%锛屾渶鍚?涓増鏈紝FIrefoxESR锛屾湭姝伙級5%锛氶€氳繃鍏ㄧ悆浣跨敤缁熻閫夋嫨鐨勬祻瑙堝櫒鐗堟湰宸叉锛?4涓湀鍐呮湭寰楀埌瀹樻柟鏀寔鎴栨洿鏂扮殑娴忚鍣ㄣ€傜洰鍓岻E10銆両E_Mob11last2涓増鏈細鍚勬祻瑙堝櫒鐨勬渶鏂?涓増鏈拰涓€浜涗笉澶父鐢ㄧ殑閰嶇疆鍙互鍒板畼缃戞煡鐪嬨€傚涓潯浠朵箣闂寸殑鍏崇郴濡備笅鍥炬墍绀猴細浣跨敤鏂规硶鍦╬ackage涓坊鍔犮€俠rowserslist瀛楁鍦ㄦ牴鐩綍涓嬫坊鍔?browserslistrc鏂囦欢锛屽湪鏂囦欢涓啓閰嶇疆鍛戒护琛屼娇鐢╪pxbrowserslist">1%,last2versions,notdead"npxbrowserslist锛屽悗闈笉鍔犲弬鏁帮紝涔熷彲浠ヤ笉甯﹀弬鏁颁娇鐢紝浼氬埌褰撳墠鐩綍涓嬬殑.browserslistrc鏂囦欢涓煡鎵炬潯浠躲€備互涓婁笁绉嶄娇鐢ㄦ柟娉曪紝鍓嶄袱绉嶆槸鎴戜滑骞虫椂寮€鍙戜腑缁忓父浣跨敤鐨勬柟娉曘€傛瘮濡俛utoprefixer鍜宐abel浼氳嚜鍔ㄦ壘鍒皃ackage.json鎴栬€?browserslistrc鏂囦欢涓殑browserslist瀛楁锛岀劧鍚庤嚜鍔ㄤ娇鐢╟aniuse-lite宸ュ叿鏌ヨ绗﹀悎鏉′欢鐨勬祻瑙堝櫒锛岀劧鍚庡鐩爣娴忚鍣ㄨ繘琛岀壒鎬у吋瀹圭瓑澶勭悊銆俢aniuse-lite涓嶆槸涓€涓彂閫佽姹傚埌CanIuse...鏀寔HTML5銆丆SS3绛夎〃鏍硷紝鐒跺悗鑾峰彇鍚堟牸娴忚鍣ㄦ暟鎹殑宸ュ叿銆俢aniuse-lite鏈韩鏄竴涓皬鍨嬫暟鎹泦锛屼互绱у噾鐨勬牸寮忎繚瀛樻暟鎹殑閲嶈閮ㄥ垎銆傛墍浠ヤ笉绠℃槸autoprefixer杩樻槸babel锛屽彧闇€瑕佹牴鎹?browserslistrc鏂囦欢杩囨护鍑哄搴旂殑娴忚鍣ㄥ嵆鍙€侾ostCSSPostCSS鏄竴涓€氳繃JavaScript杩涜鏍峰紡杞崲鐨勫伐鍏凤紝鍙互甯姪鎴戜滑杩涜CSS鐨勮浆鎹㈠拰閫傞厤锛屾瘮濡傝嚜鍔ㄦ坊鍔犳祻瑙堝櫒鍓嶇紑銆丆SS鏍峰紡閲嶇疆绛夈€備絾鏄瀹炵幇浠ヤ笂鍔熻兘锛屽繀椤讳娇鐢ㄧ浉搴旂殑鎻掍欢鎵嶈兘鍦╳ebpack涓娇鐢≒ostcss锛岄渶瑕佸厛瀹夎postcss-loader鍜宲ostcss銆傞€氳繃postcss-loader浣跨敤postcss銆傚叿浣撶殑鍔熻兘闇€瑕佸畨瑁呭叿浣撶殑鎻掍欢銆備娇鐢ㄧ洿鎺ュ湪妯″潡涓啓閰嶇疆鐨勬柟娉昺odule.exports={module:{rules:[{test:/\.css$/,exclude:/node_modules/,use:[{loader:'style-loader',},{loader:'css-loader',options:{importLoaders:1,}},{loader:'postcss-loader',options:{postcssOptions:{plugins:[require('autoprefixer'),//娣诲姞娴忚鍣ㄥ墠缂€require('postcss-preset-env')//杩欎釜鎻掍欢鍙互浣跨敤涓€浜涙湭鏉ョ殑CSS鐗规€}}}]}]}}鍒涘缓postcss.config銆俲s鏂囦欢锛屾坊鍔犳枃浠朵腑浣跨敤鐨勫姞杞藉櫒銆傝繖涓柟娉曟瘮绗竴涓洿绠€娲乵odule.exports={plugins:[require('autoprefixer'),require('postcss-preset-env')]}importLoaders杩欎釜閫夐」鐢ㄦ潵澶勭悊涓€涓猚ss鏂囦欢锛岄€氳繃@import寮曞叆鍙︿竴涓狢SS鏂囦欢鐨勬柟娉?*index.css*/@import"./test.css/"/*test.css*/:fullscreen{}.content{user-select:none;}杩欓噷濡傛灉鏈坊鍔爄mportLoaders閫夐」锛屽皢涓嶄細澶勭悊test.css涓殑鏍峰紡銆傚師鍥犳槸鍖归厤css鏂囦欢鏃讹紝postcss-loader鍏堝鐞唅ndex.css鏂囦欢锛屽苟娌℃湁鎸夌収@import璇硶澶勭悊瀵煎叆鐨則est.css鏂囦欢銆傜劧鍚庝娇鐢╟ss-loader杩涜澶勭悊锛宑ss-loader鍙互鏍规嵁@import澶勭悊瀵煎叆鐨則est.css鏂囦欢锛屽鑷磘est.css涓殑鏂囦欢娌℃湁缁忚繃postcss澶勭悊銆傝В鍐宠繖涓棶棰橈紝鍙互鍦╟ss-loader鐨刼ptions涓坊鍔犱竴涓猧mportLoaders閫夐」{loader:'css-loader',options:{importLoaders:1//杩欎釜鏁板瓧浠ｈ〃鍓嶉潰鐨刲oader闇€瑕侀噸鏂板鐞唥}杩欐剰鍛崇潃褰撲娇鐢╟ss-loader鏃讹紝鐒跺悗浣跨敤css-鍦ㄥ姞杞界▼搴忓鐞嗕竴娆eferencebrowserslist/browserslist涔嬪墠鐨勫嚑涓姞杞藉櫒锛氿煢斿湪涓嶅悓鐨勫墠绔伐鍏蜂箣闂村叡浜洰鏍囨祻瑙堝櫒锛屽Autoprefixer銆丼tylelint鍜宐abel-preset-env(github.com)鈥滄垜鍙互浣跨敤鈥濅娇鐢ㄨ〃
