webpack必知必會

標籤：art   import   輸出   span   develop   div   導致   檔案的   number   

細節url-loader和file-loader是什麼關係？file-loader用於將檔案路徑打包為另一個url，url-loader封裝了file-loader。使用url-loader時，只需要安裝url-loader即可，不需要安裝file-loader，因為url-loader內建了file-loader。url-loader工作分兩種情況：

1. 檔案大小小於limit參數，url-loader將會把檔案編碼為DataURL；
2. 檔案大小大於limit，url-loader會調用file-loader進行處理，參數也會直接傳給file-loader。因此我們只需要安裝url-loader即可。

compiler和compilation編譯器和編譯集合compilation對象代表某個版本的資源對應的編譯進程。當使用Webpack的development中介軟體時，每次檢測到專案檔有改動就會建立一個compilation，進而能夠針對改動生產全新的編譯檔案。compilation對象包含當前模組資源、待編譯檔案、有改動的檔案和監聽依賴的所有資訊。compiler對象代表的是不變的webpack環境，是針對webpack的；而compilation對象針對的是隨時可變的專案檔，只要檔案有改動，compilation就會被重新建立。不加hash、hash、contenthash和chunkhash的區別hash一般是結合CDN緩衝來使用的。

• hash是compilation對象產生的hash值，每次項目有所改動該對象就會重建一次，意味著任意一個檔案的改動都會改變hash
• chunkhash也根據不同的入口檔案(Entry)進行依賴檔案解析、構建對應的chunk，產生對應的雜湊值，不同的入口檔案的chunkhash不同，但是同一個入口分離的css和js擁有相同的chunkhash並相互影響。chunkhash只會監測import和require引入的檔案是否改變，不會監測css的@import引入。意味著@import引入的css改變了，但是chunkhash不會變。
• 每個檔案根據內容產生的contenthash值，保證即使css檔案所處的模組裡就算其他檔案內容改變，只要css檔案內容不變，那麼不會重複構建。

webpack構建流程 從啟動webpack構建到輸出結果經曆了一系列過程，它們是：

1. 解析webpack配置參數，合并從shell傳入和webpack.config.js檔案裡配置的參數，生產最後的配置結果。
2. 註冊所有配置的外掛程式，好讓外掛程式監聽webpack構建生命週期的事件節點，以做出對應的反應。
3. 從配置的entry入口檔案開始解析檔案構建AST文法樹，找出每個檔案所依賴的檔案，遞迴下去。
4. 在解析檔案遞迴的過程中根據檔案類型和loader配置找出合適的loader用來對檔案進行轉換。
5. 遞迴完後得到每個檔案的最終結果，根據entry配置產生代碼塊chunk。
6. 輸出所有chunk到檔案系統。

需要注意的是，在構建生命週期中有一系列外掛程式在合適的時機做了合適的事情，比如UglifyJsPlugin會在loader轉換遞迴完後對結果再使用UglifyJs壓縮覆蓋之前的結果。html-webpac-plugin

new HtmlWebpackPlugin({    filename: ‘‘, // 檔案名稱及路徑    template: ‘‘, // 模板    chunk: [‘‘], // 包含指定的打包後檔案，否則預設為注入所有檔案})

最佳化url-loader如果圖片較多，會發很多http請求，會降低頁面效能。這個問題可以通過url-loader解決。url-loader會將引入的圖片編碼，產生dataURl。相當於把圖片資料翻譯成一串字元。再把這串字元打包到檔案中，最終只需要引入這個檔案就能訪問圖片了。當然，如果圖片較大，編碼會消耗效能。因此url-loader提供了一個limit參數，小於limit位元組的檔案會被轉為DataURl，大於limit的還會使用file-loader進行copy。將基礎庫抽離打包到單檔案比如react、react-dom等，這樣做的好處是只要你不升級他們的版本這個檔案永遠不會被重新整理。如果你把這些基礎庫和業務代碼打包在一個檔案裡每次改動業務代碼都會導致檔案hash值變化從而導致緩衝失效瀏覽器重複下載這些包含基礎庫的代碼。這屬於代碼分割。CommonsChunkPlugin可以提取出多個代碼塊都依賴的代碼形成一個單獨的chunk。在應用有多個頁面的情境下提取出所有頁面公用的代碼減少單個頁面的代碼，在不同頁面之間切換時所有頁面公用的代碼之前被載入過而不必重新載入。  （持續更新） 

參考資料：

• Webpack中hash與chunkhash的區別，以及js與css的hash指紋解耦方案

webpack必知必會