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语法文件，以便后续打包处理，需要注意的是，在我们需要使用