webpack中常见loader的作用和使用方法

webpack中常见的loader有哪些？它们的作用是什么呢？
之前我们有说到，webpack默认情况下只认识.js结尾的文件，要打包其它类型的文件，则我们需要在webpack.config.js文件中进行配置，只有通过正确的配置后，当webpack进行打包时才能对其它类型的文件进行正确的打包，那我们最常打包的文件类型有哪些呢？
1.file-loader
file-loader可以用于图片资源的打包配置，当我们只配置loader时，那打包好的图片资源默认是存放在输出文件所在的同级目录下，并且名称格式是：hash值.文件后缀，这样当我们打包多张图片资源时，就无法分清楚哪个打包好的图片资源是由哪张图片打包而来，只能打开该资源才能知道,而且打包好的图片资源是分散的。为了便于区分和统一管理，我们可以在配置项loader后面，再配置一个options配置对象，在这个options配置对象中，我们可以配置图片打包好之后的名称，存放的位置等。
2.url-loader
url-loader的作用跟file-loader差不多，但它比file-loader更强大，它不止能实现file-loader的打包功能，它还比file-loader多一个limit配置项，这个limit配置就是配置图片资源的大小的，即当我们的图片资源大于这个限定值时，则打包后的图片资源放入单独的文件夹进行存放，如果打包后的图片资源小于这个限定值，则直接将该图片资源放入出口js文件中。
3.sass-loader
当我们打包sass语法编写的css文件时，sass-loader的作用就是将该css文件翻译成纯css语法文件，以便后续打包处理，需要注意的是，在我们需要使用sass-loader时，在安装sass-loader时还需要安装node-sass。
4.css-loader
我们的css打包文件中可能会引入其它的css文件，而css-loader的作用就相当于把这些相互依赖的css文件合并成一个css文件。
5.style-loader
我们需要打包的css文件在经过sass-loader的翻译，css-loader的合并之后，style-loader的作用就是把合并后的css文件挂载到页面的head中来渲染出页面的样式。
6.postcss-loader
postcss-loader是一个辅助性loader，它是针对css3中新增样式属性而存在的，它可以将css样式文件中的css3样式属性在挂载到页面上时，自动在新样式属性前添加上像-webkit-，-moz-这样的厂商前缀，但是它的使用还需要一个autoprefixer插件配合使用，我们配置postcss-loader的方式跟配置其它loader的方式一样，而引入autoprefixer插件则需要在postcss.config.js文件中引入：
这里就是配置loader

这里则是配置autoprefixer插件。