之前學習過webpack3的知識，但是webpack4升級後還是有很多變動的，所以這次重新整理一下webpack4的知識點，方便以後複習。

這次學習webpack4不僅僅要會配置，記住核心API，最好還要理解一下webpack更深層次的知識，比如打包原理等等，所以可能會省略一些比較基礎的內容，但是希望我可以通過此次學習掌握webpack，更好地應對以後的工作。

1.圖片打包

熟悉webpack配置的前端都知道，loader是webpack用來處理非js檔案的，現在我們要在js檔案中引入一張圖片。

直接引入是肯定不行的，需要在webpack.config.js中配置 file-loader，別忘了要 npm install file-loader -D。

然後執行webpack進行打包。

file-loader會自動打包處理jpg檔案，並且放到輸出的目錄中。

注：console.log的結果就是打包後圖片的名稱。

2.打包圖片名稱

如果我們想要讓打包出來的圖片名稱和引入名稱相同，要怎麼做呢？

這時候我們就需要去loader中新增一些額外的配置了。

options中，[name]代表原始檔名稱，[ext]代表原始檔字尾，這樣打包出來的檔案就和原來的檔名稱相同了。

這種配置的語法叫做placeholder，也叫佔位符。佔位符的種類還有很多，比如[hash]等，具體可以去看webpack的官網(webpack.js.org/loaders/fil…)。

我們可以再給圖片加一個hash值。

執行webpack打包後的結果

當然，file-loader不只可以打包jpg檔案，還可以打包png等檔案。

3.圖片打包目錄

我們可以在output中配置檔案打包的目錄，也可以在loader的options中單獨配置圖片的打包目錄

執行webpack打包後的結果

這時候圖片已經被打包到images資料夾中。

4.url-loader

提到 file-loader 就會想到 url-loader ，url-loader可以實現 file-loader 的功能，那他們有什麼區別呢?

區別在於 url-loader 會把圖片轉為base64，而不是單獨打包出一張圖片。

好處是圖片打包在js檔案中，頁面不需要額外傳送一次http請求，而缺點是如果圖片很大的話，js檔案就會很大，會導致js載入變慢，頁面出現空白的情況。所以當圖片比較小的時候適合用 url-loader。

5.url-loader最佳實踐

意思是如果圖片超過204800個位元組（200kb），就使用和file-loader相同的方式進行打包。
如果圖片小於204800個位元組（200kb），就使用base64方式進行打包。