loader 用於對模塊的源代碼進行轉換。loader 可以使你在 import 或"加載"模塊時預處理文件。因此，loader 類似於其他構建工具中“任務(task)”，並提供了處理前端構建步驟的強大方法。loader 可以將文件從不同的語言（如 TypeScript）轉換爲 JavaScript 或將內聯圖像轉換爲 data URL。loader 甚至允許你直接在 JavaScript 模塊中 import CSS文件！
1、示例
例如，你可以使用 loader 告訴 webpack 加載 CSS 文件，或者將 TypeScript 轉爲 JavaScript。爲此，首先安裝相對應的 loader：
npm install --save-dev css-loader
npm install --save-dev ts-loader
然後指示 webpack 對每個 .css 使用 css-loader，以及對所有 .ts 文件使用 ts-loader：
webpack.config.js
module.exports = {
module: {
rules: [
{ test: /\.css$/, use: 'css-loader' },
{ test: /\.ts$/, use: 'ts-loader' }
]
}
};
2、使用 loader
在你的應用程序中，有三種使用 loader 的方式：
- 配置（推薦）：在 webpack.config.js 文件中指定 loader。
- 內聯：在每個 import 語句中顯式指定 loader。
- CLI：在 shell 命令中指定它們。
2.1 配置(configuration)
module.rules 允許你在 webpack 配置中指定多個 loader。 這種方式是展示 loader 的一種簡明方式，並且有助於使代碼變得簡潔和易於維護。同時讓你對各個 loader 有個全局概覽：
loader 從右到左地取值(evaluate)/執行(execute)。在下面的示例中，從 sass-loader 開始執行，然後繼續執行 css-loader，最後以 style-loader 爲結束。查看 loader 功能 瞭解有關 loader 順序的更多信息。
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
modules: true
}
},
{ loader: 'sass-loader' }
]
}
]
}
};
2.2 內聯(inline)
可以在 import 語句或任何 等同於 “import” 的方法 中指定 loader。使用 ! 將資源中的 loader 分開。每個部分都會相對於當前目錄解析。
import Styles from 'style-loader!css-loader?modules!./styles.css';
使用 ! 爲整個規則添加前綴，可以覆蓋配置中的所有 loader 定義。
選項可以傳遞查詢參數，例如 ?key=value&foo=bar，或者一個 JSON 對象，例如 ?{“key”:“value”,“foo”:“bar”}。
儘可能使用 module.rules，因爲這樣可以減少源碼中樣板文件的代碼量，並且可以在出錯時，更快地調試和定位 loader 中的問題。
2.3 CLI
還可以通過 CLI 使用 loader：
webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'
這會對 .jade 文件使用 jade-loader，以及對 .css 文件使用 style-loader 和 css-loader。
3、loader 特性
- loader 支持鏈式傳遞。鏈中的每個 loader 會將轉換應用在已處理過的資源上。一組鏈式的 loader 將按照相反的順序執行。鏈中的第一個 loader 將其結果（也就是應用過轉換後的資源）傳遞給下一個 loader，依此類推。最後，鏈中的最後一個 loader，返回 webpack 期望 JavaScript。
- loader 可以是同步的，也可以是異步的。
- loader 運行在 Node.js 中，並且能夠執行任何 Node.js 能做到的操作。
- loader 可以通過 options 對象配置（仍然支持使用 query 參數來設置選項，但是這種方式已被廢棄）。
- 除了常見的通過 package.json 的 main 來將一個 npm 模塊導出爲 loader，還可以在 module.rules 中使用 loader 字段直接引用一個模塊。
- 插件(plugin)可以爲 loader 帶來更多特性。
- loader 能夠產生額外的任意文件。
通過（loader）預處理函數，loader 爲 JavaScript 生態系統提供了更多能力。 用戶現在可以更加靈活地引入細粒度邏輯，例如：壓縮、打包、語言翻譯和 更多其他特性。
4、解析 loader
loader 遵循 模塊解析 標準。多數情況下，loader 將從 模塊路徑 加載（通常是從 npm install, node_modules 進行加載）。
通常使用 npm 進行管理，但是也可以將自定義 loader 作爲應用程序中的文件。按照約定，loader 通常被命名爲 xxx-loader（例如 json-loader）。更多詳細信息請查看 如何編寫 loader？。