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