Webpack有哪些常見的Loader？他們是解決什麼問題的？

先來了解一下Loader，webpack是屬於模塊化方案，他能讓任意類型的文件都能運行在瀏覽器中，怎麼作到呢？這時就有了loader

定義: loader 用於對模塊的源代碼進行轉換。loader 能夠使你在 import 或"加載"模塊時預處理文件。

沒太明白? 看下示例可能更清淅

經常使用的loader

這裏其實沒什麼太大意義，無非是去看看本身項目到底用了哪些loader而已, 下面簡單列出一些

• style-loader 將css添加到DOM的內聯樣式標籤style裏

• css-loader 容許將css文件經過require的方式引入，並返回css代碼

• less-loader 處理less

• sass-loader 處理sass

• postcss-loader 用postcss來處理CSS

• autoprefixer-loader 處理CSS3屬性前綴，已被棄用，建議直接使用postcss

• file-loader 分發文件到output目錄並返回相對路徑

• url-loader 和file-loader相似，可是當文件小於設定的limit時能夠返回一個Data Url

• html-minify-loader 壓縮HTML

• babel-loader 用babel來轉換ES6文件到ES5

loader特性

咱們一邊偏向於使用，不會去在乎loader的一些小細節, 這裏就順帶說一下

• loader 從右到左地取值(evaluate)/執行(execute)

• loader 支持鏈式傳遞,鏈中的每一個 loader 會將轉換應用在已處理過的資源上

• loader 也能夠內聯顯示指定

• loader 能夠是同步的，也能夠是異步的

• loader 運行在 Node.js 中，而且可以執行任何 Node.js 能作到的操做

• loader 能夠經過 options 對象配置

• 除了常見的經過 package.json 的 main 來將一個 npm 模塊導出爲 loader，還能夠在 module.rules 中使用 loader 字段直接引用一個模塊

• loader 可以產生額外的任意文件

看了其特性後，再看來一組簡單的demo進行加深印象

總結

• loader是webpack核心,用於對模塊的源代碼進行轉換

• loader支持鏈式調用，從右至左執行，支持同步或異步函數