What
laoders可以将项目源文件进行处理,流式返回新的文件资源
Features
- loader可以链式调用,它们以管道函数的形式对资源文件进行处理,最后一个loader通常返回的是js。
- loader可以以同步或异步的方式进行资源处理
- loader运行在nodejs环境中
- loader接收查询参数,可以对loader进行配置
- loader在配置中以正则的形式绑定待处理资源
- 模块可以在package.json中配置loader来抛出一个loader属性
- Plugins可以给loader更多特性
How to use
- require指定
通过require或define声明获取loader,loader与资源文件用”!”分隔开,多个loaders用”!”分隔开。
require("./loader!./dir/file.txt");
// => 使用当前目录下的loader.js文件对当前目录下dir目录下file.txt文件进行处理
require("jade!./template.jade");
require("!style!css!less!bootstrap/less/bootstrap.less");
// => 对bootstrap.less文件流式进行less-->css-->style三个loader处理
require("url-loader?mimetype=image/png!./file.png");
// => 带参数的loader
- 配置文件
可以在配置文件中通过正则匹配进行loader绑定
module: {
loaders: [
{ test: /\.jade$/, loader: "jade" },
// => jade-loader处理jade文件
{ test: /\.css$/, loaders: ["style", "css"] },
// => 对css文件进行css-->style两个loader处理
{ test: /\.png$/, loader: "url-loader?mimetype=image/png" }
// => 带参数的loader
]
}
- 命令行cli
格式:webpack –module-bind “[extstr]=[loaderstr]”,如果extstr(文件后缀名)等于loaderstr,可以简写
webpack --module-bind jade --module-bind 'css=style!css'
webpack --module-bind "png=url-loader?mimetype=image/png" //带参的loader