對於webpack的loader相關主題的核心知識進行闡述整理 ...
4.Loader
4.1 loader 用於對模塊的源代碼進行轉換,使你在 import 或"載入"模塊時預處理文件:
1 可以將文件從不同的語言（如 TypeScript）轉換為 JavaScript語言;
2 或將內聯圖像轉換為 data URL。
因此，loader 可以說是向我們提供了處理前端構建步驟的強大方法。
其次，使用 loader 之前需要先載入相對應的轉換器（即loader），然後 webpack 會根據配置載入可以處理的文件，比如遇到每個 .css時使用 css-loader，遇到所有 .ts 文件時使用 ts-loader等。
4.2 loader 的使用方法大致有三種：
-
- 配置：在 webpack.config.js 文件中指定 loader，這是推薦使用的方法。
- 內聯：在每個
import語句中顯式指定 loader。如import Styles from 'style-loader!css-loader?modules!./styles.css';中間的“！”是用於分隔開各個loader - CLI：在 shell 命令中指定它們。如
webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'，這裡對.jade文件使用jade-loader，對.css文件使用style-loader和css-loader
4.3 loader的特性
-
- loader 能夠對資源使用流水線(pipeline)進行鏈式傳遞。即一組鏈式的 loader 的編譯順序是順序的，鏈中的前一個 loader 返回值給下一個 loader。傳遞到最後一個 loader時，返回 JavaScript。
- loader 可以是同步/非同步的。
- loader 運行在 Node.js 中，並且能夠執行任何可能的操作。
- loader 接收用於對 loader 傳遞配置的查詢參數。
- loader 能用
options對象配置。 - 可以使用
package.json常見的main屬性，也可以在package.json里定義一個loader欄位來將普通的 npm 模塊導出為 loader。 - 使用插件(plugin)可以為loader帶來更多特性。
- loader 可以產生非標準配置文件的任意文件。
（loader）預處理函數為 JavaScript 生態系統提供了更多可能和變化。用戶可以更加靈活地引入細粒度邏輯，如壓縮、打包、語言翻譯等。
4.4 loader的解析
遵循標準的模塊解析，loader 將從模塊路徑（通常認為模塊路徑是 npm install, node_modules）解析。
loader 模塊需要導出為一個函數，並且使用 Node.js 相容的 JavaScript 編寫。通常使用 npm 進行管理，也可將自定義 loader 作為應用程式中的文件。
命名約定：loader 被命名為 xxx-loader（例如 json-loader）。
更多信息請看如何編寫 loader？。
