Webpack之Loaders

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

Reference

using loaders