loader 讓 webpack 能夠去處理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以將所有類型的文件轉換為 webpack 能夠處理的有效模塊，然后你就可以利用 webpack 的打包能力，對它們進行處理。 本質上，webpack loader 將所有類型的文件，轉換為應用程序的依賴圖（和最終的 bundle）可以直接引用的模塊。 在 webpack 的配置中 loader 有兩個目標： * test 屬性，用于標識出應該被對應的 loader 進行轉換的某個或某些文件。 * use 屬性，表示進行轉換時，應該使用哪個 loader。 ~~~ const path = require('path'); const config = { output: { filename: 'my-first-webpack.bundle.js' }, module: { rules: [ { test: /\.txt$/, use: 'raw-loader' } ] } }; module.exports = config; ~~~ 以上配置中，對一個單獨的 module 對象定義了 rules 屬性，里面包含兩個必須屬性：test 和 use。這告訴 webpack 編譯器(compiler) 如下信息： *“webpack 編譯器，當你碰到「在 require()/import 語句中被解析為 '.txt' 的路徑」時，在你對它打包之前，先使用 raw-loader 轉換一下。”* loader 用于對模塊的源代碼進行轉換。loader 可以使你在 import 或"加載"模塊時預處理文件。因此，loader 類似于其他構建工具中“任務(task)”，并提供了處理前端構建步驟的強大方法。loader 可以將文件從不同的語言（如 TypeScript）轉換為 JavaScript，或將內聯圖像轉換為 data URL。loader 甚至允許你直接在 JavaScript 模塊中 import CSS文件！ 例如，你可以使用 loader 告訴 webpack 加載 CSS 文件，或者將 TypeScript 轉為 JavaScript。為此，首先安裝相對應的 loader： ~~~ module: { rules: [ { test: /\.css$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader', options: { modules: true } } ] } ] } ~~~ ## 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）。