1. 什么是loader(加载器）
Loader 可以理解为是模块和资源的转换器，它本身是一个函数，接受源文件作为参数，返回转换的结果。这样，我们就可以通过 require 来加载任何类型的模块或文件，比如 CoffeeScript、 JSX、 LESS 或图片。
2. loader features
- Loader 可以通过管道方式链式调用，每个 loader 可以把资源转换成任意格式并传递给下一个 loader ，但是最后一个 loader 必须返回 JavaScript。
- Loader 可以同步或异步执行。
- Loader 运行在 node.js 环境中，所以可以做任何可能的事情。
- Loader 可以接受参数，以此来传递配置项给 loader。
- Loader 可以通过文件扩展名（或正则表达式）绑定给不同类型的文件。
- loader在配置上可以绑定extensions/ RegExps。
- loader可以通过npm出版/安装。
- 除了通过 package.json 的 main 指定，通常的模块也可以导出一个 loader 来使用。
- Loader 可以访问配置。
- 插件可以让 loader 拥有更多特性。
- Loader 可以分发出附加的任意文件。
3. 解析loader
Loader 本身也是运行在 node.js 环境中的 JavaScript 模块，它通常会返回一个函数。大多数情况下，我们通过 npm 来管理 loader，但是你也可以在项目中自己写 loader 模块。
4. 引用loader
- 按照惯例,虽然不是必需的,加载器通常命名为XXX-loader,XXX是上下文的名称。例如,json-loader。
- 你可以以完整的名称如：json-loader来引用loader,或者使用简写名称，例如：json。
5. 安装loader
$ npm install xxx-loader --save
or
$ npm install xxx-loader --save-dev
6. loader 使用
有很多方法在你的应用程序里面使用loader。
- Loader 可以在 require() 引用模块的时候添加
- webpack 全局配置中进行绑定
- 通过命令行配置
分别说说按照上述方法来使用loader
6.1 loaders in require （尽量不要用这种形式）
我们可以在require语句里面使用loaders。并且我们可以使用 ! 来隔开一个个不同的加载器。
//使用文件当前目录下的 loader.js 来处理 dir文件下面的 file.txt文件。
require("./loader!./dir/file.txt");
//使用npm安装的加载器 jade-loader 处理 文件。
require("jade!./template.jade");
转换bootstrap.less 通过less-loader-->css-loadre--->style-loader
require("!style!css!less!bootstrap/less/bootstrap.less");
注意：当拼接多个loader时，是从右边向左执行的。
6.2 configuration
可以将loader与正则结合来配置使用。
{
module: {
loaders: [
{ test: /\.jade$/, loader: "jade" },
// => "jade" loader is used for ".jade" files
{ test: /\.css$/, loader: "style!css" },
// => "style" and "css" loader is used for ".css" files
// Alternative syntax:
{ test: /\.css$/, loaders: ["style", "css"] },
]
}
}
6.3 CLI
$ webpack --module-bind jade --module-bind 'css=style!css'
7. 参数
类似web页面传参数
注意：参数的格式又对应的loader决定，具体需要参照loader对应的文档。
1. require("url-loader?mimetype=image/png!./file.png");
2. { test: /\.png$/, loader: "url-loader?mimetype=image/png" }
or
{
test: /\.png$/,
loader: "url-loader",
query: { mimetype: "image/png" }
}
3. webpack --module-bind "png=url-loader?mimetype=image/png"