銆屼竴鍔虫案閫搞€嶇敱娴呭叆娣遍厤缃畐ebpack4

Posted 2021-03-30 鍓嶇鎶€鏈紭閫?/a>

鍓嶈█

webpack鍦ㄥ墠绔寲杩囩▼涓崄鍒嗛噸瑕侊紝鎵€浠ヨ姳浜嗕竴娈垫椂闂村涔爓ebpack锛屼互鍙妛ebpack4鏂扮壒鎬э紝鏈枃鏄寜鐓т粠鏄撳埌闅剧殑杩囩▼锛屾⒊鐞嗛儴鍒唚ebpack姒傚康锛屽父瑙佺殑loader锛宲lugins锛寃ebpack4鏂扮壒鏂帮紝杩樻湁閮ㄥ垎楂樼骇姒傚康銆?/p>

webpack闇€瑕佹帉鎻＄殑鏍稿績姒傚康馃憞

• Entry:webpack寮€濮嬫瀯寤虹殑鍏ュ彛妯″潡
• Output: 濡備綍鍛藉悕杈撳嚭鏂囦欢锛屼互鍙婅緭鍑虹洰褰曪紝姣斿甯歌鐨刣ist鐩綍銆?
• Loaders:浣滅敤鍦ㄤ簬瑙ｆ瀽鏂囦欢锛屽皢鏃犳硶澶勭悊鐨勯潪js鏂囦欢锛屽鐞嗘垚webpack鑳藉澶勭悊鐨勬ā鍧椼€?
• Plugins:鏇村鐨勬槸浼樺寲锛屾彁鍙栫簿鍗?鍏叡妯″潡鍘婚噸)锛屽帇缂╁鐞?css/js/html)绛夛紝瀵箇ebpack鍔熻兘鐨勬墿灞曘€?
• Chunk: 涓汉瑙夊緱杩欎釜鏄痺ebpack 4 鐨? Code Splitting 浜х墿锛屾姏寮冧簡webpack3鐨? CommonsChunkPlugin,瀹冩渶澶х殑鐗圭偣灏辨槸閰嶇疆绠€鍗曪紝褰撲綘璁剧疆  mode 鏄?nbsp; production锛岄偅涔?webpack 4 灏变細鑷姩寮€鍚?nbsp; Code Splitting锛屽彲浠ュ畬鎴愬皢鏌愪簺鍏叡妯″潡鍘婚噸锛屾墦鍖呮垚涓€涓崟鐙殑 chunk銆?

姝ゆ瀛︿範webpack4鏂扮壒鎬э紝鍩烘湰涓婃寜鐓у畼缃戞潵閰嶇疆鐨勩€?/p>

---

濡傛灉浣犺窡鎴戜竴鏍凤紝鍦ㄩ厤缃嚜宸辩殑webpack涓亣鍒伴棶棰橈紝鍙互鏉ヨ繖閲屾壘涓€鎵炬€濊矾锛?span class="mq-25">銆屽笇鏈涙湰鏂囧浣犳洿澶氱殑鏄姏鐮栧紩鐜夈€?/strong>锛屽浣犲涔爓ebpack4鏂扮壒鎬ф湁鎵€甯姪銆?/p>

Webpack鍩虹鐭ヨ瘑

浠€涔堟槸webpack

webpack鍏跺疄鎴戠悊瑙ｅ氨鏄?span class="mq-31">銆屾ā鍧楁墦鍖呭伐鍏枫€?/strong>锛屽皢澶氫釜妯″潡鎵撳寘鍒扮敓鎴愪竴涓渶缁堢殑bundle.js闂銆?/p>

鐩墠鏉ョ湅锛寃ebpack4.0宸茬粡鍙互鎵撳寘浠讳綍褰㈠紡鐨勬ā鍧椼€?/p>

濡備綍瀹夎Webpack

棣栧厛纭繚浣犳湁node鐜锛屽湪缁堢杩愯涓嬮潰鎸囦护

node -vnpm -v

鍑虹幇浜嗕袱涓増鏈彿鍚庯紝鎺ヤ笅鏉ュ氨鍙互缁х画瀛︿範webpack浜嗭紝npm鍖呯鐞嗗伐鍏锋槸蹇呴』鐨勩€?/p>

鍒濆鍖栭」鐩?/span>

npm init

杩欎釜鎰忔€濆氨鏄负浜嗕娇椤圭洰绗﹀悎瑙勮寖锛?span class="mq-46">銆屽垵濮嬪寲涓€涓」鐩€?/strong>锛岃繖鏍峰瓙浣块」鐩鍚堣鑼冦€?/p>

鎺ヤ笅鏉ュ氨鍙戠幇锛屽湪璇ユ牴鐩綍涓嬶紝浼?span class="mq-48">銆岀敓鎴愪竴涓猵ackage.json鏂囦欢銆?/strong>锛岃繖涓枃浠舵弿杩颁簡node椤圭洰锛宯ode鍖呯殑涓€浜涗俊鎭€備篃灏辨槸璇达紝銆宯pm init 鐢熸垚鐨勫氨鏄竴涓猵ackage.json鏂囦欢銆傘€?/strong>

銆宲ackage.json灞炴€ц鏄庛€?/strong>

 name - 鍖呭悕. version - 鍖呯殑鐗堟湰鍙枫€?/span> description - 鍖呯殑鎻忚堪銆?/span> homepage - 鍖呯殑瀹樼綉URL銆?/span> author - 鍖呯殑浣滆€咃紝瀹冪殑鍊兼槸浣犲湪https://npmjs.org缃戠珯鐨勬湁鏁堣处鎴峰悕锛岄伒寰€滆处鎴峰悕<閭欢>鈥濈殑瑙勫垯锛?渚嬪锛歾hangsan <[e-mail]>銆?/span> contributors - 鍖呯殑鍏朵粬璐＄尞鑰呫€?/span> dependencies / devDependencies - 鐢熶骇/寮€鍙戠幆澧冧緷璧栧寘鍒楄〃銆傚畠浠皢浼氳瀹夎鍦?node_module 鐩綍涓嬨€?/span> main - main 瀛楁鎸囧畾浜嗙▼搴忕殑涓诲叆鍙ｆ枃浠讹紝require('moduleName') 灏变細鍔犺浇杩欎釜鏂囦欢銆傝繖涓瓧娈电殑榛樿鍊兼槸妯″潡鏍圭洰褰曚笅闈㈢殑 index.js銆?/span> keywords - 鍏抽敭瀛?/span>

鎺ヤ笅鏉ュ氨鏄畨瑁厀ebpack

 npm install webpack webpack-cli -g // 鍏ㄥ眬瀹夎webpack

涓嶈繃寤鸿杩樻槸涓嶈杩欐牱瀛愬畨瑁咃紝褰撲綘鏈夊涓」鐩殑鏃跺€欙紝浣犲叾涓竴涓獁ebpack渚濊禆鐗堟湰鏄?.x鏈増锛屽綋鍓嶇増鏈槸4.0鐗堟湰鐨勮瘽锛岄偅涔堣繖涓」鐩槸杩愯涓嶈捣鏉ョ殑銆?/p>

閭ｄ箞鍏堝嵏杞藉叏灞€瀹夎鐨剋ebpack锛岀劧鍚庡湪褰撳墠浣犺杩愯鐨勯」鐩啀鍗曠嫭瀹夎銆?/p>

 npm uninstall webpack webpack-cli -g //鍗歌浇鍏ㄥ眬webpack

鎬庝箞鍏ㄥ眬瀹夎鍛煈?/p>

 npm install webpack webpack-cli -D // 灞€閮ㄥ畨瑁?/span>

瑕佹兂鏌ョ湅鐗堟湰鐨勮瘽锛?span class="mq-82">銆寃ebpack -v銆?/strong>杩欎釜鍛戒护姝ゆ椂涓嶈锛屽洜涓簄ode姝ゆ椂浼氬幓鍏ㄥ眬鏌ユ壘锛屽彂鐜版壘涓嶅埌webpack鍖咃紝鍥犱负鎴戜滑涔嬪墠宸茬粡鍗歌浇鍏ㄥ眬鐨剋ebpack锛屾墍浠ユ垜浠緱鐢ㄤ竴涓柊鍛戒护銆?/p>

npx webpack -v

杩欎釜鏃跺€欙紝灏卞彲浠ョ湅鍒板浜庣増鏈彿銆?/p>

濡備綍鏌ョ湅鍖呯殑鐗堟湰鍛?/p>

npm info webpack // 鏌ョ湅webpack鍖呯増鏈?/span>

webpack閰嶇疆鏂囦欢

webpack.config.js灏辨槸webpack鐨勯粯璁ら厤缃枃浠讹紝鎴戜滑鍙互鑷畾涔夐厤缃枃浠讹紝姣斿鏂囦欢鐨勫叆鍙ｏ紝鍑哄彛銆?/p>

const path = require('path')module.exports = { entry : './index.js', output : { filename : 'bundle.js', path : path.join(__dirname, 'dist') }}

杩欎釜灏辨槸鏈€鍩烘湰鐨勯厤缃紝鎵撳寘涓€涓猧ndex.js鏂囦欢锛屼篃灏辨槸entry锛宱utput鎵撳寘鐨勫叆鍙ｏ紝鍑哄彛閰嶇疆淇℃伅銆?/p>

閭ｄ箞杩欎釜鏃跺€欙紝鍦ㄥ懡浠よ涓繍琛?code class="mq-111">npx webpack锛屽氨浼氬幓鎵緒ebpack.config.js鏂囦欢涓殑閰嶇疆淇℃伅銆?/p>

銆岄粯璁ょ殑閰嶇疆鏂囦欢蹇呴』鏄痺ebpack.config.js杩欎釜鍚嶇О銆?/strong>锛屼絾鏄綘鑷繁鍐欎簡涓€涓獁ebpack閰嶇疆鏂囦欢淇℃伅锛岄偅琛屼笉琛屽憿锛熷綋鐒舵槸鍙互鐨勶紝閭ｄ綘寰楄繍琛屼互涓嬪懡浠ゐ煈?/p>

npx webpack --config webpack.config.js// --config 鍚庨潰灏辨槸浣犺嚜宸遍厤缃殑webpack鏂囦欢淇℃伅

npm scripts

銆宯pm scripts銆?/strong> 鏈夋椂鍊欙紝浣犵敤杩噕ue锛孯eact鐨勮瘽锛?缁忓父浣跨敤鐨勯兘鏄痭pm run dev鐨勫舰寮忥紝閭ｄ箞鎴戜滑鏄笉鏄篃鑳介厤缃繖鏍峰瓙鐨勪俊鎭憿锛熸垜浠彧闇€瑕佸湪package.json鏂囦欢涓厤缃畇cripts鍛戒护灏辫馃憞

"scripts": { "dev": "webpack --config webpack.config.js" },

杩欎釜鏃跺€欙紝浣犲湪杩愯npm run dev锛屽畠浼氳缈昏瘧鎴愬浜庣殑鎸囦护锛屼篃浼氭墦鍖呭搴旂殑鏂囦欢銆?/p>

銆寃ebpack鎵撳寘涓夌鍛戒护銆?/strong>

• webpack index.js (鍏ㄥ眬)
• npx webpack index.js
• npm run dev

webpack-cli

杩欎釜鏃跺€欙紝浣犱篃璁稿氨浼氬彂鐜拌繖涓獁ebpack-cli浣滅敤浜嗗惂锛屼笉涓嬭浇杩欎釜鍖呯殑璇濓紝浣犲湪鍛戒护琛岃繍琛寃ebpack鎸囦护鏄笉鐢熸晥鐨勶紝涔熷氨鏄锛?span class="mq-140">銆寃ebpack-cli浣滅敤灏辨槸鍙互鍦ㄥ懡浠よ杩愯webpack鍛戒护骞朵笖鐢熸晥銆傘€?/strong>

涓嶄笅杞界殑璇濓紝鍦ㄥ懡浠よ涓娇鐢╳ebpack鍛戒护鏄笉鍏佽鐨勩€?/p>

webpack閰嶇疆鐜

涓昏鍒嗕负銆宒evelopment銆?/strong>鍜?span class="mq-146">銆宲roduction銆?/strong>涓ょ鐜锛岄粯璁ゆ儏鍐典笅鏄痯roduction鐜锛?*涓よ€呯殑鍖哄埆灏辨槸锛屽悗鑰呬細瀵规墦鍖呭悗鐨勬枃浠跺帇缂┿€?*閭ｄ箞鎴戜滑鍘婚厤缃竴涓嬸煈?/p>

const path = require('path')module.exports = { mode : 'development', entry : './index.js', output : { filename : 'bundle.js', path : path.join(__dirname, 'bundle') }}

杩欎釜鏃跺€欙紝鍐嶅幓鐪嬬殑璇濓紝灏变細鍙戠幇锛?span class="mq-167">銆宐undle.js鏂囦欢娌℃湁鍘嬬缉浠ｇ爜銆?/strong>銆?/p>

---

webpack鏍稿績姒傚康loader

浠€涔堟槸loader

銆宭oader灏辨槸涓€涓墦鍖呯殑鏂规锛屽畠鐭ラ亾瀵逛簬鏌愪釜鐗瑰畾鐨勬枃浠惰濡備綍鍘绘墦鍖呫€傘€?/strong> 鏈韩webpack涓嶆竻妤氬浜庝竴浜涙枃浠跺浣曞鐞嗭紝loader鐭ラ亾鎬庝箞澶勭悊锛屾墍浠ebpack灏变細鍘绘眰鍔╀簬loader銆?/p>

webpack鏄粯璁ょ煡閬撳浣曟墦鍖卝s鏂囦欢鐨勶紝浣嗘槸瀵逛簬涓€浜涳紝姣斿鍥剧墖锛屽瓧浣撳浘鏍囩殑妯″潡锛寃ebpack灏变笉鐭ラ亾濡備綍鎵撳寘浜嗭紝閭ｄ箞鎴戜滑濡備綍璁﹚ebpack璇嗗埆鍥剧墖绛夊叾浠栨牸寮忕殑妯″潡鍛紵

閭ｄ箞灏卞幓閰嶇疆鏂囦欢webpack.config.js閰嶇疆鐩稿簲鐨勪俊鎭紝閰嶇疆module馃憞

const path = require('path')module.exports = { mode: 'production', entry: './src/index.js', module: { rules: [{ test: /.(png|jpg|gif)$/, use: { loader: 'file-loader' } }] }, output: { filename: 'bundle.js', path: path.join(__dirname, 'dist') }}

鎴戜滑闇€瑕乫ile-loader鐨勮瘽锛屼篃灏辨槸渚濊禆浜庡畠锛屾墍浠ュ厛涓嬭浇瀹?/p>

npm install file-loader -D

鐒跺悗鎴戜滑鐪嬬湅index.js鏄浣曞啓鐨勷煈?/p>

import acator from './澶村儚.jpg'console.log(acator)

閫氳繃杩欎釜鎴戜滑鍙戠幇锛屽湪鎺у埗鍙帮紝鎵撳嵃鐨勭粨鏋滄槸

3f16daf5233d30f46509b1bf2c4e08a5.jpg

璇存槑file-loader甯垜浠浘鐗囨ā鍧楁墦鍖呭埌浜哾ist鐩綍涓嬶紝骞朵笖index.js涓紝杩欎釜acator鍙橀噺锛岀粨鏋滄槸涓€涓悕绉帮紝杩欐牱瀛愮殑璇濓紝灏卞彲浠ュ畬鎴愭墦鍖咃紝鍚庣画闇€瑕佽鍥剧墖涔熻交鏉炬悶瀹氥€?/p>

銆屾€荤粨銆?/strong>

webpack鏃犳硶璇嗗埆闈瀓s缁撳熬鐨勬ā鍧楋紝鎵€浠ラ渶瑕乴oader璁﹚ebpack璇嗗埆鍑烘潵锛岃繖鏍峰瓙灏卞彲浠ュ畬鎴愭墦鍖呫€?/p>

• 閬囧埌闈瀓s缁撳熬鐨勬ā鍧楋紝webpack浼氬幓module涓壘鐩稿簲鐨勮鍒欙紝鍖归厤鍒颁簡瀵逛簬鐨勮鍒欙紝鐒跺悗鍘绘眰鍔╀簬瀵瑰簲鐨刲oader
• 瀵瑰簲鐨刲oader灏变細灏嗚妯″潡鎵撳寘鍒扮浉搴旂殑鐩綍涓嬶紝涓婇潰鐨勪緥瀛愬氨鏄痙ist鐩綍锛屽苟涓斿憿锛? 銆岃繑鍥炵殑鏄妯″潡鐨勮矾寰勩€?/strong>,鎷夸笂闈㈢殑渚嬪瓙鏉ヨ锛屽氨鏄? acator 鍙橀噺鐨勫€煎氨鏄矾寰勩€?

濡備綍閰嶇疆file-loader

褰撶劧灏辨槸鐪媤ebpack瀹樼綉浜嗭紝杩欓噷闈㈡枃妗ｅ緢璇︾粏锛岀偣杩欓噷

涓句釜渚嬪瓙锛屾瘮濡傦紝浣犳兂灏嗘枃浠舵墦鍖呭悕绉颁笉鏀瑰彉锛屽苟涓斿姞涓悗缂€鐨勮瘽锛屽彲浠ヨ繖涔堟潵閰嶇疆options馃憞

 { loader: 'file-loader', options: { // name灏辨槸鍘熷鍚嶇О,hash浣跨敤鐨勬槸MD5绠楁硶,ext灏辨槸鍚庣紑 name: '[name]_[hash].[ext]' } }

鎴戜滑寮曞叆鐓х墖鐨勬槸涓嬮潰馃憞

import acator from './澶村儚.jpg'

閭ｄ箞鏈€鍚庢墦鍖呭畬鐨勫悕绉版槸璇存槑鍛煈?/p>

澶村儚_3f16daf5233d30f46509b1bf2c4e08a5.jpg

鍦ㄤ妇涓緥瀛愶紝姣斿浣犳兂灏嗗浘鐗囪繖浜涙ā鍧楅兘鎵撳寘鍒癲ist鐩綍涓嬬殑images涓嬶紝鏄笉鏄篃鏄彲浠ラ厤缃笅

 { loader: 'file-loader', options: { name: '[name]_[hash].[ext]', outputPath: 'images/' } }

杩欐牱瀛愮殑璇濓紝灏变細鍦╠ist/images/ 鐩綍涓嬫壘鍒板搴旂殑鎵撳寘濂藉浘鐗囥€?/p>

姣斿涓嶅悓鐨勭幆澧冧笅锛屾墦鍖呯殑鍥剧墖浣嶇疆涔熷彲浠ヤ笉涓€鏍凤紝馃憞

if (env === 'development') { return '[path][name].[ext]'}

鍓╀笅鐨勫氨鍘诲畼缃戯紝鑷繁閰嶇疆鍚с€?/p>

濡備綍閰嶇疆url-loader

涓婇潰瀵逛簬鍥剧墖鐨勬ā鍧楁墦鍖咃紝鎴戜滑鍚屾牱鍙互鍘讳娇鐢╱rl-loader锛岄偅涔堝畠涓巉ile-loader鍖哄埆鏄粈涔堝憿锛?/p>

 { loader: 'url-loader', options: { name: '[name]_[hash].[ext]', outputPath: 'images/', limit : 102400 //100KB } }

鍞竴鐨勫尯鍒氨鍦ㄤ簬锛岃鎵撳寘鐨勫浘鐗囨槸鍚︿細鎵撳寘鍒癷mages鐩綍涓嬶紝杩樻槸浠ase64鏍煎紡鎵撳寘鍒癰undle.js鏂囦欢涓紝杩欎釜灏辩湅limit閰嶇疆椤逛簡銆?/p>

• 褰撲綘鎵撳寘鐨勫浘鐗囧ぇ灏忔瘮limit閰嶇疆鐨勫弬鏁板ぇ锛岄偅涔堣窡file-loader涓€鏍枫€?
• 褰撳浘鐗囪緝灏忔椂锛岄偅涔堝氨浼氫互Base64鎵撳寘鍒癰undle.js鏂囦欢涓€?

鏇村鐨剈rl-loader鐪嬪畼缃?/p>

濡備綍閰嶇疆css-loader

姣斿浣犲紩鍏ヤ簡涓€涓猚ss妯″潡锛岃繖涓椂鍊欙紝灏遍渶瑕佸幓涓嬭浇鐩稿簲鐨勬ā鍧條oader銆?/p>

cnpm install css-loader style-loader -D // 涓嬭浇瀵瑰簲鐨勬ā鍧?/span>

鐒跺悗灏辨槸閰嶇疆module馃憞

 { test: /.css$/, use: ['style-loader','css-loader'] }

杩欐牱瀛愮殑璇濓紝浣犲湪index.js 瀵煎叆鏍峰紡灏卞彲浠ョ敓鏁堝暒锛屾垜浠湅鐪嬫槸濡備綍瀵煎叆鐨勷煈?/p>

import acator from './澶村儚.jpg'import './index.css'const img = new Image()img.src = acatorimg.classList.add('imgtitle')document.body.appendChild(img)

杩欎釜imgtitle灏辨槸鏍峰紡锛屽涓嬸煈?/p>

.imgtitle{ width: 100px; height: 100px;}

閫氳繃涓や釜loader锛屽氨瀹炵幇浜唚ebpack鎵撳寘css鏂囦欢锛岄偅鎴戜滑鍒嗘瀽浠ヤ笅涓や釜loader鍔熻兘銆?/p>

• css-loader涓昏浣滅敤灏辨槸灏嗗涓猚ss鏂囦欢鏁村悎鍒颁竴璧凤紝褰㈡垚涓€涓猚ss鏂囦欢銆?
• style-loader浼氭妸鏁村悎鐨刢ss閮ㄥ垎鎸傝浇鍒癶ead鏍囩涓€?

閭ｄ箞濡傛灉浣犱娇鐢╯css棰勭紪璇慶ss鐨勮瘽锛寃ebpack鏄棤娉曟墦鍖呰鏂囦欢鐨勶紝鎵€浠ュ張闇€瑕佸畨瑁呮柊鐨刲oader馃憞

濡備綍閰嶇疆sass-loader

鎴戜滑鐪嬪畼缃憇css-loader闇€瑕佷笅杞藉摢浜涳紝鐐硅繖閲?/p>

npm install sass-loader node-sass --save-dev

涓婇潰鏄畨瑁卻ass-loader锛岄渶瑕佸悓鏃跺畨瑁卬ode-sass锛岀劧鍚庡氨鍘婚厤缃搴旂殑module

 { test: /.scss$/, use: ['style-loader','css-loader','sass-loader'] }

杩欐牱瀛愮殑璇濓紝浣犲儚涓嬮潰鍘诲鍏css鏍峰紡鏂囦欢锛屾槸鍙互鎵撳寘瀹屾垚鐨勷煈?/p>

// index.js import acator from './澶村儚.jpg'// console.log(acator)import './index.scss' // 瀵煎叆scss鏂囦欢
const img = new Image()img.src = acatorimg.classList.add('imgtitle')document.body.appendChild(img)

妯″潡鐨勫姞杞藉氨鏄粠鍙冲儚宸︽潵鐨勶紝鎵€浠ュ厛鍔犺浇sass-loader缈昏瘧鎴恈ss鏂囦欢锛岀劧鍚庝娇鐢╟ss-loader鎵撳寘鎴愪竴涓猚ss鏂囦欢锛屽湪閫氳繃style-loader鎸傝浇鍒伴〉闈笂鍘汇€?/p>

鎺ヤ笅鏉ュ張鏈夋柊鐨勯棶棰樹簡锛屽鏋滃湪scss鏂囦欢涓娇鐢╟ss3鏂扮壒鏂扮殑璇濓紝鏄笉鏄渶瑕佸姞涓婂巶鍟嗗墠缂€鍛紵杩欎釜鏃跺€欙紝鎴戜滑闇€瑕佹€庝箞鍘诲憿锛熷簲璇ュ姞涓婁竴涓粈涔坙oader鍛紵鐪嬩笅闈?/p>

濡備綍閰嶇疆postcss-loader

杩欎釜loader瑙ｅ喅鐨勫氨鏄姞涓婂巶鍟嗗墠缂€锛屾垜浠湅webpack瀹樼綉鏄€庝箞鍋氱殑馃憠鐐硅繖閲?/p>

npm i -D postcss-loader autoprefixer

鐒跺悗鍛紝杩橀渶瑕佸缓涓€涓?span class="mq-402">銆宲ostcss.config.js銆?/strong>锛岃繖涓厤缃枃浠?銆屼綅缃窡webpack.config.js涓€涓綅缃€?/strong>)閰嶇疆濡備笅淇℃伅馃憞

// postcss.config.js// 闇€瑕侀厤缃繖涓彃浠朵俊鎭?/span>module.exports = { plugins: [ require('autoprefixer')({ overrideBrowserslist: [ "android 4.1", "ios 7.1", "Chrome > 31", "ff > 31", "ie >= 8" ] }) ]};

涓€寮€濮嬫垜璁剧疆鐨勮瘽锛屾槸涓嶇敓鏁堢殑锛屽師鍥犲氨鏄?span class="mq-436">銆屾病鏈夎缃敮鎸佺殑娴忚鍣ㄣ€?/strong>锛岀劧鍚庣湅鐪嬩笅闈煈?/p>

 { test: /.scss$/, use: ['style-loader','css-loader','sass-loader','postcss-loader'] }

鏈€鍚庡氨鍙互鐪嬭姣斿css3浼氬姞涓婂巶鍟嗗墠缂€浜嗮煈?/p>

-webkit-transform: translate(100px, 100px);-ms-transform: translate(100px, 100px);transform: translate(100px, 100px);

涓€浜涘叾浠栭棶棰橈紝鏈夋椂鍊欙紝浣犱細閬囧埌杩欐牱瀛愮殑涓€涓棶棰橈紝浣犱笉鍦ㄦ煇涓猻css鏂囦欢涓張瀵煎叆鏂扮殑scss鏂囦欢锛岃繖涓椂鍊欙紝鎵撳寘鐨勮瘽锛屽畠灏变笉浼氬府浣犻噸鏂板畨瑁卲ostcss-loader寮€濮嬫墦鍖咃紝杩欎釜鏃跺€欙紝鎴戜滑搴旇濡備綍鍘昏缃憿锛屾垜浠厛鏉ョ湅渚嬪瓙馃憞

// index.scss@import './creare.scss';body { .imgtitle { width: 100px; height: 100px; transform: translate(100px, 100px); }}

• 鎴戜滑鐭ラ亾锛屾垜浠厤缃殑loader瑙勫垯涓紝鏄鍚堣繖鏍峰瓙鐨勯鏈?
• 褰搄s浠ｇ爜涓紩鍏css妯″潡鐨勮瘽锛屼細鎸夌収杩欐牱瀛愮殑瑙勫垯鍘诲仛
• 閭ｄ箞濡備綍鍦╯css鏂囦欢涓紩鍏css鏂囦欢锛岄偅涔堣鍒欒偗瀹氫笉浼氫粠postcss-loader寮€濮嬫墦鍖咃紝鎵€浠ユ垜浠渶瑕侀厤缃竴浜涗俊鎭€?

 { test: /.scss$/, use: ['style-loader', { loader: 'css-loader', options:{ importLoaders:2, modules : true } }, 'sass-loader', 'postcss-loader' ] }

鎴戜滑闇€瑕佸湪css-loader涓厤缃畂ptions锛屽姞鍏?span class="mq-508">銆宨mportLoaders :2銆?/strong>锛?杩欐牱瀛愬氨浼氳蛋postcss-loader锛屽拰sass-loader锛岃繖鏍峰瓙鐨勮娉曪紝銆屾棤璁轰綘鏄湪js涓紩鍏css鏂囦欢锛岃繕鏄湪scss涓紩鍏css鏂囦欢锛岄兘浼氶噸鏂颁緷娆′粠涓嬪線涓婃墽琛屾墍浠oader銆傘€?/strong>

閭ｄ箞modules:true杩欎釜閰嶇疆鏄粈涔堜綔鐢ㄥ憿锛熸湁鏃跺€欙紝浣犲笇鏈涗綘鐨刢ss鏍峰紡浣滅敤鐨勬槸褰撳墠鐨勬ā鍧椾腑锛岃€屼笉鏄叏灞€鐨勮瘽锛屽氨闇€瑕佸姞涓婅繖涓厤缃簡锛岀湅涓嬫渚嬸煈?/p>

// index.jsimport acator from './澶村儚.jpg'import create from './create'
import style from './index.scss' // 閫氳繃modules:true 閬垮厤浜哻ss浣滅敤鍩焎reate涓殑妯″潡const img = new Image()img.src = acatorimg.classList.add(style.imgtitle)document.body.appendChild(img)create()

閭ｄ箞create妯″潡鏄粈涔堝憿馃憞

import acator from './澶村儚.jpg'import style from './index.scss'function create() { const img = new Image() img.src = acator img.classList.add(style.imgtitle) document.body.appendChild(img)}
export default create;

鍙互鐪嬪嚭鏉ワ紝杩欎釜create妯″潡锛屽氨鏄垱寤轰竴涓猧mg鏍囩锛屽苟涓旇缃崟鐙殑鏍峰紡銆傜粰modules : true鍚庯紝鎴戜滑闇€瑕佹帴鐫€寰€涓嬪仛鐨勫氨鏄痠mport璇硶涓婃湁浜涙敼鍙樸€?/p>

import style from './index.scss'

鐒跺悗閫氳繃style杩欎釜瀵硅薄鍙橀噺涓幓鎵撅紝鎵惧埌scss涓缃殑鍚嶇О鍗冲彲銆?/p>

銆屾€荤粨銆?/strong>

• importLoaders:2璇ラ厤缃俊鎭В鍐崇殑灏辨槸鍦╯css鏂囦欢涓張寮曞叆scss鏂囦欢锛屼細閲嶆柊浠巔ostcss-loader寮€濮嬫墦鍖?
• modules:true浼氫綔鐢ㄥ煙褰撳墠鐨刢ss鐜涓紝鏍峰紡涓嶄細鍏ㄥ眬寮曞叆锛岃娉曚笂涔熼渶瑕佷娇鐢ㄥ涓嬪紩鍏?
• import style from './index.scss'

姣斿瀛椾綋鍥炬爣鎬庝箞閰嶇疆淇℃伅鍛紵瀵逛簬瀛椾綋鍥炬爣澶ф墦鍖咃紝鍙互浣跨敤file-loader瀹屾垚馃憞

 { test: /.(woff|woff2|eot|ttf|otf)$/, use: [ 'file-loader' ] }

鏇村鐨勯潤鎬佽祫婧愮殑鎵撳寘閰嶇疆锛屽彲浠ョ湅瀹樼綉鏄浣曚娇鐢ㄧ殑锛岎煈夛紙闈欐€乴oader绠＄悊璧勬簮锛?/p>

---

webpack鏍稿績姒傚康plugins

濡備綍浣跨敤plugins璁╂墦鍖呮洿鍔犱究鎹峰憿锛宲lugins鎰忔€濆氨鏄彃浠舵剰鎬濓紝寰堝ぇ绋嬪害涓婃柟渚夸簡鎴戜滑锛岄偅鎴戜滑鏉ョ湅鐪嬪惂銆?/p>

plugins: 銆屽彲浠ュ湪webpack杩愯鍒版煇涓椂鍒荤殑鏃跺€?甯綘鍋氫竴浜涗簨鎯?銆?/strong>

濡備綍浣跨敤HtmlWebpackPlugin

銆岃繖涓彃浠剁殑浣滅敤锛屽氨鏄负浣犵敓鎴愪竴涓狧TML鏂囦欢锛岀劧鍚庡皢鎵撳寘濂界殑js鏂囦欢鑷姩寮曞叆鍒拌繖涓猦tml鏂囦欢涓€傘€?/strong>

濡備綍閰嶇疆鍛紵鍙互鐪媤ebpack瀹樼綉

棣栧厛绗竴姝ヤ笅杞紿tmlWebpackPlugin

cnpm install --save-dev html-webpack-plugin

鐒跺悗鍦╳ebpack.config.js涓厤缃涓嬩俊鎭煈?/p>

var HtmlWebpackPlugin = require('html-webpack-plugin');var path = require('path');
var webpackConfig = { entry: 'index.js', output: { path: path.resolve(__dirname, './dist'), filename: 'index_bundle.js' }, plugins: [new HtmlWebpackPlugin({ template: 'src/index.html' // 浠rc/鐩綍涓嬬殑index.html涓烘ā鏉挎墦鍖?/span> } )],};

鐒跺悗杩愯npm run dev锛屽氨浼氬彂鐜板湪dist鐩綍涓嬶紝鑷姩甯綘鐢熸垚涓€涓狧TML妯″潡锛屽苟涓斿紩鍏undle.js鏂囦欢銆?/p>

template: 'src/index.html' 杩欎釜閰嶇疆淇℃伅鐨勪綔鐢ㄥ氨鏄憡璇変綘锛屼互鍏蜂綋鍝釜index.html涓烘ā鏉垮幓鎵撳寘

濡備綍浣跨敤CleanWebpackPlugin

杩欎釜鎻掍欢鐨勪綔鐢ㄥ氨鏄細甯綘鍒犻櫎鏌愪釜鐩綍鐨勬枃浠?鏄湪鎵撳寘鍓嶅垹闄ゆ墍鏈変笂涓€娆℃墦鍖呭ソ鐨勬枃浠躲€?/p>

cnpm i clean-webpack-plugin -D//"clean-webpack-plugin": "^3.0.0",鎴戠殑鏄繖涓増鏈?/span>

鐒跺悗閰嶇疆clean-webpack-plugin鐨勮瘽,闇€瑕佸幓瀵逛簬缃戠珯涓婃煡鐪嬪浣曢厤缃殑,鍙互鐐硅繖閲岎煈?npm涓?/p>

閰嶇疆淇℃伅濡備笅馃憞,杩欎釜鏄渶鏂扮殑clean-webpack-plugin閰嶇疆

const {CleanWebpackPlugin} = require('clean-webpack-plugin');
// plugins鏂板鍔犺繖涓€椤癸紝webpack4鐗堟湰涓嶉渶瑕侀厤缃矾寰?/span>plugins: [ new CleanWebpackPlugin()]

鏈€鏂扮殑webpack4鐗堟湰鏄笉闇€瑕佸幓閰嶇疆璺緞鐨勶紝鑷姩甯垜浠竻闄ゆ墦鍖呭ソ鐨刣ist鐩綍涓嬫枃浠躲€?/p>

---

webpack鏍稿績姒傚康

entry鍜宱utput鍩烘湰閰嶇疆

鏈夋椂鍊?浣犻渶瑕佸涓叆鍙ｆ枃浠?閭ｄ箞鎴戜滑鍙堟槸鎬庝箞鍘诲畬鎴愮殑鍛?杩欎釜鏃跺€?灏遍渶瑕佹潵鐪嬩竴鐪媏ntry鍜宱utput閰嶇疆椤?/p>

褰撶劧浜?webpack瀹樼綉涔熸槸鏈夋枃妗ｇ殑,out鐐硅繖閲屼互鍙奺ntry鐐硅繖閲?/p>

entry: { index :'./src/index.js', bundle : './src/create.js', },output: { filename: '[name].js', publicPath: "https://cdn.example.com/assets/", path: path.join(__dirname, 'dist') }

銆屾€荤粨銆?/strong>

• entry杩欐牱瀛愰厤缃氨鍙互鎺ュ彈澶氫釜鎵撳寘鐨勬枃浠跺叆鍙?鍚屾椂鐨勮瘽,output杈撳嚭鏂囦欢鐨刦ilename闇€瑕佷娇鐢ㄥ崰浣嶇name
• 杩欐牱瀛愬氨浼氱敓鎴愪袱涓枃浠?涓嶄細鎶ラ敊,瀵逛簬鐨勫悕瀛楀氨鏄痚ntry鍚嶇О瀵瑰簲
• 濡傛灉鍚庡彴宸茬粡灏嗚祫婧愭寕杞藉埌浜哻dn涓?閭ｄ箞浣犵殑publicPath灏变細鎶婅矾寰勫墠鍋氫慨鏀瑰姞涓妏ublicPath鍊?

濡備綍浣跨敤devtool閰嶇疆source-map

devtool閰嶇疆source-map,瑙ｅ喅鐨勯棶棰樺氨鏄?褰撲綘浠ｇ爜鍑虹幇闂鏃?浼氭槧灏勫埌浣犵殑鍘熸枃浠剁洰褰曚笅鐨勯敊璇?骞堕潪鏄墦鍖呭ソ鐨勯敊璇?杩欑偣涔熷緢鏄剧劧,濡傛灉涓嶈缃殑璇?鍙細鏄剧ず鎵撳寘鍚巄undle.js鏂囦欢涓姤閿?瀵瑰簲鏌ユ壘閿欒鑰岃█,鏄緢涓嶅埄鐨?/p>

devtool:'inline-cheap-source-map'

瀵瑰簲涓嶅悓鐨勭幆澧?璁剧疆devtool鏄緢鏈夊繀瑕佺殑,寮€鍙戠幆澧冧腑,鎴戜滑闇€瑕佺湅鎴戜滑浠ｇ爜鏄摢閲屾姤閿欒,鎵€浠ラ渶瑕侀厤缃?/p>

webpack瀹樼綉鏈夋枃妗ｄ粙缁?/p>

閭ｆ垜浠粰鍑虹粨璁吼煈?/p>

• development鐜涓?閰嶇疆  devtool:'cheap-module-eval-source-map'
• production鐜涓?閰嶇疆  devtool:'cheap-module-source-map'

// development devtool:'cheap-module-eval-source-map'// production devtool:'cheap-module-source-map'

濡備綍浣跨敤webpack-dev-server

webpack-dev-server 鑳藉鐢ㄤ簬蹇€熷紑鍙戝簲鐢ㄧ▼搴忋€傚緢澶氱殑閰嶇疆閮藉湪webpack瀹樼綉鏈?鐐瑰嚮杩欓噷

棣栧厛鍏堜笅杞藉畠

cnpm i clean-webpack-plugin -D

瀹冪殑浣滅敤寰堝,鍙互寮€鍚竴涓湇鍔″櫒,鑰屼笖鍙互瀹炴椂鍘荤洃鍚墦鍖呮枃浠舵槸鍚︽敼鍙?鏀瑰彉鐨勮瘽,灏变細鍑虹幇鍘绘洿鏂?

devServer: { contentBase: path.join(__dirname, "dist"), // dist鐩綍寮€鍚湇鍔″櫒 compress: true, // 鏄惁浣跨敤gzip鍘嬬缉 port: 9000, // 绔彛鍙?/span> open : true // 鑷姩鎵撳紑缃戦〉 },

寰堝鐨勯厤缃」,鍙互鍘诲畼鏂规枃妗ｆ煡鐪?姣斿proxy浠ｇ悊绛夐厤缃」,鏇村鏂囨。鐐瑰嚮杩欓噷

鐒跺悗鍦╬ackage.json涓璼cripts閰嶇疆椤瑰涓?/p>

"start": "webpack-dev-server"

銆岃繖涓猟evServer鍙互瀹炴椂妫€娴嬫枃浠舵槸鍚﹀彂鐢熷彉鍖栥€?/strong>

鍚屾椂浣犻渶瑕佹敞鎰忕殑鍐呭灏辨槸浣跨敤webpack-dev-server鎵撳寘鐨勮瘽,涓嶄細鐢熸垚dist鐩綍,鑰屾槸灏?span class="mq-728">銆屼綘鐨勬枃浠舵墦鍖呭埌鍐呭瓨涓€?/strong>

銆屾€荤粨銆?/strong>

• devServer鍙互寮€鍚竴涓湰鍦版湇鍔″櫒,鍚屾椂甯垜浠洿鏂板姞杞芥渶鏂拌祫婧?
• 鎵撳寘鐨勬枃浠朵細鏀惧湪鍐呭瓨涓?涓嶄細鐢熸垚dist鐩綍

妯″潡鐑浛鎹?hot module replacement)

妯″潡鐑浛鎹?HMR - Hot Module Replacement)鍔熻兘浼氬湪搴旂敤绋嬪簭杩愯杩囩▼涓浛鎹€佹坊鍔犳垨鍒犻櫎妯″潡锛岃€屾棤闇€閲嶆柊鍔犺浇鏁翠釜椤甸潰銆?/p>

椤惧悕鎬濅箟瀹冭鐨勫氨鏄?澶氫釜妯″潡涔嬪墠,褰撲綘淇敼涓€涓ā鍧?鑰屼笉鎯抽噸鏂板姞杞芥暣涓〉闈㈡椂,灏卞彲浠ヤ娇鐢?code class="mq-738">hot module replacement

涓句釜渚嬪瓙,褰撲綘淇敼浜哻ss浠ｇ爜涓竴浜涙牱寮?涓嶉厤缃瓾MR妯″潡鐑浛鎹㈢殑璇?鏁翠釜椤甸潰閮戒細閲嶆柊鍘绘覆鏌?杩欐牱瀛愭槸娌℃湁蹇呰鐨?閭ｄ箞鎴戜滑鎺ヤ笅鏉ュ氨鍘婚厤缃煈?/p>

devServer: { contentBase: path.join(__dirname, "dist"), compress: true, port: 9000, open: true, hot: true, // 寮€鍚儹鏇存柊 // hotOnly: true, },

杩欎釜hotOnly鍙互璁剧疆,鏈€涓昏鐨勬槸璁剧疆hot:true

鐒跺悗鍔犲叆涓や釜鎻掍欢,杩欎釜鎻掍欢鏃秝ebpack鑷甫鐨?鎵€浠ヤ笉闇€瑕佷笅杞金煈?/p>

const webpack = require('webpack')plugins: [ new webpack.NamedModulesPlugin(), // 鍙厤缃篃鍙笉閰嶇疆 new webpack.HotModuleReplacementPlugin() // 杩欎釜鏄繀椤婚厤缃殑鎻掍欢 ],

娣诲姞浜?nbsp;NamedModulesPlugin锛屼互渚挎洿瀹规槗鏌ョ湅瑕佷慨琛?patch)鐨勪緷璧栥€?/p>

閰嶇疆瀹屼笂杩扮殑淇℃伅涔嬪悗,閲嶆柊鍘昏繍琛屽懡浠ょ殑璇?灏变細鍙戠幇鍚姩浜?code class="mq-774">妯″潡鐑浛鎹?/code>,涓嶅悓妯″潡鐨勬枃浠舵洿鏂?鍙細涓嬭浇褰撳墠妯″潡鏂囦欢

鍞竴闇€瑕佹敞鎰忕殑鍐呭鏄?瀵逛簬css鐨勫唴瀹逛慨鏀?css-loader搴曞眰浼氬府鎴戜滑鍋氬ソ瀹炴椂鐑洿鏂?瀵逛簬JS妯″潡鐨勮瘽,鎴戜滑闇€瑕佹墜鍔ㄧ殑鍘婚厤缃煈?/p>

if(module.hot){ module.hot.accept('./print',()=>{ print() })}

杩欎釜瀹樻柟涔熺粰鍑轰簡璇硶,module.hot.accept(module1,callback) 琛ㄧず鐨勫氨鏄帴鍙椾竴涓渶瑕佸疄鏃剁儹鏇存柊鐨勬ā鍧?褰撳唴瀹瑰彂鐢熷彉鍖栨椂,浼氬府浣犳娴嬪埌,鐒跺悗鎵ц鍥炶皟鍑芥暟

銆屾€荤粨銆?/strong>

• HMR妯″潡鐑浛鎹㈣В鍐崇殑闂灏辨槸,瀹冨厑璁稿湪杩愯鏃舵洿鏂板悇绉嶆ā鍧楋紝鑰屾棤闇€杩涜瀹屽叏鍒锋柊銆?
• 鎰忔€濆氨鏄笉闇€瑕侀噸鏂板幓鏈湴鏈嶅姟鍣ㄩ噸鏂板幓鍔犺浇鍏朵粬涓轰慨鏀圭殑璧勬簮
• 闇€瑕佹敞鎰忕殑灏辨槸,瀵逛簬js鏂囦欢鐨勭儹鏇存柊鐨勮瘽,闇€瑕佹墜鍔ㄧ殑鍘绘娴嬫洿鏂板唴瀹?涔熷氨鏄痬odule.hot.accept璇硶

鏇村鐨勯厤缃俊鎭幓webpack瀹樼綉鏌ョ湅,鐐硅繖閲屾煡鐪婬MR

Babel澶勭悊ES6璇硶

鎺ヤ笅鏉ユ垜浠氨鏉ラ厤缃畠馃憞

npm install --save-dev babel-loader @babel/core// @babel/core 鏄痓abel涓殑涓€涓牳蹇冨簱
npm install --save-dev @babel/preset-env// preset-env 杩欎釜妯″潡灏辨槸灏嗚娉曠炕璇戞垚es5璇硶,杩欎釜妯″潡鍖呮嫭浜嗘墍鏈夌炕璇戞垚es5璇硶瑙勫垯
npm install --save @babel/polyfill// 灏哖romise,map绛変綆鐗堟湰涓病鏈夊疄鐜扮殑璇硶,鐢╬olyfill鏉ュ疄鐜?

閰嶇疆module馃憞

module: { rules: [ { test: /.js$/, exclude: /node_modules/, loader: "babel-loader", options: { "presets": [ [ "@babel/preset-env", { "useBuiltIns": "usage" } ] ] } } ]}// exclude鍙傛暟: node_modules鐩綍涓嬬殑js鏂囦欢涓嶉渶瑕佸仛杞琫s5璇硶,涔熷氨鏄帓闄や竴浜涚洰褰?/span>// "useBuiltIns"鍙傛暟:

• 鏈変簡 preset-env杩欎釜妯″潡鍚?鎴戜滑灏变細鍙戠幇鎴戜滑鍐欑殑 銆宑onst璇硶琚炕璇戞垚鎴恦ar銆?/strong>
• 浣嗘槸缁嗗績鐨勪細鍙戠幇,瀵逛簬Promise浠ュ強map杩欎簺璇硶,浣庣増鏈祻瑙堝櫒鏄笉鏀寔鐨?
• 鎵€浠ユ垜浠渶瑕? @babel/polyfill妯″潡,瀵筆romise,map杩涜琛ュ厖,瀹屾垚璇ュ姛鑳?涔熷氨鏄墠闈㈣鐨? polyfill

鐒跺悗鎴戜滑鎬庝箞浣跨敤鍛?灏辨槸鍦╦s鏂囦欢鏈€寮€濮嬪鍏ヰ煈?/p>

import "@babel/polyfill";

浣嗘槸缁嗗績鐨勫悓瀛?浼氬彂鐜伴棶棰?鐢ㄥ畬杩欎釜浠ュ悗,鎵撳寘鐨勬枃浠朵綋绉灛闂村鍔犱簡10澶氬€嶄箣澶?杩欐槸涓轰粈涔堝憿?

杩欐槸鍥犱负,@babel/polyfill涓轰簡寮ヨˉPromise,map绛夎娉曠殑鍔熻兘,璇ユā鍧楀氨闇€瑕?span class="mq-873">銆岃嚜宸卞幓瀹炵幇Promise,map绛夎娉曘€?/strong>鐨勫姛鑳?杩欎篃灏辨槸涓轰粈涔堟墦鍖呭悗鐨勬枃浠跺緢澶х殑鍘熷洜.

閭ｆ垜浠渶瑕佸@babel/polyfill鍙傛暟鍋氫竴浜涢厤缃嵆鍙?濡備笅馃憞

"useBuiltIns": "usage"

杩欎釜璇硶浣滅敤灏辨槸: 鍙細瀵规垜浠琲ndex.js褰撳墠瑕佹墦鍖呯殑鏂囦欢涓娇鐢ㄨ繃鐨勮娉?姣斿Promise,map鍋歱olyfill,鍏朵粬es6鏈嚭鐜扮殑璇硶,鎴戜滑鏆傛椂涓嶅幓鍋歱olyfill,杩欐牱瀛?鎵撳寘鍚庣殑鏂囦欢灏卞噺灏戜綋绉簡

銆屾€荤粨銆?/strong>

• 闇€瑕佹寜鐓abel-loader @babel/core杩欎簺搴?@babel/core鏄畠鐨勬牳蹇冨簱
• @babel/preset-env 瀹冨寘鍚簡es6缈昏瘧鎴恊s5鐨勮娉曡鍒?
• @babel/polyfill 瑙ｅ喅浜嗕綆鐗堟湰娴忚鍣ㄦ棤娉曞疄鐜扮殑涓€浜沞s6璇硶,浣跨敤polyfill鑷繁鏉ュ疄鐜?
• 閫氳繃 import "@babel/polyfill"; 鍦╦s鏂囦欢寮€澶村紩鍏?瀹屾垚瀵筫s6璇硶鐨刾olyfill
• 浠ヤ笂鐨勫満鏅兘鏄В鍐崇殑闂鏄笟鍔′腑閬囧埌babel鐨勯棶棰?

鏇村鐨勯厤缃湅瀹樻柟鏂囨。,鐐硅繖閲?/p>

褰撲綘鐢熸垚绗笁鏂规ā鍧楁椂,鎴栬€呮槸鐢熸垚UI缁勪欢搴撴椂,浣跨敤polyfill瑙ｅ喅闂,灏变細鍑虹幇闂浜?涓婇潰鐨勫満鏅娇鐢╞abel浼氭薄鏌撶幆澧?杩欎釜鏃跺€?鎴戜滑闇€瑕佹崲涓€绉嶆柟妗堟潵瑙ｅ喅馃憞

銆孈babel/plugin-transform-runtime銆?/strong>杩欎釜搴撳氨鑳借В鍐虫垜浠殑闂,閭ｆ垜浠厛瀹夎闇€瑕佺殑搴?/p>

npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime

鎴戜滑杩欎釜鏃跺€欏彲浠ュ湪鏍圭洰褰曚笅寤轰竴涓?code class="mq-900">.babelrc鏂囦欢,灏嗗師鏈鍦╫ptions涓殑閰嶇疆淇℃伅鍐欏湪.babelrc鏂囦欢馃憞

{  "plugins": [ [ "@babel/plugin-transform-runtime", { "corejs": 2, "helpers": true, "regenerator": true, "useESModules": false } ] ] }

// 褰撲綘鐨?"corejs": 2,闇€瑕佸畨瑁呬笅闈㈣繖涓?/span>npm install --save @babel/runtime-corejs2

杩欐牱瀛愮殑璇?鍦ㄤ娇鐢ㄨ娉曟槸,灏变笉闇€瑕佸幓閫氳繃import "@babel/polyfill";杩欐牱瀛愮殑璇硶鍘诲畬鎴愪簡,鐩存帴姝ｅ父鍐欏氨琛屼簡,鑰屼笖浠庢墦鍖呯殑浣撶Н鏉ョ湅,鍏跺疄鍙互鎺ュ彈鐨?/p>

銆屾€荤粨銆?/strong>

• 浠庝笟鍔″満鏅潵鐪?鍙互浣跨敤 @babel/preset-env
• 浠庤嚜宸辩敓鎴愮涓夋柟搴撴垨鑰呮椂UI鏃?浣跨敤 @babel/plugin-transform-runtime,瀹冧綔鐢ㄦ槸灏?helper 鍜?polyfill 閮芥敼涓轰粠涓€涓粺涓€鐨勫湴鏂瑰紩鍏ワ紝骞朵笖寮曞叆鐨勫璞″拰鍏ㄥ眬鍙橀噺鏄畬鍏ㄩ殧绂荤殑,閬垮厤浜嗗叏灞€鐨勬薄鏌?

---

webpack楂樼骇姒傚康

濡備綍浣跨敤tree shaking

tree鏍戯紝shaking鎽囧姩锛岄偅涔堜綘鍙互鎶婄▼搴忔兂鎴愪竴棰楁爲銆傜豢鑹茶〃绀哄疄闄呯敤鍒扮殑婧愮爜鍜?library锛屾槸鏍戜笂娲荤殑鏍戝彾銆傜伆鑹茶〃绀烘棤鐢ㄧ殑浠ｇ爜锛屾槸绉嬪ぉ鏍戜笂鏋悗鐨勬爲鍙躲€備负浜嗛櫎鍘绘鍘荤殑鏍戝彾锛屼綘蹇呴』鎽囧姩杩欐５鏍戯紝浣垮畠浠惤涓嬨€?/p>

閫氫織鎰忎箟鑰岃█锛屽綋浣犲紩鍏ヤ竴涓ā鍧楁椂锛屼綘鍙兘鐢ㄥ埌鐨勫彧鏄叾涓殑鏌愪簺鍔熻兘锛岃繖涓椂鍊欙紝鎴戜滑涓嶅笇鏈涜繖浜?code class="mq-952">鏃犵敤鐨勪唬鐮佹墦鍖呭埌椤圭洰涓幓銆傞€氳繃tree-shaking锛屽氨鑳藉皢娌℃湁浣跨敤鐨勬ā鍧楁憞鎺夛紝杩欐牱杈惧埌浜嗗垹闄ゆ棤鐢ㄤ唬鐮佺殑鐩殑銆?/p>

闇€瑕佹敞鎰忕殑鏃秝ebpack4榛樿鐨刾roduction涓嬫槸浼氳繘琛宼ree-shaking鐨勶紝

optimization.usedExports

浣縲ebpack纭畾姣忎釜妯″潡瀵煎嚭椤癸紙exports锛夌殑浣跨敤鎯呭喌銆備緷璧栦簬optimization.providedExports鐨勯厤缃€?code class="mq-958">optimization.usedExports鏀堕泦鍒扮殑淇℃伅浼氳鍏朵粬浼樺寲椤规垨浜у嚭浠ｇ爜浣跨敤鍒帮紙妯″潡鏈敤鍒扮殑瀵煎嚭椤逛笉浼氳瀵煎嚭锛屽湪璇硶瀹屽叏鍏煎鐨勬儏鍐典笅浼氭妸瀵煎嚭鍚嶇О娣锋穯涓哄崟涓猚har锛夈€備负浜嗘渶灏忓寲浠ｇ爜浣撶Н锛屾湭鐢ㄥ埌鐨勭殑瀵煎嚭椤圭洰锛坋xports锛変細琚垹闄ゃ€傜敓浜х幆澧?production)榛樿寮€鍚€?/p>

module.exports = { //... optimization: { usedExports: true }};

杩欎釜鏃跺€欙紝鍐嶅幓鐪嬬湅鑷繁鐨勬墦鍖卋undle.js鏂囦欢锛屽氨浼氬彂鐜帮紝瀹冧細鏈夌浉搴旂殑鎻愬崌鍔熻兘銆?/p>

銆屽皢鏂囦欢鏍囪涓烘棤鍓綔鐢?side-effect-free)銆?/strong>

鏈夋椂鍊欙紝褰撴垜浠殑妯″潡涓嶆槸杈惧埌寰堢函绮癸紝杩欎釜鏃跺€欙紝webpack灏辨棤娉曡瘑鍒嚭鍝簺浠ｇ爜闇€瑕佸垹闄わ紝鎵€浠ワ紝姝ゆ椂鏈夊繀瑕佸悜 webpack 鐨?compiler 鎻愪緵鎻愮ず鍝簺浠ｇ爜鏄€滅函绮归儴鍒嗏€濄€?/p>

杩欑鏂瑰紡鏄€氳繃 package.json 鐨?nbsp;"sideEffects" 灞炴€ф潵瀹炵幇鐨勩€?/p>

{ "name": "webpack-demo", "sideEffects": false}

濡傚悓涓婇潰鎻愬埌鐨勶紝濡傛灉鎵€鏈変唬鐮侀兘涓嶅寘鍚壇浣滅敤锛屾垜浠氨鍙互绠€鍗曞湴灏嗚灞炴€ф爣璁颁负 false锛屾潵鍛婄煡 webpack锛屽畠鍙互瀹夊叏鍦板垹闄ゆ湭鐢ㄥ埌鐨?export 瀵煎嚭銆?/p>

娉ㄦ剰锛屼换浣曞鍏ョ殑鏂囦欢閮戒細鍙楀埌 tree shaking 鐨勫奖鍝嶃€傝繖鎰忓懗鐫€锛屽鏋滃湪椤圭洰涓娇鐢ㄧ被浼?/span> css-loader 骞跺鍏?CSS 鏂囦欢锛屽垯闇€瑕佸皢鍏舵坊鍔犲埌 side effect 鍒楄〃涓紝浠ュ厤鍦ㄧ敓浜фā寮忎腑鏃犳剰涓皢瀹冨垹闄わ細

{ "name": "webpack-demo", "sideEffects": [ "*.css" ]}

銆屽帇缂╄緭鍑恒€?/strong>

閫氳繃濡備笂鏂瑰紡锛屾垜浠凡缁忓彲浠ラ€氳繃 import 鍜?nbsp;export 璇硶锛屾壘鍑洪偅浜涢渶瑕佸垹闄ょ殑鈥滄湭浣跨敤浠ｇ爜(dead code)鈥濓紝鐒惰€岋紝鎴戜滑涓嶅彧鏄鎵惧嚭锛岃繕闇€瑕佸湪 bundle 涓垹闄ゅ畠浠€備负姝わ紝鎴戜滑灏嗕娇鐢?nbsp;-p(production) 杩欎釜 webpack 缂栬瘧鏍囪锛屾潵鍚敤 uglifyjs 鍘嬬缉鎻掍欢銆?/p>

銆屼粠 webpack 4 寮€濮嬶紝涔熷彲浠ラ€氳繃 "mode" 閰嶇疆閫夐」杞绘澗鍒囨崲鍒板帇缂╄緭鍑猴紝鍙渶璁剧疆涓?nbsp;"production"銆傘€?/strong>

銆屾€荤粨銆?/strong>

• 涓轰簡浣跨敤tree-shaking鐨勮瘽锛岄渶瑕佷娇鐢‥S Module璇硶锛屼篃灏辨槸浣跨敤 ES2015 妯″潡璇硶锛堝嵆  import 鍜?nbsp; export锛夈€?
• 鍦ㄩ」鐩?nbsp; package.json 鏂囦欢涓紝娣诲姞涓€涓?"sideEffects" 鍏ュ彛銆?
• 寮曞叆涓€涓兘澶熷垹闄ゆ湭寮曠敤浠ｇ爜(dead code)鐨勫帇缂╁伐鍏?minifier)锛堜緥濡?nbsp; UglifyJSPlugin锛夛紝褰撶劧浜嗭紝webpack4寮€濮嬶紝浠ュ強鏀寔鍘嬬缉杈撳嚭浜嗐€?

瀵逛簬鍘熺悊绡囷紝鍙互鐪嬬湅杩欑瘒Tree-Shaking鎬ц兘浼樺寲瀹炶返 - 鍘熺悊绡?/p>

development鍜?span class="mq-1032">production鐜鏋勫缓

鍦ㄥ紑鍙戠幆澧冨拰鐢熸垚鐜涓紝鎴戜滑渚濊禆鐨勫姛鑳芥槸涓嶄竴鏍风殑锛屼妇涓緥瀛愷煈?/p>

• 寮€鍙戠幆澧?/span>涓紝鎴戜滑闇€瑕佸叿鏈夊己澶х殑銆佸叿鏈夊疄鏃堕噸鏂板姞杞?live reloading)鎴栫儹妯″潡鏇挎崲(hot module replacement)鑳藉姏鐨?source map 鍜?localhost server銆?
• 鐢熶骇鐜涓紝鎴戜滑鐨勭洰鏍囧垯杞悜浜庡叧娉ㄦ洿灏忕殑 bundle锛屾洿杞婚噺鐨?source map锛屼互鍙婃洿浼樺寲鐨勮祫婧愶紝浠ユ敼鍠勫姞杞芥椂闂淬€?

鍩轰簬浠ヤ笂涓ょ偣鐨勮瘽锛屾垜浠渶瑕佷负姣忎釜鐜鎼缓褰兼鐙珛鐨剋ebpack閰嶇疆銆?/p>

鍏跺疄锛屽啓杩噕ue锛孯eact閮戒細鍙戠幇锛屾湁涓€涓?code class="mq-1041">webpack.common.js鐨勯厤缃枃浠讹紝瀹冪殑浣滅敤灏辨槸涓嶅繀鍦ㄩ厤缃腑閰嶇疆閲嶅鐨勪唬鐮併€?/p>

webpack-merge瀹夎

閭ｄ箞棣栧厛闇€瑕佸畨瑁呯殑灏辨槸webpack-merge,涔嬪悗鍐嶆暣鍚堜竴璧枫€?/p>

cnpm install --save-dev webpack-merge

閭ｄ箞鎴戜滑鐨勭洰褰曞氨鏄繖鏍峰瓙鐨勷煈?/p>

 webpack-demo |- build |- webpack.common.js //涓変釜鏂皐ebpack閰嶇疆鏂囦欢 |- webpack.dev.js //涓変釜鏂皐ebpack閰嶇疆鏂囦欢 |- webpack.prod.js //涓変釜鏂皐ebpack閰嶇疆鏂囦欢 |- package.json |-postcss.config.js |-.babelrc |- /dist |- /src |- index.js |- math.js |- /node_modules

閭ｄ箞瀛﹀埌鐜板湪锛岀湅鐪嬮厤缃簡鍝簺淇℃伅馃憞

銆寃ebpack.common.js銆?/strong>

const path = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin')const {CleanWebpackPlugin} = require('clean-webpack-plugin');const commonConfig = { entry: { main: './src/index.js', }, module: { rules: [{ test: /.js$/, exclude: /node_modules/, loader: "babel-loader" }, { test: /.(jpg|gif|png)$/, use: { loader: 'url-loader', options: { name: '[name]_[hash].[ext]', outputPath: 'images/', limit: 1024 //100KB } } }, { test: /.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] }, { test: /.scss$/, use: ['style-loader', { loader: 'css-loader', options: { importLoaders: 2, modules: true } }, 'sass-loader', 'postcss-loader' ] }, { test: /.(woff|woff2|eot|ttf|otf)$/, use: [ 'file-loader' ] }] }, plugins: [ new HtmlWebpackPlugin({ template: 'src/index.html' // 浠rc/鐩綍涓嬬殑index.html涓烘ā鏉挎墦鍖?/span> }), new CleanWebpackPlugin({ // 涓嶉渶瑕佸仛浠讳綍鐨勯厤缃?/span> }), ], output: { filename: '[name].js', // publicPath: "https://cdn.example.com/assets/", path: path.join(__dirname, '../dist') }}
module.exports = commonConfig

銆寃ebpack.dev.js銆?/strong>

const path = require('path')const webpack = require('webpack')const {merge} = require('webpack-merge')const commonConfig = require('./webpack.common')
const devConfig = { mode: 'development', devtool: 'cheap-module-eval-source-map', devServer: { contentBase: path.join(__dirname, "dist"), compress: true, port: 9000, open: true, hot: true, // hotOnly: true, }, plugins: [ new webpack.NamedModulesPlugin(), new webpack.HotModuleReplacementPlugin(), ], optimization:{ usedExports: true }}
module.exports = merge(commonConfig, devConfig)

銆寃ebpack.prod.js銆?/strong>

const {merge} = require('webpack-merge')const commomConfig = require('./webpack.common')const prodConfig = { mode: 'production', devtool: 'cheap-module-source-map',}
module.exports = merge(commomConfig, prodConfig)

娉ㄦ剰锛屽湪鐜鐗瑰畾鐨勯厤缃腑浣跨敤 merge() 寰堝鏄撳湴鍖呭惈鎴戜滑鍦?nbsp;dev 鍜?nbsp;prod 涓殑甯歌閰嶇疆銆?code class="mq-1276">webpack-merge 宸ュ叿鎻愪緵浜嗗绉嶅悎骞?merge)鐨勯珮绾у姛鑳斤紝浣嗘槸鍦ㄦ垜浠殑鐢ㄤ緥涓紝鏃犻渶鐢ㄥ埌杩欎簺鍔熻兘銆?/p>

NPM Scripts

鐜板湪锛屾垜浠妸 scripts 閲嶆柊鎸囧悜鍒版柊閰嶇疆銆傛垜浠皢 npm run dev 瀹氫箟涓?span class="mq-1281">寮€鍙戠幆澧?/span>鑴氭湰锛屽苟鍦ㄥ叾涓娇鐢?nbsp;webpack-dev-server锛屽皢 npm run build 瀹氫箟涓?span class="mq-1284">鐢熶骇鐜鑴氭湰锛?/p>

 { "name": "webpack-demo", "scripts": { "dev": "webpack-dev-server --config ./build/webpack.dev.js", "build": "webpack --config ./build/webpack.prod.js", "start": "npx webpack --config ./build/webpack.dev.js" }, }

闇€瑕佹敞鎰忕殑鏄紝鎴戝皢涓変釜鏂囦欢鏀惧湪浜哹uild鐩綍涓嬶紝褰撶劧浜嗭紝鍦ㄦ牴鐩綍鎯呭喌涓嬶紝鎴戜滑灏辨妸--config鍚庨潰鐨勬寚浠よ矾寰勪慨鏀瑰嵆鍙€?/p>

杩樻湁涓€涓渶瑕佹敞鎰忕殑灏辨槸clean-webpack-plugin杩欎釜鎻掍欢鐨勯厤缃紝褰撲綘鎶婂畠閮芥斁杩沚uild鐩綍涓嬶紝姝ゆ椂鐨勭浉瀵硅鎻掍欢鐨勬牴鐩綍灏辨槸build锛屾墍浠ユ垜浠渶瑕佸仛淇敼馃憞

 new CleanWebpackPlugin({ // 涓嶉渶瑕佸仛浠讳綍鐨勯厤缃?/span> }),

鏈€鏂扮殑clean-webpack-plugin锛屼笉闇€瑕佽缃竻闄ょ洰褰曪紝鑷姩娓呴櫎鎵撳寘璺緞锛屼篃灏辨槸dist鐩綍銆?/p>

SplitChunksPlugin浠ｇ爜鍒嗛殧

褰撲綘鏈夊涓叆鍙ｆ枃浠讹紝鎴栬€呮槸鎵撳寘鏂囦欢闇€瑕佸仛涓€涓垝鍒嗭紝涓句釜渚嬪瓙锛屾瘮濡傜涓夋柟搴搇odash锛宩query绛夊簱闇€瑕佹墦鍖呭埌涓€涓洰褰曚笅锛岃嚜宸辩殑涓氬姟閫昏緫浠ｇ爜闇€瑕佹墦鍖呭埌涓€涓枃浠朵笅锛岃繖涓椂鍊欙紝灏遍渶瑕佹彁鍙栧叕鍏辨ā鍧椾簡锛屼篃灏遍渶瑕丼plitChunksPlugin杩欎釜鎻掍欢鐧诲満浜嗐€?/p>

杩欎釜鏄痺ebpack4鏂板鍔犵殑鎻掍欢锛屾垜浠渶瑕佹墜鍔ㄥ幓閰嶇疆optimization.splitChunks銆傛帴涓嬫潵锛屾垜浠氨鏉ョ湅鐪嬪畠鐨勫熀鏈厤缃惂馃憞

module.exports = { //... optimization: { splitChunks: { chunks: "async", minSize: 30000, minChunks: 1, maxAsyncRequests: 5, maxInitialRequests: 3, automaticNameDelimiter: '~', name: true, cacheGroups: { vendors: {  test: /[\/]node_modules[\/]/, //鍖归厤node_modules涓殑妯″潡 priority: -10 //浼樺厛绾?褰撴ā鍧楀悓鏃跺懡涓涓紦瀛樼粍鐨勮鍒欐椂锛屽垎閰嶅埌浼樺厛绾ч珮鐨勭紦瀛樼粍 }, default: { minChunks: 2, //瑕嗙洊澶栧眰鐨勫叏灞€灞炴€?/span> priority: -20, reuseExistingChunk: true //鏄惁澶嶇敤宸茬粡浠庡師浠ｇ爜鍧椾腑鍒嗗壊鍑烘潵鐨勬ā鍧?/span> } } } },};

閭ｆ垜浠粠姣忎釜鍙傛暟寮€濮嬭璧佛煈?/p>

• 鍦╟acheGroups澶栧眰鐨勫睘鎬ц缃€傜敤浜庢墍鏈夌殑缂撳瓨缁勶紝涓嶈繃姣忎釜缂撳瓨缁勫唴閮ㄩ兘鍙互 銆岄噸鏂般€?/strong>璁剧疆瀹冧滑鐨勫€?
• chunks: "async" 杩欎釜灞炴€ц缃殑鏄互 銆屼粈涔堢被鍨嬨€?/strong>鐨勪唬鐮佺粡琛屽垎闅旓紝鏈変笁涓€?
• initial 鍏ュ彛浠ｇ爜鍧?
• all 鍏ㄩ儴
• async 鎸夐渶鍔犺浇鐨勪唬鐮佸潡
• minSize: 30000 妯″潡澶у皬瓒呰繃30kb鐨勬ā鍧楁墠浼氭彁鍙?
• minChunks: 1, 褰撴煇涓ā鍧楄嚦灏戣澶氬皯涓ā鍧楀紩鐢ㄦ椂锛屾墠浼氳鎻愬彇鎴愭柊鐨刢hunk
• maxAsyncRequests: 5,鍒嗗壊鍚庯紝鎸夐渶鍔犺浇鐨勪唬鐮佸潡鏈€澶氬厑璁哥殑骞惰璇锋眰鏁?
• maxInitialRequests: 3路 鍒嗗壊鍚庯紝鍏ュ彛浠ｇ爜鍧楁渶澶氬厑璁哥殑骞惰璇锋眰鏁?
• automaticNameDelimiter: "~"浠ｇ爜鍧楀懡鍚嶅垎鍓茬
• name: true,姣忎釜缂撳瓨缁勬墦鍖呭緱鍒扮殑浠ｇ爜鍧楃殑鍚嶇О
• cacheGroups 缂撳瓨缁勶紝瀹氬埗鐩稿簲鐨勮鍒欍€?

鑷繁鏍规嵁瀹為檯鎯呭喌鍘昏缃浉搴旂殑瑙勫垯锛屾瘡涓紦瀛樼粍鏍规嵁瑙勫垯灏嗗尮閰嶇殑妯″潡浼氬垎閰嶅埌浠ｇ爜鍧楋紙chunk锛変腑锛屾瘡涓紦瀛樼粍鐨勬墦鍖呯粨鏋滃彲浠ユ槸鍗曚竴 chunk锛屼篃鍙互鏄涓?chunk銆?/p>

杩欓噷鏈夌瘒瀹為檯椤圭洰涓浣曚唬鐮佸垎闅旂殑锛屾湁鍏磋叮鐨勫彲浠ョ湅鐪婼plitChunk浠ｇ爜瀹炰緥

Lazy-loding鎳掑姞杞藉拰Chunk

import寮傛鍔犺浇妯″潡

鍦╳ebpack涓紝浠€涔堟槸鎳掑姞杞斤紝涓句釜渚嬪瓙锛屽綋鎴戦渶瑕佹寜闇€寮曞叆鏌愪釜妯″潡鏃讹紝杩欎釜鏃跺€欙紝鎴戜滑灏卞彲浠ヤ娇鐢ㄦ噿鍔犺浇锛屽叾瀹炲疄鐜扮殑鏂规灏辨槸import璇硶锛屽湪杈惧埌鏌愪釜鏉′欢鏃讹紝鎴戜滑鎵嶄細鍘昏姹傝祫婧愩€?/p>

閭ｄ箞鎴戜滑鏉ョ湅鐪嬶紝濡備綍瀹炵幇鎳掑姞杞金煈?/p>

鍦ㄨ杩欎釜涔嬪墠锛屾垜浠殑鍏堝€熷姪涓€涓彃浠讹紝瀹屾垚瀵筰mport璇硶鐨勮瘑鍒€?/p>

cnpm install --save-dev @babel/plugin-syntax-dynamic-import

鐒跺悗鍐?code class="mq-1411">.babelrc鏂囦欢涓嬮厤缃紝澧炲姞涓€涓彃浠?/p>

{ "plugins": ["@babel/plugin-syntax-dynamic-import"]}

杩欐牱瀛愮殑璇濓紝鎴戜滑灏卞彲浠ラ」鐩腑鑷敱鐨勪娇鐢╥mport鎸夐渶鍔犺浇妯″潡浜嗐€?/p>

// create.jsasync function create() { const { default: _ } = await import(/*webpackChunkName:"lodash"*/'lodash') let element = document.createElement('div') element.innerHTML = _.join(['TianTian', 'lee'], '-') return element}
function demo() { document.addEventListener('click', function () { create().then(element => { document.body.appendChild(element) }) })}
export default demo;

鎴戣繖涓ā鍧楃殑鍔熻兘锛屽氨鏄綋浣犵偣鍑婚〉闈㈠悗锛屼細瑙﹀彂create鍑芥暟锛岀劧鍚庡姞杞絣oadsh搴擄紝鏈€鍚庡啀椤甸潰涓噿鍔犺浇lodash锛屾墦鍖呮槸姝ｅ父鎵撳寘锛屼絾鏄憿锛屾湁浜涜祫婧愶紝鍙互褰撲綘瑙﹀彂鏌愪簺鏉′欢锛屽啀鍘诲姞杞斤紝杩欎篃绠楁槸浼樺寲鎵嬫鍚с€?/p>

Chunk

Chunk鍦╓ebpack閲屾寚涓€涓唬鐮佸潡锛岄偅鍏蜂綋鏄寚浠€涔堟牱鐨勪唬鐮佸潡鍛紵馃憞

Chunk鏄疻ebpack鎵撳寘杩囩▼涓紝涓€鍫唌odule鐨勯泦鍚堛€俉ebpack閫氳繃寮曠敤鍏崇郴閫愪釜鎵撳寘妯″潡锛岃繖浜沵odule灏卞舰鎴愪簡涓€涓狢hunk銆?/p>

銆屼骇鐢烠hunk鐨勪笁绉嶉€斿緞銆?/strong>

• entry鍏ュ彛
• 寮傛鍔犺浇妯″潡
• 浠ｇ爜鍒嗗壊锛坈ode spliting锛?

Chunk鍙槸涓€涓蹇碉紝鐞嗚В浜咰hunk姒傚康锛屾洿鏈夊埄浜庡webpack鏈変竴瀹氱殑璁よ瘑銆?/p>

CSS浠ｇ爜鍘嬬缉鎻愬彇

鍦ㄧ嚎涓婄殑鐜涓紝鎴戜滑闇€瑕佸幓灏嗘垜浠殑CSS鏂囦欢鍗曠嫭鐨勬墦鍖呭埌涓€涓狢hunk涓嬶紝鎵€浠ラ渶瑕佸€熷姪涓€瀹氱殑鎻掍欢锛屽畬鎴愯繖涓伐浣溿€?/p>

mini-css-extract-plugin css浠ｇ爜鎻愬彇

灏哻ss鎻愬彇涓虹嫭绔嬬殑鏂囦欢鎻掍欢锛屾敮鎸佹寜闇€鍔犺浇鐨刢ss鍜宻ourceMap,鎴戜滑鍙互鏌ョ湅GitHub瀹樻柟锛屾潵鐪嬬湅瀹冪殑鏂囨。

**鐩墠缂哄け鍔熻兘锛孒MR銆?*鎵€浠ワ紝鎴戜滑鍙互鎶婂畠杩愮敤鍒扮敓鎴愮幆澧冧腑鍘伙紝寮€濮嬪畨瑁咅煈?/p>

npm install --save-dev mini-css-extract-plugin

瀵圭潃杩欎釜鎻掍欢鐨勪娇鐢紝杩樻槸寤鸿鍦╳ebpack.prod.js涓?鐢熶骇鐜)閰嶇疆锛岃繖涓彃浠舵殏鏃舵殏鏃朵笉鏀寔HMR锛岃€屼笖鍦ㄥ紑鍙戠幆澧冧腑development锛屾槸闇€瑕佺敤鍒癏MR鐨勶紝鎵€浠ユ垜浠繖娆￠厤缃彧鍦╳ebpack.prod.js閰嶇疆銆?/p>

闇€瑕佹敞鎰忕殑涓€鐐规槸锛屽綋浣犵殑webpack鐗堟湰鏄?鐗堟湰鐨勬椂鍊欙紝闇€瑕佸幓package.json涓厤缃?code class="mq-1479">sideEffects灞炴€э紝杩欐牱瀛愬氨銆岄伩鍏嶄簡鎶奵ss鏂囦欢浣滀负Tree-shaking銆?/strong>銆?/p>

{ "name": "webpack-demo", "sideEffects": [ "*.css" ]}

鐒跺悗鐨勮瘽锛屾垜浠湅鐪媤ebpack.prod.js鏄浣曢厤缃弬鏁扮殑銆?/p>

const MiniCssExtractPlugin = require('mini-css-extract-plugin');const { merge} = require('webpack-merge')const commomConfig = require('./webpack.common')
const prodConfig = { mode: 'production', devtool: 'cheap-module-source-map', plugins: [ new MiniCssExtractPlugin({ filename:'[name].[hash].css', chunkFilename: '[id].[hash].css', }) ], module: { rules: [{ test: /.(sa|sc|c)ss$/, use: [ MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader', ], }] }}
module.exports = merge(commomConfig, prodConfig)

褰撲綘鍦╦s涓紩鍏ss妯″潡鏃讹紝鏈€鍚庡湪dist鐩綍涓嬶紝鐪嬪埌浜哻ss鍗曠嫭鐨凜hunk鐨勮瘽锛岃鏄巆ss浠ｇ爜鎻愬彇鎴愬姛浜嗭紝鎺ヤ笅鏉ュ氨鏄銆宑ss浠ｇ爜鐨勫帇缂┿€?/strong>銆?/p>

webpack4榛樿鍦ㄧ敓浜х幆澧冧笅锛屾槸涓嶄細鍘诲帇缂ヽss浠ｇ爜鐨勶紝鎵€浠ユ垜浠渶瑕佷笅杞藉浜庣殑plugin

optimize-css-assets-webpack-plugin css浠ｇ爜鍘嬬缉

optimize-css-assets-webpack-plugin GitHub瀹樻柟鏂囨。

杩欎釜浼氬鎵撳寘鍚庣殑css浠ｇ爜缁忚浠ｇ爜鍘嬬缉锛屾垜浠笅杞借繖涓寘馃憞

npm install --save-dev optimize-css-assets-webpack-plugin

鎺ヤ笅鏉ュ氨鏄缃?nbsp;銆宱ptimization.minimizer銆?/strong> 锛岃繖閲岄渶瑕佹敞鎰忕殑灏辨槸锛屾鏃惰缃畂ptimization.minimizer浼氳鐩杦ebpack榛樿鎻愪緵鐨勮鍒欙紝姣斿銆孞S浠ｇ爜灏变笉浼氬啀鍘诲帇缂╀簡銆?/strong>銆?/p>

const MiniCssExtractPlugin = require('mini-css-extract-plugin');const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');const UglifyJsPlugin = require('uglifyjs-webpack-plugin');const { merge} = require('webpack-merge')const commomConfig = require('./webpack.common')
const prodConfig = { mode: 'production', devtool: 'cheap-module-source-map', optimization: { minimizer: [ new UglifyJsPlugin({ sourceMap: true, parallel: true, // 鍚敤澶氱嚎绋嬪苟琛岃繍琛屾彁楂樼紪璇戦€熷害 }), new OptimizeCSSAssetsPlugin({}), ] }, plugins: [ new MiniCssExtractPlugin({ // 绫讳技 webpackOptions.output閲岄潰鐨勯厤缃?鍙互蹇界暐 filename: '[name].[hash].css', chunkFilename: '[id].[hash].css' }) ], module: { rules: [{ test: /.(sa|sc|c)ss$/, use: [{ loader: MiniCssExtractPlugin.loader, options: { // 杩欓噷鍙互鎸囧畾涓€涓?publicPath // 榛樿浣跨敤 webpackOptions.output涓殑publicPathcss // 涓句釜渚嬪瓙,鍚庡彴鏀寔鎶奵ss浠ｇ爜鍧楁斁鍏dn publicPath: "https://cdn.example.com/css/" }, }, 'css-loader', 'postcss-loader', 'sass-loader', ], }] },
}
module.exports = merge(commomConfig, prodConfig)

浣嗘槸鍛紝姝ゆ椂灏变細鍙戠幇鍦ㄧ敓浜х幆澧冧笅锛孞S鍘嬬缉涔熶細瀛樺湪闂锛屾墍浠ヤ负浜嗚В鍐抽棶棰橈紝鎴戜滑缁熶竴鍦ㄤ笅闈㈡⒊鐞嗮煈?/p>

uglifyjs-webpack-plugin浠ｇ爜鍘嬬缉

杩欎釜鎻掍欢瑙ｅ喅鐨勯棶棰橈紝灏辨槸褰撲綘闇€瑕佸幓optimization.minimizer涓缃紝杩欐牱瀛愪細瑕嗙洊銆寃ebpack鍩烘湰閰嶇疆銆?/strong>锛屽師鏈琂S浠ｇ爜鍘嬬缉鐨勫姛鑳藉氨浼氳瑕嗙洊锛屾墍浠ユ垜浠渶瑕佷笅杞藉畠銆?/p>

npm install -D uglifyjs-webpack-plugin

鐒跺悗鍦╳ebpack.prod.js閰嶇疆濡備笂淇℃伅鍗冲彲锛屽畠鐨勬洿澶氶厤缃湅瀹樼綉鏂囨。

const MiniCssExtractPlugin = require('mini-css-extract-plugin');const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');const UglifyJsPlugin = require('uglifyjs-webpack-plugin')const { merge} = require('webpack-merge')const commonConfig = require('./webpack.common')
const prodConfig = { mode: 'production', devtool: 'cheap-module-source-map', optimization: { minimizer: [ new UglifyJsPlugin({ sourceMap: true, parallel: true, // 鍚敤澶氱嚎绋嬪苟琛岃繍琛屾彁楂樼紪璇戦€熷害 }), new OptimizeCSSAssetsPlugin({}), ] }, plugins: [ new MiniCssExtractPlugin({ // 绫讳技 webpackOptions.output閲岄潰鐨勯厤缃?鍙互蹇界暐 filename: '[name].[hash].css', chunkFilename: '[id].[hash].css' }) ], module: { rules: [{ test: /.(sa|sc|c)ss$/, use: [{ loader: MiniCssExtractPlugin.loader, options: { // 杩欓噷鍙互鎸囧畾涓€涓?publicPath // 榛樿浣跨敤 webpackOptions.output涓殑publicPathcss // 涓句釜渚嬪瓙,鍚庡彴鏀寔鎶奵ss浠ｇ爜鍧楁斁鍏dn publicPath: "https://cdn.example.com/css/" }, }, 'css-loader', 'postcss-loader', 'sass-loader', ], }] },
}
module.exports = merge(commonConfig, prodConfig)

瀵逛簬寮€鍙戣€呯幆澧冭€岃█锛屽css浠ｇ爜鎻愬彇锛屼互鍙婃墦鍖呮槸娌℃湁鎰忎箟鐨勶紝缁熶竴瀵逛簬js浠ｇ爜鍘嬬缉锛屼篃浼氶檷浣庢晥鐜囷紝涔熸槸涓嶆帹鑽愯繖涔堝幓鍋氱殑锛屾墍浠ユ垜浠氨璺宠繃鍦ㄥ紑鍙戠幆澧冧腑瀵瑰畠浠殑閰嶇疆銆?/p>

contenthash瑙ｅ喅娴忚鍣ㄧ紦瀛?/span>

褰撲綘鎵撳寘涓€涓」鐩嵆灏嗕笂绾挎椂锛屾湁涓€涓渶姹傦紝浣犲彧鏄慨鏀逛簡閮ㄥ垎鐨勬枃浠讹紝鍙笇鏈涚敤鎴峰浜庡叾浠栫殑鏂囦欢锛屼緷鏃у幓閲囩敤娴忚鍣ㄧ紦瀛樹腑鐨勬枃浠讹紝鎵€浠ヨ繖涓椂鍊欙紝鎴戜滑闇€瑕佺敤鍒?code class="mq-1769">contenthash銆?/p>

webpack涓叧浜巋ash锛屾湁涓夌锛屽垎鍒槸馃憞

hash

hash锛屼富瑕佺敤浜庡紑鍙戠幆澧冧腑锛屽湪鏋勫缓鐨勮繃绋嬩腑锛屽綋浣犵殑椤圭洰鏈変竴涓枃浠跺彂鐜颁簡鏀瑰彉锛屾暣涓」鐩殑hash鍊煎氨浼氬仛淇敼(鏁翠釜椤圭洰鐨刪ash鍊兼槸涓€鏍风殑)锛岃繖鏍峰瓙锛屾瘡娆℃洿鏂帮紝鏂囦欢閮戒笉浼氳娴忚鍣ㄧ紦瀛樻枃浠讹紝淇濊瘉浜嗘枃浠剁殑鏇存柊鐜囷紝鎻愰珮寮€鍙戞晥鐜囥€?/p>

chunkhash

璺熸墦鍖呯殑chunk鏈夊叧锛屽叿浣撴潵璇?code class="mq-1775">webpack鏄牴鎹叆鍙?code class="mq-1776">entry閰嶇疆鏂囦欢鏉ュ垎鏋愬叾渚濊禆椤瑰苟鐢辨鏉ユ瀯寤鸿entry鐨刢hunk锛屽苟鐢熸垚瀵瑰簲鐨?code class="mq-1778">hash鍊笺€備笉鍚岀殑chunk浼氭湁涓嶅悓鐨?code class="mq-1780">hash鍊笺€?/p>

鍦ㄧ敓浜х幆澧冧腑锛屾垜浠細鎶婄涓夋柟鎴栬€呭叕鐢ㄧ被搴撹繘琛屽崟鐙墦鍖咃紝鎵€浠ヤ笉鏀瑰姩鍏叡搴撶殑浠ｇ爜锛岃chunk鐨?code class="mq-1783">hash灏变笉浼氬彉锛屽彲浠ュ悎鐞嗙殑浣跨敤娴忚鍣ㄧ紦瀛樹簡銆?/p>

浣嗘槸杩欎釜涓環ash鐨勬柟娉曞叾瀹炴槸瀛樺湪闂鐨勶紝鐢熶骇鐜涓垜浠細鐢?code class="mq-1785">webpack鐨勬彃浠讹紝灏?code class="mq-1786">css浠ｇ爜鎵撳崟鐙彁鍙栧嚭鏉ユ墦鍖呫€傝繖鏃跺€?code class="mq-1787">chunkhash鐨勬柟寮忓氨涓嶅鐏垫椿锛屽洜涓哄彧瑕佸悓涓€涓?code class="mq-1788">chunk閲岄潰鐨刯s淇敼鍚庯紝css鐨?code class="mq-1790">chunk鐨?code class="mq-1791">hash涔熶細璺熼殢鐫€鏀瑰姩銆傚洜姝ゆ垜浠渶瑕?code class="mq-1792">contenthash銆?/p>

contenthash

contenthash琛ㄧず鐢辨枃浠跺唴瀹逛骇鐢熺殑hash鍊硷紝鍐呭涓嶅悓浜х敓鐨?code class="mq-1797">contenthash鍊间篃涓嶄竴鏍枫€傜敓浜х幆澧冧腑锛岄€氬父鍋氭硶鏄妸椤圭洰涓?code class="mq-1798">css閮芥娊绂诲嚭瀵瑰簲鐨?code class="mq-1799">css鏂囦欢鏉ュ姞浠ュ紩鐢ㄣ€?/p>

瀵逛簬webpack锛屾棫鐗堟湰鑰岃█锛屽嵆渚挎瘡娆′綘npm run build锛?span class="mq-1801">銆屽唴瀹逛笉鍋氫慨鏀圭殑璇濓紝contenthash鍊艰繕鏄細鏈夋墍鏀瑰彉銆?/strong>锛岃繖涓槸鍥犱负锛屽綋浣犲湪妯″潡涔嬮棿瀛樺湪鐩镐簰涔嬮棿鐨勫紩鐢ㄥ叧绯伙紝鏈変竴涓?span class="mq-1802">銆宮anifest鏂囦欢銆?/strong>銆?/p>

manifest鏂囦欢鏄敤鏉ュ紩瀵兼墍浠ユā鍧楃殑浜や簰锛宮anifest鏂囦欢鍖呭惈浜嗗姞杞藉拰澶勭悊妯″潡鐨勯€昏緫锛屼妇涓緥瀛愶紝浣犵殑绗笁鏂瑰簱鎵撳寘鍚庣殑鏂囦欢锛屾垜浠О涔嬩负vendors锛屼綘鐨勯€昏緫浠ｇ爜绉颁负main锛屽綋浣爓ebpack鐢熸垚涓€涓猙undle鏃讹紝瀹冨悓鏃朵細鍘荤淮鎶や竴涓猰anifest鏂囦欢锛屼綘鍙互鐞嗚В鎴愭瘡涓猙undle鏂囦欢瀛樺湪杩欓噷淇℃伅锛屾墍浠ユ瘡涓猙undle涔嬮棿鐨刴anifest淇℃伅鏈変笉鍚岋紝杩欐牱瀛愭垜浠氨闇€瑕佸皢manifest鏂囦欢缁欐彁鍙栧嚭鏉ャ€?/p>

杩欎釜鏃跺€欙紝闇€瑕佸湪銆宱ptimization銆?/strong>涓鍔犱竴涓厤缃煈?/p>

module.exports = { optimization: { splitChunks: { // ... }, runtimeChunk: {// 瑙ｅ喅鐨勯棶棰樻槸鑰佺増鏈腑鍐呭涓嶅彂鐢熸敼鍙樼殑璇?contenthash渚濇棫浼氬彂鐢熸敼鍙?/span> name: 'manifest' } }}

褰撶劧浜嗭紝瑕佹槸杩樻病鏉ョ悊瑙ｇ殑璇濓紝鍙互鍘粀ebpack瀹樻柟缃戠珯锛岀湅鐪媘anifest瀹氫箟浠ュ強瀹冪殑鍚箟銆?/p>

璇村畬浜嗚繖涓紝鎴戜滑鐪嬬湅鎴戜滑搴旇濡備綍鍘婚厤缃畂utput鍚э紝鎴戜滑鍏堢湅涓媤ebpack.prod.js閰嶇疆

output: { filename: '[name].[contenthash].js', chunkFilename:'[vendors].[contenthash].js', // publicPath: "https://cdn.example.com/assets/", path: path.join(__dirname, '../dist') }

瀵逛簬鐨剋ebpack.dev.js涓彧闇€瑕佸皢contenthash鏀逛负hash灏辫锛岃繖鏍峰瓙寮€鍙戠殑鏃跺€欙紝鎻愰珮寮€鍙戞晥鐜囥€?/p>

shimming 鍏ㄥ眬鍙橀噺

绠€鍗曠炕璇戝氨鏄?code class="mq-1847">鍨墖锛屽畠瑙ｅ喅鐨勫満鏅湁鍝簺鍛紝涓句釜渚嬪瓙锛屽綋浣犲啀浣跨敤绗笁鏂瑰簱锛屾鏃堕渶瑕佸紩鍏ュ畠锛屽張鎴栬€呮槸浣犳湁寰堝鐨勭涓夋柟搴撴垨鑰呮槸鑷繁鍐欑殑搴擄紝姣忎釜js鏂囦欢閮介渶瑕佷緷璧栧畠锛岃浜哄緢绻佺悙锛岃繖涓椂鍊欙紝shimming灏辨淳涓婄敤鍦轰簡銆?/p>

鎴戜滑闇€瑕佷娇鐢?nbsp;ProvidePlugin 鎻掍欢锛岃繖涓獁ebpack鏄唴缃殑锛宻himming渚濊禆鐨勫氨鏄繖涓彃浠躲€?/p>

浣跨敤 ProvidePlugin 鍚庯紝鑳藉鍦ㄩ€氳繃 webpack 缂栬瘧鐨勬瘡涓ā鍧椾腑锛岄€氳繃璁块棶涓€涓彉閲忔潵鑾峰彇鍒?package 鍖呫€?/p>

澧炲姞涓€涓狿lugin閰嶇疆馃憞

new webpack.ProvidePlugin({ // 杩欓噷璁剧疆鐨勫氨鏄綘鐩稿簲鐨勮鍒欎簡 // 绛変环浜庡湪浣犱娇鐢╨odash妯″潡涓鍙ヰ煈?/span> // import _ from 'lodash' _: 'lodash'})

涓句釜渚嬪瓙馃憞

// array_add.jsexport const Arr_add = arr=>{ let str = _.join(arr,'++'); return str;}

杩欐牱瀛愭病鏈夋甯稿鍏odash搴撶殑璇濓紝鏄細鎶ラ敊鐨勶紝浣嗘槸鎴戜滑浣跨敤浜哖rovidePlugin鎻掍欢锛屼娇寰楀畠浼氭彁渚涚浉搴旂殑lodash鍖咃紝娉ㄦ剰鍒扮殑灏辨槸锛岄伩鍏嶅涓猯odash鍖呰鎵撳寘澶氭锛屽彲浠ヤ娇鐢?code class="mq-1879">CommonsChunkPlugin鎻掍欢锛寃ebpack4宸茬粡鎶涘純瀹冧簡锛屼娇鐢ㄧ殑鏄?code class="mq-1880">splitChunksPlugin鎻掍欢鍙栦唬瀹冿紝鎴戝湪涔嬪墠鐨勫湴鏂瑰凡缁忔⒊鐞嗚繃浜嗐€?/p>

鏇村鐨勭敤娉曞彲浠ユ煡鐪媠himming鍨墖

---

姊崇悊鎬荤粨鏈夐檺锛屽弽鑰屾洿澶氱殑鏄嚜宸遍厤缃繃绋嬩腑閬囧埌鐨勪竴浜涢棶棰樻⒊鐞嗘€荤粨锛寃ebpack4鏂扮壒鎬у€煎緱浣犲幓瀛︿範锛屼笅闈㈡槸涓€浜涘姞椁愭枃绔狆煈?/p>

鍔犻

• Webpack鎻鈥斺€旇蛋鍚戦珮闃跺墠绔殑蹇呯粡涔嬭矾
• import銆乺equire銆乪xport銆乵odule.exports 娣峰悎浣跨敤璇﹁В
• webpack璇﹁В
• webpack4閰嶇疆璇﹁В涔嬫參鍤肩粏鍜?
• 銆屽悙琛€鏁寸悊銆嶅啀鏉ヤ竴鎵揥ebpack闈㈣瘯棰?

鍦ㄧ湅鐐硅繖閲?