使用webpack loader加载器

了解webpack请移步webpack初识!

什么是loader

loaders 用于转换应用程序的资源文件，他们是运行在nodejs下的函数 使用参数来获取一个资源的来源而且返回一个新的来源(资源的位置)，例如：你可使用loader来告诉webpack去加载一个coffeescript或者jsx

loader 特性

• loaders能够串联，他们应用于管道资源，最后的loader将返回javascript，其它的可返回任意格式（传递给下一个loader）
• loaders 能够同步也能够异步
• loaders在nodejs下运行而且能够作一切可能的事
• loader接受参数，可用于配置里
• loaders能够绑定到extension/RegExps 配置
• loaders 能够经过npm发布和安装
• 正常的模块儿能够处处一个loader除了
• loaders 能够访问配置
• 插件能够给loaders更多的特性
• loaders能够释听任意额外的文件

若是你对loader的例子感兴趣能够去看下现有的loader列表

解析loaders

loaders的解析相似模块儿，一个loader模块会导出一个方法而且可被nodejs写为可兼容的javascript，一般状况下经过npm来管理loaders，但你也能够把loader放在本身的应用里

引用loaders

按照惯例，虽然不是必须的，但loaders一般被命名为XXX-loader, XXX是上下文名称，好比json-loader.
你可能引用loaders经过完整的（真实的）名字例如（json-loader)或者经过他的速记名（.json)
loader的名称约定和优先级搜索是经过webpack内置api esolveLoader.moduleTemplates所定义
loader的名称约定颇有用处，特别是当你经过require()声明来引用的时候，下面会讲到用法

安装loaders

若是这个loader能够在npm上安装，你能够安装这个loader经过

$ npm install xxx-loader --save

或者

$ npm install xxx-loader --save-dev

用法

有不少种方法在你的app中使用loaders

• 明确的require声明(在想要试用的js文件夹里直接加载)
• 经过配置文件配置
• 经过CLI配置

require

提示：若是能够的话尽可能不要使用require ，若是你想让你的脚本可运行在服务端和客户端（nodejs和浏览器）使用约定配置文件来配置

经过require声明（define，require.ensure,等等）来加载指定的loaders ，使用!来分割资源loaders，每一部分会被解析到当前的文件

能够在配置文件里经过加!前缀这种规则重写任意的loader

require("./loader!./dir/file.txt");

require("jade!./template.jade");
 
require("!style!css!less!bootstrap/less/bootstrap.less");

配置文件

你能够经过正则在配置文件里绑定loaders

{
    module: {
        loaders: [
            { test: /\.jade$/, loader: "jade" },
            // => "jade" loader 用于.jade文件

            { test: /\.css$/, loader: "style!css" },
            // => "style" 和 "css" loader 用于 ".css" 文件
            //另外一种语法
            { test: /\.css$/, loaders: ["style", "css"] },
        ]
    }
}

CLI(命令行界面)

CLI
能够经过命令行来绑定加载器

$ webpack --module-bind jade --module-bind 'css=style!css'
 // 使用loader'jade'来加载'.jade'的文件 ,使用loaders 'style'和'css'加载'.css'文件

查询参数

loader可使用查询参数经过字符串（像web上的同样）查询字符串被插在?后面例如url-loader?mimetype=image/png.

提示：查询参数的格式由loader决定，查看loader格式文档大多数的loaders接受以下格式的参数形式（?key=value&key2=value2）和JSON 对象格式 (?{"key":"value","key2":"value2"}).

require里

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

配置文件里

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

或者

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

CLI方式

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

我的理解

以上文段皆翻译自webpack官网如有错误请指正，接下来讲下我的对loader的理解，我以为loader是一个很于意思的功能，webpack其实运行在node下的一个编译站，她能够将各类个样的文件打包起来，包括图片呀，css呀，视频呀，但不管怎么打包最后导出的都是javascrit，可是咱们最终被客户端拉出的页面须要css的渲染 须要图片的路径，而loader她能够把各类各样的资源文件进行转变编译，最后用正确的格式加载到浏览器中，好比css被转换为style插入到页面，图片被转换为base64格式