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

,