Loader
loader 用於對模塊的源代碼進行轉換。loader 可以使你在 import 或"加載"模塊時預處理文件。
因此，loader 類似於其他構建工具中“任務(task)”，並提供了處理前端構建步驟的強大方法。
loader 可以將文件從不同的語言（如 TypeScript）轉換為 JavaScript，或將內聯圖像轉換為 data URL。
loader 甚至允許你直接在 JavaScript 模塊中 import CSS文件！
示例
例如，你可以使用 loader 告訴 webpack 加載 CSS 文件，或者將 TypeScript 轉為 JavaScript。為此，首先安裝相對應的 loader：
//Install for one
npm install --save-dev css-loader npm install --save-dev ts-loader
//Install for two
npm i --save-dev css-loader ts-loader
//Install for three
npm i --save-dev css-loader && npm i --save-dev ts-loader
推薦你使用第二種方式安裝，關於npm之類的命令簡寫，請訪問npm文檔，當然如果你英語不太好，可以用Chrome自帶的Google翻譯。
然后指示 webpack 對每個 .css 使用 css-loader，以及對所有 .ts 文件使用 ts-loader：
webpack.config.js
module.exports = { module: { rules: [ { test: /\.css$/, use: 'css-loader' }, { test: /\.ts$/, use: 'ts-loader' } ] } };
使用 Loader
在你的應用程序中，有三種使用 loader 的方式：
配置[Configuration]
module.rules 允許你在 webpack 配置中指定多個 loader。
這是展示 loader 的一種簡明方式，並且有助於使代碼變得簡潔。
同時讓你對各個 loader 有個全局概覽：
module: { rules: [ { test: /\.css$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader', options: { modules: true } } ] } ] }
內聯
可以在 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 中的問題。
CLI
你也可以通過 CLI 使用 loader：
webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'
這會對 .jade 文件使用 jade-loader，對 .css 文件使用 style-loader 和 css-loader。
Loader 特性
- loader 支持鏈式傳遞。能夠對資源使用流水線(pipeline)。一組鏈式的 loader 將按照相反的順序執行。loader 鏈中的第一個 loader 返回值給下一個 loader。在最后一個 loader，返回 webpack 所預期的 JavaScript。
- loader 可以是同步的，也可以是異步的。
- loader 運行在 Node.js 中，並且能夠執行任何可能的操作。
- loader 接收查詢參數。用於對 loader 傳遞配置。
- loader 也能夠使用
options對象進行配置。 - 除了使用
package.json常見的main屬性，還可以將普通的 npm 模塊導出為 loader，做法是在package.json里定義一個loader字段。 - 插件(plugin)可以為 loader 帶來更多特性。
- loader 能夠產生額外的任意文件。
loader 通過（loader）預處理函數，為 JavaScript 生態系統提供了更多能力。 用戶現在可以更加靈活地引入細粒度邏輯，例如壓縮、打包、語言翻譯和其他更多。
解析 Loader
loader 遵循標准的模塊解析。
多數情況下，loader 將從模塊路徑（通常將模塊路徑認為是 npm install, node_modules）解析。
loader 模塊需要導出為一個函數，並且使用 Node.js 兼容的 JavaScript 編寫。
通常使用 npm 進行管理，但是也可以將自定義 loader 作為應用程序中的文件。
按照約定，loader 通常被命名為 xxx-loader（例如 json-loader）。
有關詳細信息，請查看如何編寫 loader？。