問題描述

正在通過webpack官方文檔學(xué)習(xí)webpack；開始webpack是把所有資源當(dāng)作模塊來處理，并進(jìn)行打包成bundle。看著還不錯 很吸引人。

但是看到后面我對打包這個概念表示迷惑。

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

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

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

這個模塊打包有什么好處嗎？

問題解答

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

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

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

另外webpack是可以分開打包的

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

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

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