webpack必知必會

細節

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指紋解耦方案