問(wèn)題描述

正在通過(guò)webpack官方文檔學(xué)習(xí)webpack；開(kāi)始webpack是把所有資源當(dāng)作模塊來(lái)處理，并進(jìn)行打包成bundle?？粗€不錯(cuò) 很吸引人。

但是看到后面我對(duì)打包這個(gè)概念表示迷惑。

看到代碼分離那里，說(shuō)為了充分利用瀏覽器的并行加載和緩存機(jī)制，要把css和第三方庫(kù)文件單獨(dú)打包成一個(gè)bundle。

那結(jié)果不就是把常規(guī)的用標(biāo)簽引入資源，改成了用require的方式在js里顯示的加載了嗎？那么除了顯示的聲明了依賴(lài)以外，模塊打包的優(yōu)勢(shì)是什么？

看到代碼分離那個(gè)地方，我反而在想，既然要分開(kāi)，那我為什么還要模塊打包呢？

這個(gè)模塊打包有什么好處嗎？

問(wèn)題解答

比如說(shuō)，分離css那里。要先require把css引入，然后用插件單獨(dú)打包成一個(gè)bundle，然后在html里用標(biāo)簽引入。

我為什么要多此一舉，打包一下？直接像常規(guī)做法那樣html里用標(biāo)簽引入不是更好嗎？

模塊化是為了寫(xiě)代碼方便，打包是為了運(yùn)行代碼方便

另外webpack是可以分開(kāi)打包的

如果你做SPA，或者如果你不使用scss，postcss，圖片壓縮，圖片base64自動(dòng)轉(zhuǎn)換，手動(dòng)插入CSS或者JS其實(shí)問(wèn)題不算大。做一個(gè)vue多頁(yè)面的項(xiàng)目，可能會(huì)體會(huì)到j(luò)s或者css自動(dòng)插入到html的便利之處了。

以前手動(dòng)link方式引入css的時(shí)候，為了方便，我會(huì)將所有的css內(nèi)容放在同一個(gè)文件中，否則又要加link，但是所有的css在一個(gè)文件，開(kāi)發(fā)其實(shí)是不方便的。有的webpack之后，我可以讓css文件盡量切分，從文件結(jié)構(gòu)上就變得清晰

webpack的關(guān)于CSS的的好處，暫時(shí)就想到這么些