先來了解一下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支持鏈式調用，從右至左執行，支持同步或異步函數