之前學習過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方式進行打包。