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）

 

 

css-loader:当匹配到css文件时，就要用css-loader对css样式进行处理

style-loader:当有样式被打包到我们的入口文件时，style-loader会把打包的样式插入到我们的HTML结构中

在配置文件中进行相应的配置，在module，中rules中加入下面的规则

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

use中的style-loader和css-loader顺序不能变，因为loader的处理有一个优先级，从右到左、从下到上

 

 

专门处理图片的loader是file-loader

url-loader会把我们的图片使用base64的形式编码成另外一种字符串

{test: /\.(png|jpg|gif|jpeg)$/,
	use: [
		{
		loader: 'url-loader',
		options: {
			limit: 8192
		}
		}
	　　]
	　　},

babel-loader，把ES6编译为ES5，把jsx编译为js代码，