【webpack面試題】有哪些常見的Loader？它們是解決什么樣問題的？

webpack做的事情，僅僅是分析出各種模塊的依賴關(guān)系，然后形成資源列表，最終打包生成到指定的文件中。 更多的功能需要借助loaders和plugins完成。比如說：在代碼中有一張圖片需要進(jìn)行打包，webpack可以把圖片讀出來，但是不能將圖片當(dāng)做js代碼來讀，所以需要一個(gè)加載器loader來幫助我們把圖片的二進(jìn)制數(shù)據(jù)轉(zhuǎn)變?yōu)閖s代碼，loader的作用說白了就是將一種形式的代碼通過邏輯轉(zhuǎn)變成另一種形式的代碼，轉(zhuǎn)換后的代碼webpack就能識(shí)別了。loader的功能定位是轉(zhuǎn)換代碼

以下就是常見的loader：

• image-loader：加載并且壓縮圖片文件
• css-loader：幫助webpack打包處理css文件，使用css-loader必須要配合使用style-loader
• style-loader：用于將css編譯完成的樣式，掛載到頁面的style標(biāo)簽上。但是要注意loader執(zhí)行順序，style-loader要放在第一位，loader都是從后往前執(zhí)行
• babel-loader：把 ES6 轉(zhuǎn)換成 ES5
• sass-loader: css預(yù)處理器，能更好的編寫css
• postcss-loader: 用于補(bǔ)充css樣式在各種瀏覽器的前綴，很方便，不需要手動(dòng)寫了
• eslint-loader:用于檢查代碼是否符合規(guī)范，是否存在語法錯(cuò)誤
• url-loader:處理圖片類型資源，可以根據(jù)圖片的大小進(jìn)行不同的操作，如果圖片大小大于指定大小，則將圖片進(jìn)行資源打包，否則將圖片轉(zhuǎn)換為base64格式字符串，再把這個(gè)字符串打包到 JS文件里。