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

webpack构建与loaders的更多相关文章

  1. webpack构建vue项目(配置篇)

    最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出 ...

  2. webpack构建具备版本管理能力的项目

    webpack是时下十分流行的编译和打包工具,它提供一种可扩展的loader的方式,简单的配置,便可以编译打包各类型的文件,包括js.css.image.font.html,以及各种预编译语言都不在话 ...

  3. (24/24) webpack小案例--自己动手用webpack构建一个React的开发环境

    通过前面的学习,对webpack有了更深的认识,故此节我们就利用前面相关知识自己动手用webpack构建一个React的开发环境,就算是一个小案例吧. 注:此处使用的开发工具是Webstorm. 1. ...

  4. 深入浅出的webpack构建工具--webpack4+vue搭建环境 (十三)

    深入浅出的webpack构建工具--webpack4+vue搭建环境 (十三) 从上面一系列的webpack配置的学习,我们现在来使用webpack来搭建vue的开发环境.首先我们来设想下我们的项目的 ...

  5. 深入浅出的webpack构建工具---HappyPack优化构建(九)

    阅读目录 一:什么是HappyPack? 作用是什么? 二:如何在配置中使用HappyPack? 回到顶部 一:什么是HappyPack? 作用是什么? Webpack是允许在NodeJS中的,它是单 ...

  6. 深入浅出的webpack构建工具---DevServer配置项(二)

    深入浅出的webpack构建工具---DevServer配置项(二) 阅读目录 DevServer配置项 1. contentBase 2. port 3. host 4. headers 5. hi ...

  7. 深入浅出的webpack构建工具---webpack基本配置(一)

    深入浅出的webpack构建工具---webpack基本配置(一) 阅读目录 一:webpack入门构建: 1. 安装webpack到全局 2. 安装webpack到本项目. 3. 如何使用webpa ...

  8. webpack构建工具快速上手指南

    最近在研究react项目,接触到webpack打包工具.刚接触的时候一脸茫然,经过最近的学习,下面我来带大家开启webpack入门之旅. webpack是什么 webpack是近期最火的一款模块加载器 ...

  9. 用React & Webpack构建前端新闻网页

    这是一篇给初学者的教程, 在这篇教程中我们将通过构建一个 Hacker News 的前端页面来学习 React 与 Webpack. 它不会覆盖所有的技术细节, 因此它不会使一个初学者变成大师, 但希 ...

随机推荐

  1. C# Current thread must be set to single thread apartment (STA) mode before OLE calls can be made

    将箭头指向部分替换为编译器报错的内容即可. 参考文章:https://www.experts-exchange.com/questions/28238490/C-help-needed-Current ...

  2. android测试(转)

    1.冒烟测试 跟web端的测试流程一样,你拿到一个你们开发做出来的apk首先得去冒烟,也就是保证他的稳定性,指定时间内不会崩溃.这款原生sdk自带的monkey可以当做我们的测试工具.就跟我之前博客所 ...

  3. 重学STM32----(一)

    在这学习stm32半年的时间中,虽然明显的感觉到自己在进步,但是还是发现学习方法的错误.由于急功近利的性格,在学习stm32之初,我选择了最简单的办法,用库函数来写程序,而且也由于我这急功近利的性格, ...

  4. Linux远程文件传输

    linux系统中,难免会遇到一些要将某文件通过网络传送给其他主机的情况,而恰好两台主机 都是linux系统的时候,我们就可以直接使用scp命令来传输文件到另一台主机了. scp命令用于在网络中安全的传 ...

  5. 面试题目“ABCDE × 4 = EDCBA”新解法

    ABCDE*4=EDCBA 在面试宝典上面看到的一道题目,也是一道老掉牙的题目了,题目详情:一个五位数字ABCDE*4=EDCBA,这五个数字不重复,请编程求出来. 网上流传的代码都是对5位数ABCD ...

  6. 程序猿必要10免费的钱jquery小工具

    本周带来10款免费的jquery插件.假设你也有好的作品,欢迎分享到社区中来,在得到帮助的同一时候,也能与很多其它人分享来自你的作品. jQuery导航菜单置顶插件 - stickyUp . 在线演示 ...

  7. 初略 异步IO

    import asyncio asyncio.coroutine() from concurrent.futures import ThreadPoolExecutor def task(): pri ...

  8. 备份软件 FreeFileSync 怎么用

    现在,学会使用备份软件对电脑中的重要资料定期进行备份,已经成为许多办公一族的“必修课”.其中,FreeFileSync 作为一款由国外开源社区开发的免费备份软件,由于其支持跨平台(Windows.Li ...

  9. REST easy with kbmMW #17 – Database 6 – Existing databases

    kbmMW已经包含了非常精细的功能来确定和解释数据库中表的元数据. 在下一版本中,这个功能将得到进一步加强,可以导入现有数据库中的表,自动创建与表相匹配的ORM实体类. 这意味着你能够使用kbmMW的 ...

  10. Unity 下集成第三方原生 SDK,以极光厂商通道为例

    Unity中集成三方SDK有两种方式: Unity 项目开发中时常有集成 Android 第三方 SDK 的需求,比如接入第三方推送,分享等功能.而第三方 SDK 的集成文档提到的往往是基于原生 An ...