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代码，