使用webpack loader加载器-阿里云开发者社区

开发者社区> 开发与运维> 正文

使用webpack loader加载器

简介: 了解webpack请移步webpack初识! 什么是loader loaders 用于转换应用程序的资源文件,他们是运行在nodejs下的函数 使用参数来获取一个资源的来源并且返回一个新的来源(资源的位置),例如:你可以使用loader来告诉webpack去加载一个coffeescript或者j...

了解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格式

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章