文章詳情頁
javascript - 不是很理解webpack的模塊打包思想？
瀏覽：118日期：2023-09-02 15:14:25
問題描述
正在通過webpack官方文檔學習webpack；開始webpack是把所有資源當作模塊來處理，并進行打包成bundle。看著還不錯 很吸引人。
但是看到后面我對打包這個概念表示迷惑。
看到代碼分離那里，說為了充分利用瀏覽器的并行加載和緩存機制，要把css和第三方庫文件單獨打包成一個bundle。
那結果不就是把常規的用標簽引入資源，改成了用require的方式在js里顯示的加載了嗎？那么除了顯示的聲明了依賴以外，模塊打包的優勢是什么？
看到代碼分離那個地方，我反而在想，既然要分開，那我為什么還要模塊打包呢？
這個模塊打包有什么好處嗎？
問題解答
回答1：比如說，分離css那里。要先require把css引入，然后用插件單獨打包成一個bundle，然后在html里用標簽引入。
我為什么要多此一舉，打包一下？直接像常規做法那樣html里用標簽引入不是更好嗎？
回答2：模塊化是為了寫代碼方便，打包是為了運行代碼方便
另外webpack是可以分開打包的
回答3：如果你做SPA，或者如果你不使用scss，postcss，圖片壓縮，圖片base64自動轉換，手動插入CSS或者JS其實問題不算大。做一個vue多頁面的項目，可能會體會到js或者css自動插入到html的便利之處了。
以前手動link方式引入css的時候，為了方便，我會將所有的css內容放在同一個文件中，否則又要加link，但是所有的css在一個文件，開發其實是不方便的。有的webpack之后，我可以讓css文件盡量切分，從文件結構上就變得清晰
webpack的關于CSS的的好處，暫時就想到這么些
標簽：
JavaScript
相關文章：
1. Python處理Dict生成json2. mysql優化 - mysql 一張表如果不能確保字段列長度一致，是不是就不需要用到char。3. python中怎么對列表以區間進行統計？4. 大家都用什么工具管理mysql數據庫？5. python - 為什么match匹配出來的結果是<_sre.SRE_Match object; span=(0, 54), match=’’>6. android - 在win7配置 react native開發環境時，一直卡在這里，請問以下是哪里出錯了，謝謝！7. python - 請問這兩個地方是為什么呢？8. python - 用os.environ能獲取到的環境變量，在os.environ.getenv卻得不到，這是為什么？9. 請教一個mysql去重取最新記錄10. javascript - 按鈕鏈接到另一個網址 怎么通過百度統計計算按鈕的點擊數量
排行榜
網公網安備