loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。loader 可以将文件从不同的语言(如 TypeScript)转换为 JavaScript,或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件!

在深入学习对loader的编写之前,我们先熟悉下loader的常见配置规则。常见的有两种配置规则:

规则1:

loader配置中options的值可以在loader执行过程中获取到,进行相应处理,也可以直接在loader路径中添加query参数如下配置:

rules: [
{ test: /\.text$/,
loader: 'text-loader?name=1'//如果配置了options选项时,在路径中添加的query参数就无法获取到了
}
]

你还可以使用 resolveLoader.modules 配置,webpack 将会从这些目录中搜索这些 loaders。例如,如果你的项目中有一个 /loaders 本地目录,目录中有一个loader文件名为text-loader.js,那么可以这样配置:

resolveLoader: {
modules: [
'node_modules',
path.resolve(__dirname, 'loaders')
]
},
module: {
rules: [ { test: /\.text$/,
loader: 'text-loader'//如果node_modules目录中不存在,那么会取loaders目录中查找
}
] }

如果你想对某一类型的文件匹配多个loader,可以按照下列规则配置,多个loader模块用!分割,并且实际loader执行顺序是从右往左,多个loader串联的作用和如何使用参考下篇文档。

{
test: /\.scss$/,
loader:'style-loader!css-loader!sass-loader'
}

规则2:

如果想匹配多个loader,还可以使用use配置数组,实际loader执行顺序是从下往上

{
test: /\.scss$/,
use:[
{
loader:'style-loader',
options:{}
},
{
    loader:'css-loader'
   }, {
    loader:'sass-loader'
   } ]
}

如果对于引入的loader不做格外的配置,那么可以在use数组中添加loader名即可:

{
test: /\.scss$/,
use:['style-loader','css-loader','sass-loader']
}

在熟悉了对loader的基本配置规则之后,那么我们就开始学习如何编写自己的loader吧

webpack3.0加载器loader配置及编写(二)

webpack3.0之loader配置及编写(一)的更多相关文章

  1. webpack-dev-server配置指南(使用webpack3.0)

    最近正在研究webpack,听说webpack可以自己搭建一个小型的服务器(使用过vue-cli的朋友应该都见识到过),所以迫不及待的想要尝试一下.不过,在实际操作中发现,用webpack搭建服务器仍 ...

  2. webpack-dev-server配置指南webpack3.0

    最近正在研究webpack,听说webpack可以自己搭建一个小型的服务器(使用过vue-cli的朋友应该都见识到过),所以迫不及待的想要尝试一下.不过,在实际操作中发现,用webpack搭建服务器仍 ...

  3. Webpack3.0入门指南

    前言 本文是基于我厂基友的Webpack学习系列(一)初学者使用教程 这篇文章做构建.可能基友的文章是基于Mac环境,我是windows环境,在学习时遇到了很多坑,询问基友,他让我搞个基于window ...

  4. Tomcat6.0数据库连接池配置

    http://blog.163.com/magicc_love/blog/static/185853662201111101130969/ oracle驱动包Tomcat 6.0配置oracle数据库 ...

  5. resin4.0.25 安装配置 及结合eclipse开发

    resin4.0.25 安装配置 及结合eclipse开发 本文大部分内容是对官网的翻译,及自己配置后的一些体会. 一.  基于win  ,resin基本安装1,安装jdk1.6或更高版本2,配置环境 ...

  6. JDK1.6.0+Tomcat6.0的安装配置

    JDK1.6.0+Tomcat6.0的安装配置是如何进行的呢?我们按照下面几个步骤来: 1.安装JDK 这是进行JSP开发的重要一步,也是安装JSP引擎(Tomcat.Resin.Weblogic等) ...

  7. 一劳永逸Java环境配置,以及编写我的第一个Java程序

    Java环境配置,以及编写我的第一个Java程序 配置步骤 1.下载jdk 2.安装步骤 3.配置环境 4.我的第一个Java程序 配置步骤 网上的教程有很多,方法也都不尽相同.今天我就分享一下我的配 ...

  8. 烂泥:zabbix3.0安装与配置

    本文由ilanniweb提供友情赞助,首发于烂泥行天下 想要获得更多的文章,可以关注我的微信ilanniweb 这个月又快过完了,最近也比较忙,没时间写文章,今天挤点时间把zabbix3.0安装与配置 ...

  9. mysql 5.0.46安装配置

    http://os.chinaunix.net/a2008/0801/986/000000986346.shtml RPM包和源码包存放位置 /usr/local/src 源码包编译安装位置(pref ...

随机推荐

  1. 在CentOS7下从0开始搭建docker并发布tomcat项目

    一切从0开始,我也是个小白: 1.检查你的系统是不是高于3.8的内核,如果没有请升级CentOS7或者Ubuntu 14 #uname -a 2.CentOS7下安装docker #yum -y in ...

  2. What Drives the Need for Database Sharding? DATABASE SHARDING

    wIO瓶颈 http://www.agildata.com/database-sharding/ What Drives the Need for Database Sharding? Databas ...

  3. Scanline Fill Algorithm

    https://www.sccs.swarthmore.edu/users/02/jill/graphics/hw3/hw3.html http://web.cs.ucdavis.edu/~ma/EC ...

  4. Python开发【项目】:生产环境下实时统计网站访问日志信息

    日志实时分析系统 生产环境下有需求:要每搁五分钟统计下这段时间内的网站访问量.UV.独立IP等信息,用直观的数据表格表现出来 环境描述: 网站为Nginx服务,系统每日凌晨会对日志进行分割,拷贝到其他 ...

  5. python装饰器的应用案例

    目录 一.过程编程 二.面向装饰器和函数的编程 三.二的加强版 一.过程编程 (一)需求:打印菱形 1.空格.*号组成的菱形 2.输入菱形上半部分的行数即可打印 3.支持循环输入 (二)代码 from ...

  6. 数据库触发器,禁止DDL操作

    CREATE TRIGGER [Object_Change_Trigger_DDL] ON DATABASE FOR ALTER_TABLE,DROP_TABLE,CREATE_TABLE,CREAT ...

  7. Openstack(十)部署nova服务(计算节点)

    在计算节点安装 10.1安装nova计算服务 # 阿里云源详见2.3配置 # yum install openstack-nova-compute 10.2配置nova计算服务 10.2.1配置nov ...

  8. PAT 1056 Mice and Rice[难][不理解]

    1056 Mice and Rice(25 分) Mice and Rice is the name of a programming contest in which each programmer ...

  9. 1.2 Getting Started--Naming Conventions(命名约定)

    Ember.js使用一个运行时解析器去连接你的对象而没有很多样板文件.作为一个开发者,如果你把code放到约定好的位置这个解析器会自动工作.   一.The Application     1. 当你 ...

  10. cocos代码研究(23)Widget子类ScrollView学习笔记

    基础理论 一个能够被用户触摸滚动的一个层次型布局容器视图,允许其尺寸大于屏幕显示的物理尺寸,其内部维护有一个布局用于水平的或垂直的存放子节点.继承自 Layout,被 ListView 继承. 代码实 ...