🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
## 一、概述 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/