webpack3.0之loader配置及编写(一)
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配置及编写(一)的更多相关文章
- webpack-dev-server配置指南(使用webpack3.0)
最近正在研究webpack,听说webpack可以自己搭建一个小型的服务器(使用过vue-cli的朋友应该都见识到过),所以迫不及待的想要尝试一下.不过,在实际操作中发现,用webpack搭建服务器仍 ...
- webpack-dev-server配置指南webpack3.0
最近正在研究webpack,听说webpack可以自己搭建一个小型的服务器(使用过vue-cli的朋友应该都见识到过),所以迫不及待的想要尝试一下.不过,在实际操作中发现,用webpack搭建服务器仍 ...
- Webpack3.0入门指南
前言 本文是基于我厂基友的Webpack学习系列(一)初学者使用教程 这篇文章做构建.可能基友的文章是基于Mac环境,我是windows环境,在学习时遇到了很多坑,询问基友,他让我搞个基于window ...
- Tomcat6.0数据库连接池配置
http://blog.163.com/magicc_love/blog/static/185853662201111101130969/ oracle驱动包Tomcat 6.0配置oracle数据库 ...
- resin4.0.25 安装配置 及结合eclipse开发
resin4.0.25 安装配置 及结合eclipse开发 本文大部分内容是对官网的翻译,及自己配置后的一些体会. 一. 基于win ,resin基本安装1,安装jdk1.6或更高版本2,配置环境 ...
- JDK1.6.0+Tomcat6.0的安装配置
JDK1.6.0+Tomcat6.0的安装配置是如何进行的呢?我们按照下面几个步骤来: 1.安装JDK 这是进行JSP开发的重要一步,也是安装JSP引擎(Tomcat.Resin.Weblogic等) ...
- 一劳永逸Java环境配置,以及编写我的第一个Java程序
Java环境配置,以及编写我的第一个Java程序 配置步骤 1.下载jdk 2.安装步骤 3.配置环境 4.我的第一个Java程序 配置步骤 网上的教程有很多,方法也都不尽相同.今天我就分享一下我的配 ...
- 烂泥:zabbix3.0安装与配置
本文由ilanniweb提供友情赞助,首发于烂泥行天下 想要获得更多的文章,可以关注我的微信ilanniweb 这个月又快过完了,最近也比较忙,没时间写文章,今天挤点时间把zabbix3.0安装与配置 ...
- mysql 5.0.46安装配置
http://os.chinaunix.net/a2008/0801/986/000000986346.shtml RPM包和源码包存放位置 /usr/local/src 源码包编译安装位置(pref ...
随机推荐
- win10配置的静态/动态IP和 DNS的方法
1.配置静态IP和DNS netsh interface ip set address name="以太网" source=static addr=192.168.9.145 ma ...
- c# 调用声音文件
一.使用C#自带的SoundPlayer using System.Media; SoundPlayer sound = new SoundPlayer("声音.wav"); so ...
- Fatal error in launcher: Unable to create process using '"c:\python37\python3.exe" "C:\Python37\Scripts\pip3.exe" install opencv-python'
pip3.exe install opencv-python 报错: Fatal error in launcher: Unable to create process using '"c: ...
- ES_DEVOPS-1
When dealing with a large number of parallel operations in elasticsearch, such as search requests or ...
- Strongly connected---hdu4635(强联通分量)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4635 先判断图是否强连通.如果不是强连通的,那么缩点. 我们的目的是加最多的边,那么最后的图中,肯定两 ...
- Hadoop集群完全分布式坏境搭建
前言 上一篇我们讲解了Hadoop单节点的安装,并且已经通过VMware安装了一台CentOS 6.8的Linux系统,咱们本篇的目标就是要配置一个真正的完全分布式的Hadoop集群,闲言少叙,进入本 ...
- React Native专题-江清清
本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶相关讲解. 刚创建的React Native交流8群:533435865 欢迎各位大牛, ...
- IScroll5中文API整理,用法与参考
IScroll是移动页面上被使用的一款仿系统滚动插件.IScroll5相对于之前的IScroll4改进了许多,使得大家可以更方便的定制所需的功能了. 做项目的时候正好用到了这个插件,自己做了一下总结, ...
- PAT 1109 Group Photo[仿真][难]
1109 Group Photo(25 分) Formation is very important when taking a group photo. Given the rules of for ...
- 特定于类的内存管理---《C++必知必会》 条款36
我们可以量身定制 operator new 和 operator delete 用于某个类类型,而不是必须使用标准版的 operator new 和 operator delete. 注意:我们不可以 ...