html loader使用方法,webpack中loader的使用方法,以及几个常用loader的应用小实例

loader:是webpack用来预处理模块的,在一个模块被引入之前,会预先使用loader处理模块的内容。

可能,你会遇到当你用webpack打包的时候,提示你需要一个loader来处理文件,那webpack中的loader就是帮助预处理下模块中的内容。

默认webpack只会处理js代码,所以当我们想要去打包其他内容时,让webpack处理其他类型的内容,就要使用相应的loader。

##使用方法:

####1、在配置文件中(我的是webpack.config.js)加入module属性,该属性是一个对象,在这个属性中有一个rules字段。

先看一下例子,然后再解释

module:{

rules:[{

test:/\.js$/,

use:[{

loader:'babel-loader',

options:{

presets:['react']

}

}]

}]

}

我们可以看到rules属性的属性值为一个数组,每一个数组成员都是一个对象,可以配置不同的规则

test:test后是一个正则表达式,匹配不同的文件类型

use:在这个规则中,当你匹配了这个文件后,使用什么样的loader去处理匹配到的文件,use接收的是一个数组,意味着当他匹配到文件后,它可以启用很多的loader去处理文件的内容

use中可以有字符串和对象,当我们需要对loader进行额外的配置时,需要用到对象,如果我们使用的是loader默认的配置,就直接字符串(对应的loader)即可

上面的例子中,因为我们需要对设置预设,所以就将其放在了对象中,该对象中

loader:后面是需要的loader

options:{}对应的loader进行的一些配置

当然,还会有其他的一些属性比如(exclude、include等),这里就不再详细赘述

####2、使用这些loader前,我们还需要先下载好和这个loader相关的一些包,所以在你的命令行中使用 npmi-D +要安装的模块名(执行完之后,在package.json中就多了对应的包)

####3、然后就是运行了。

当然这只是loader使用时需要准备的大致东西,但每个loader的使用还要具体来说,下面我们举几个常用的例子,把步骤写一下

###一、webpack处理jsx内容

1、因为需要用到react,所以先安装react和react-dom库,所以执行下面的命令(注意如果还没有安装依赖,要先执行npmi,这条命令,会自动到package.json中查看devDependencies和dependencies中声明了哪些包,然后会先把这些包安装好)

npmi-Sreactreact-dom

2、在入口文件(我这里使用index.js)中引入上面的两个库

importReact from'react';

importReactDOM from'react-dom';

然后就可以使用相应的jsx语句了

ReactDOM.render(

React

,

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/533721.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linq查询不包含某个值的记录_MySQL行(记录)的详细操作

阅读目录一 介绍二 插入数据INSERT三 更新数据UPDATE四 删除数据DELETE五 查询数据SELECT六 权限管理一 介绍MySQL数据操作: DML在MySQL管理软件中,可以通过SQL语句中的DML语言来实现数据的操作,包括使用INSERT实现数据的插入UPDATE实现数据的…

听课评课记录计算机应用,教师听课的评语(精选10篇)

教师听课的评语(精选10篇)通过引导学生提炼信息提出问题解决问题,使学生再次感受了数学与现实生活的密切联系,经历了运用乘法口诀求商的计算方法的形成过程,培养了学生对知识的迁移能力。下面是小编整理的教师听课的评语(精选10篇)&#xff0…

java音频实时传输_会议室智能系统建设方案,实时远程视频协作

2019年,预计会议协作需求将持续增长,创建多功能会议室促进本地、异地协作仍然是一个强大的趋势。无论空间大小或距离远近,政府部门、企业单位以及团体组织为了实现决策指令畅通、管理层次分明,需要通过对会议室环境、多功能会议系…

依赖 netty spring_十分钟带你了解Spring的七大知识点,程序员必了解

Spring框架自诞生以来一直备受开发者青睐,有人亲切的称之为:Spring 全家桶。它包括SpringMVC、SpringBoot、Spring Cloud、Spring Cloud Dataflow等解决方案。很多研发人员把spring看作心目中最好的java项目,没有之一。所以这是重点也是难点&…

南通大学计算机组成原理期末考试题,南通大学计算机组成原理期末考试范围.docx...

南通大学计算机组成原理期末考试范围计算机组成原理选择填空题 15分填空题 20 分计算题 50分设计题 15分第一章计算机的主要性能指标冯诺依曼型计算机的体系结构、组成部分控制器的基本任务计算机系统的层次结构第二章数据与文字的表示方法定点数的表示方法数的机器码表示校验码…

android实现手机拍照以及图片预览功能_手机系统将有A/B分区?Android 11这些变化你关注过吗...

跳票让Android 11沉淀下来并吸引了更多的消费者,在iPhone SE大规模进军主流消费市场的今天,Android这边难道不想依靠新系统扳回一局吗?在人们感叹iOS一些功能似曾相似的时候,Android 11新的突破与创新格外让人振奋。01Android 11欲…

小程序的点赞功能能和浏览次数功能_扫码点餐小程序好用吗?小程序还能实现哪些功能?...

有不少的餐厅现在都可以用小程序扫码点餐了,为什么现在很少用公众号点餐了?原因其实很简单,用公众号点餐用户还要关注公众号,第二个就是在于公众号每天发消息很烦,而小程序则没有这样的烦恼,只在使用的时候…

word计算机课教学反思,《WORD》初中信息技术的教学反思

《WORD》初中信息技术的教学反思本节课在建构主义学习理论指导下,采用“任务驱动”教学策略,借助多媒体课件,对学生实施研究式自主学习教学模式,教学中注重培养学生分析问题、解决问题的能力。通过学习和实际操作,培养…

simulink中mask设置_(实现BPSK学习Verilog)1. Simulink仿真实现

欢迎关注BUG记录知乎专栏和BUG记录公众号,关注BUG记录公众号回复101获取本文使用的Simulink仿真文件微信号:BugRec由于最近研究某个高速接口没什么实质性的突破,实在写不出太好的东西,所以就写点更为基础的东西分享给大家&#xf…

arima模型_[不说人话系列]-ARIMA模型

看文献的时候看到几个统计推理的模型,想要大概了解,想做个系列,记录自己胡说八道的数理笔记过程。如有错误,感谢您指正。文前感谢冯小姐详细认真的技术援助!1- 名称简称:ARIMA模型英文名:Auto r…

认识计算机网络试讲稿,操作系统简介试讲教案.pdf

学习必备 欢迎下载课题 操作系统简介内容章节:第二章第一节 课型:新授课教学时间: 本节内容共授课2课时 授课班级:学习者分析:学生通过第一章的学习,对计算机的软、硬件知识有了初步的了解,。但由于学生普遍对计算机理…

pcb天线和纯铜天线_如何简化天线设计?相控阵波束成形IC来助您

为提高性能,无线通信和雷达系统对天线架构的需求不断增长。只有那些功耗低于传统机械操纵碟形天线的天线才能实现许多新的应用。除了这些要求以外,还需要针对新的威胁或新的用户快速重新定位,传输多个数据流,并以超低的成本……正…

c语言贪吃蛇_C语言贪吃蛇完整代码

#include #include #include //windows编程头文件#include #include //控制台输入输出头文件#ifndef __cplusplustypedef char bool;#define false 0#define true 1#endif//将光标移动到控制台的(x,y)坐标点处void gotoxy(int x, int y){COORD coord;coord.X x;coord.Y y;Se…

上海市计算机一级客观题,2012年上海市高校计算机等级考试(一级)模拟卷客观题...

2012年上海市高校计算机等级考试(一级)模拟卷客观题 (5页)本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦!11.9 积分关于防火墙,以下说法不正确的是____A____。下列属于视频制作的常用软件的…

百度云盘云知梦php_教你搭建私有云盘,简单快速,完全傻瓜式!不限速,永久有效!...

免费的云盘服务有很多,但是总感觉把重要文件存在上面不安全,动不动就跑路或者限速。辛辛苦苦收集的学习资料,一夜直接可能就会付诸东流。最稳妥的方式是存放在本地硬盘中,但是要进行共享或者不同设备之间进行交换,就显…

结束 txt进程_Python多进程抓取拉钩网十万数据

转载:Python多进程抓取拉钩网十万数据准备安装Mongodb数据库其实不是一定要使用MongoDB,大家完全可以使用MySQL或者Redis,全看大家喜好。这篇文章我们的例子是Mongodb,所以大家需要下载它。在Windows中。由于MongoDB默认的数据目录…

计算机休眠怎么唤醒,电脑休眠后,就无法唤醒了?怎么办?快速教你解决这个问题...

电脑是目前人们生活、工作中使用最多的电子产品之一,我们都经常会使用到电脑。但是如果电脑在一段时间后不使用,电脑就会自动进入休眠状态,而在进入休眠状态的之后,只有当我们将电脑唤醒了,电脑才能够回到菜单界面当中…

python爬虫爬取音乐单曲_Python爬取qq音乐的过程实例

一、前言qq music上的音乐还是不少的,有些时候想要下载好听的音乐,但有每次在网页下载都是烦人的登录什么的。于是,来了个qqmusic的爬虫。至少我觉得for循环爬虫,最核心的应该就是找到待爬元素所在url吧。二、Python爬取QQ音乐单曲…

python按照日期筛选数据_日期时间范围上的Python筛选器?

我有一些包含开始时间和结束时间的数据(datetime格式),我想根据更受限制的日期范围计算持续时间(以小时为单位)。但到目前为止,我还没有成功。(对python还是个业余爱好者。) 示例&am…

计算机2级u盘作弊,一种带LED指示灯的计算机考试防U盘作弊装置制造方法及图纸...

【技术实现步骤摘要】一种带LED指示灯的计算机考试防U盘作弊装置本申请是申请日为2016年4月1日,申请号为2016102009851,专利技术名称为“一种防U盘舞弊的计算机考试装置”的专利技术专利的分案申请。本专利技术涉及一种防止计算机考试抄袭作弊的装置&…