javascript - 不是很理解webpack的模塊打包思想？

問題描述

正在通過webpack官方文檔學習webpack；開始webpack是把所有資源當作模塊來處理，并進行打包成bundle?？粗€不錯 很吸引人。

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

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

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

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

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

問題解答

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

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

模塊化是為了寫代碼方便，打包是為了運行代碼方便

另外webpack是可以分開打包的

如果你做SPA，或者如果你不使用scss，postcss，圖片壓縮，圖片base64自動轉換，手動插入CSS或者JS其實問題不算大。做一個vue多頁面的項目，可能會體會到js或者css自動插入到html的便利之處了。

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

webpack的關于CSS的的好處，暫時就想到這么些