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 特征

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

...

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

loaders 解析

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

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

一、引用loaders

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

咱们能够经过全名(如：json-loader)，也能够经过简写名(如：json)来引用loaders 

二、loaders 安装

若是loader存在于npm中，你能够像下面代码来安装loader：

npm install xxx-loader --save

or

npm install xxx-loader --save-dev

三、用法

使用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文件进行转换 

四、查询字符串

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：转载请注明 博客园：杨君华，文章有不足之处，望指正，多包涵。