Webpack 本身只能處理 JavaScript 模塊，如果要處理其他類型的文件信姓，就需要使用 loader 進行轉(zhuǎn)換培他。
Loader 可以理解為是模塊和資源的轉(zhuǎn)換器，它本身是一個函數(shù)草添，接受源文件作為參數(shù)驶兜，返回轉(zhuǎn)換的結(jié)果。這樣远寸，我們就可以通過require來加載任何類型的模塊或文件抄淑，比如 CoffeeScript、 JSX驰后、 LESS 或圖片肆资。
先來看看 loader 有哪些特性？
Loader 可以通過管道方式鏈式調(diào)用灶芝，每個 loader 可以把資源轉(zhuǎn)換成任意格式并傳遞給下一個 loader 郑原，但是最后一個 loader 必須返回 JavaScript。
Loader 可以同步或異步執(zhí)行夜涕。
Loader 運行在 node.js 環(huán)境中犯犁，所以可以做任何可能的事情。
Loader 可以接受參數(shù)女器，以此來傳遞配置項給 loader酸役。
Loader 可以通過文件擴展名（或正則表達式）綁定給不同類型的文件。
Loader 可以通過npm發(fā)布和安裝晓避。
除了通過package.json的main指定簇捍，通常的模塊也可以導出一個 loader 來使用。
Loader 可以訪問配置俏拱。
插件可以讓 loader 擁有更多特性暑塑。
Loader 可以分發(fā)出附加的任意文件。
Loader 本身也是運行在 node.js 環(huán)境中的 JavaScript 模塊锅必，它通常會返回一個函數(shù)事格。大多數(shù)情況下，我們通過 npm 來管理 loader搞隐，但是你也可以在項目中自己寫 loader 模塊驹愚。
按照慣例，而非必須劣纲，loader 一般以xxx-loader的方式命名逢捺，xxx代表了這個 loader 要做的轉(zhuǎn)換功能，比如json-loader癞季。
在引用 loader 的時候可以使用全名json-loader劫瞳，或者使用短名json。這個命名規(guī)則和搜索優(yōu)先級順序在 webpack 的resolveLoader.moduleTemplatesapi 中定義绷柒。
Default: ["*-webpack-loader","*-web-loader","*-loader","*"]
Loader 可以在require()引用模塊的時候添加志于，也可以在 webpack 全局配置中進行綁定，還可以通過命令行的方式使用废睦。
接上一節(jié)的例子伺绽，我們要在頁面中引入一個 CSS 文件 style.css，首頁將 style.css 也看成是一個模塊嗜湃，然后用css-loader來讀取它奈应，再用style-loader把它插入到頁面中。
/* style.css */body{background: yellow; }
修改 entry.js：
require("!style-loader!css-loader!./style.css")// 載入 style.cssdocument.write('It works.')document.write(require('./module.js'))
安裝 loader：
npminstallcss-loaderstyle-loader
重新編譯打包购披，刷新頁面钥组，就可以看到黃色的頁面背景了。
如果每次requireCSS 文件的時候都要寫 loader 前綴今瀑，是一件很繁瑣的事情程梦。我們可以根據(jù)模塊類型（擴展名）來自動綁定需要的 loader。
將 entry.js 中的require("!style!css!./style.css")修改為require("./style.css")橘荠，然后執(zhí)行：
$ webpack entry.js bundle.js --module-bind'css=style-loader!css-loader'
# 有些環(huán)境下可能需要使用雙引號
$ webpack entry.js bundle.js --module-bind"css=style-loader!css-loader"
顯然屿附，這兩種使用 loader 的方式，效果是一樣的哥童。
