webpack构建与loaders

loaders 定义

先了解一下webpack，webpack是一个用于针对js文件的构建工具，在被构建的js文件中，我们可以使用require语句和webpack loader，如下：

var css = require("css!./file.css");
// => returns css code from file.css, resolves imports and url(...)

css代码中的 @import与url()类似js的require()请求资源文件，css-loader 将会对 file.css文件中的 @import 和 url(...) 请求的资源进行解析处理，并转交
给适合处理请求资源文件的file-loader 或 url-loader。详情请看官网：https://www.npmjs.com/package/css-loader

基于上面示例，我对loader的定义是 转译器 

loaders 特征

1、loaders 支持链式，它们被应用在资源的的管道中，最后一个loader预期返回javascript；每个laoder会返回任意格式的资源，并交给下一个loader进行处理.
2、loaders 支持同步和异步
3、loaders 运行在node.js环境中，可以做任何可能的事情(使用node.js api)
4、loaders 接受查询参数，可以通过配置loader来使用
5、loaders 可以在配置中通过正则匹配的文件扩展名来绑定
6、loaders 可以通过npm发布，安装
7、除了在package.json文件配置 main入口(指定js文件)之外，一般的js模块都可以作为导出的loader
8、loaders 可以访问配置
9、plugins 可以给予 loaders 更多的特征
10、loaders 可以处理额外的任意文件

...

如果你对一些loader示例感兴趣，请查看loaders列表：http://webpack.github.io/docs/list-of-loaders.html

loaders 解析

loaders解析类似于模块解析，一个loader模块 就是一个执行于node.js环境中的函数；一般情况下，你应该通过使用npm来

管理你的loaders，但是在你的项目中，也可以使用单个js模块来作为你的loader  

1、引用loaders

loaders经常被命名为XXX-loader，XXX 代指文件mime类型的名称，如：json-loader

我们可以通过全名(如：json-loader)，也可以通过简写名(如：json)来引用loaders 

2、loaders 安装

如果loader存在于npm中，你可以像下面代码来安装loader：

npm install xxx-loader --save

or

npm install xxx-loader --save-dev

3、用法

使用require语句指定loaders

我们使用 感叹号! 来将资源文件与loaders分开，使用多个loaders，应在所有的转换规则(loader)之前加上感叹号!，如：

require(!style!css!less!./src/css/index.less);

注：使用多个loaders是由右向左处理的，文件依次按less-loader，css-loader，style-loader处理

通过在webpack.config.js文件中配置指定loaders

{
    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"] },
        ]
    }
}

通过在命令行中配置使用

通过命令行你可以将loaders绑定到扩展的文件进行转换，如：

webpack --module-bind jade --module-bind 'css=style!css'

这里使用jade-loader绑定到 扩展的jade文件进行转换，使用style-loader，css-loader绑定到css文件进行转换 

4、查询字符串

Loader可以通过查询字符串(类似web页面url中的查询字符串)传递查询参数，使用问号?将 loader与查询字符串连接，loader后跟查询字符串，如：

url-loader?mimetype=image/png 

or 

url-loader?{"mimetype"="image/png"} 

require写法

require("url-loader?mimetype=image/png!./file.png");

webpack.config.js配置

{ test: /.png$/, loader: "url-loader?mimetype=image/png" }

or

{
    test: /.png$/,
    loader: "url-loader",
    query: { mimetype: "image/png" }
} 

命令行绑定

webpack --module-bind "png=url-loader?mimetype=image/png"

ps：转载请注明 博客园：杨君华，文章有不足之处，望指正，多包涵。