加載器(Loaders)：

loader 是對應用程序中資源文件進行轉換。它們是（運行在 Node.js 中的）函數，可以將資源文件作為參數的來源，然后返回新的資源文件

示例：

例如，你可以使用 loader 告訴 webpack 加載 CSS 文件，或者將 TypeScript 轉為 JavaScript。首先，安裝相對應的 loader

其次，配置 webpack.config.js，對每個 .css 文件使用 css-loader，然后類似地，對每個 .ts 文件使用 ts-loader

配置：

在你的應用程序中，有三種方式使用 loader：
- 通過配置
- 在 require 語句中顯示使用
- 通過 CLI

通過 webpack.config.js：

module.rules 允許你在 webpack 配置中指定幾個 loader
這是展示 loader 的一種簡明的方式，并且有助于簡潔代碼，以及對每個相應的 loader 有一個完整的概述

通過 require：

可以在 require 語句（或 define, require.ensure, 等語句）中指定 loader。使用 ! 將資源中的 loader 分開。分開的每個部分都相對于當前目錄解析

通過前置所有規則及使用 !，可以對應覆蓋到配置中的任意 loader

可以給每個loader選項傳遞查詢參數，就像在 web 中那樣（?key=value&foo=bar）。也可以使用 JSON 對象（?{"key":"value","foo":"bar"}）

通過 CLI：

可選項，你也可以通過 CLI 使用 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 遵循標準的模塊解析。多數情況下，loader 將從模塊路徑（通常將模塊路徑認為是 npm install, node_modules）解析

如何編寫模塊？loader 模塊需要導出為一個函數，并且使用 Node.js 兼容的 JavaScript 編寫。在通常情況下，你會使用 npm 來管理 loader，但是你也可以將 loader 模塊作為應用程序中的文件。

按照約定，loader 通常被命名為 XXX-loader，其中 XXX 是上下文的名稱，例如 json-loader。

loader 的名稱約定和優先搜索順序，由 webpack 配置 API 中的 resolveLoader.moduleTemplates 定義。

總結

以上是生活随笔為你收集整理的Webpack基础之加载器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。