細節 url-loader和file-loader是什麼關係？ file-loader用於將文件路徑打包為另一個url，url-loader封裝了file-loader。使用url-loader時，只需要安裝url-loader即可，不需要安裝file-loader，因為url-loader內置了f ...
細節
url-loader和file-loader是什麼關係？
file-loader用於將文件路徑打包為另一個url，url-loader封裝了file-loader。使用url-loader時，只需要安裝url-loader即可，不需要安裝file-loader，因為url-loader內置了file-loader。url-loader工作分兩種情況：- 文件大小小於limit參數，url-loader將會把文件編碼為DataURL；
- 文件大小大於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構建到輸出結果經歷了一系列過程，它們是：- 解析webpack配置參數，合併從shell傳入和webpack.config.js文件里配置的參數，生產最後的配置結果。
- 註冊所有配置的插件，好讓插件監聽webpack構建生命周期的事件節點，以做出對應的反應。
- 從配置的entry入口文件開始解析文件構建AST語法樹，找出每個文件所依賴的文件，遞歸下去。
- 在解析文件遞歸的過程中根據文件類型和loader配置找出合適的loader用來對文件進行轉換。
- 遞歸完後得到每個文件的最終結果，根據entry配置生成代碼塊chunk。
- 輸出所有chunk到文件系統。
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。在應用有多個頁面的場景下提取出所有頁面公共的代碼減少單個頁面的代碼，在不同頁面之間切換時所有頁面公共的代碼之前被載入過而不必重新載入。 （持續更新）參考資料：
