## 一、概述 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/