## 一、概述 loader 用于對模塊的源代碼進行轉換。loader 可以使你在`import`或"加載"模塊時預處理文件。因此，loader 類似于其他構建工具中“任務(task)”，并提供了處理前端構建步驟的強大方法。loader 可以將文件從不同的語言（如 TypeScript）轉換為 JavaScript，或將內聯圖像轉換為 data URL。loader 甚至允許你直接在 JavaScript 模塊中`import`CSS文件！ ## 二、用法 在你的應用程序中，有三種使用 loader 的方式： 1. 配置（推薦）：在 webpack.config.js 文件中指定 loader。 2. 內聯：在每個 import 語句中顯式指定 loader。 3. CLI：在 shell 命令中指定它們。 ### 配置 `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"}`。 ### CLI 你也可以通過 CLI 使用 loader： ~~~ webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader' ~~~ 這會對`.jade`文件使用`jade-loader`，對`.css`文件使用[`style-loader`](https://www.webpackjs.com/loaders/style-loader)和[`css-loader`](https://www.webpackjs.com/loaders/css-loader)。 ## 三、參考 常用的loaders：https://www.webpackjs.com/loaders/