概念
webpack默认是知道如何处理JS模块的，但是不知道如何处理其他类型的模块，比如图片等。这个时候就需要loader来预处理文件，它允许你打包除 JavaScript 之外的任何静态资源。
如何配置loader
我们需要在配置文件里，配置loader来告诉webpack如何处理其他类型的文件。
假如我们需要打包一个jpg类型的静态文件，那么我们可以这样配置
module.exports = {
mode:"development",
entry: {
main:"./src/index.js"
},
module:[{
test: '/\.jpg$/', //这里的配置是告诉webpack,打包的时候如果遇到jpg结尾的静态文件，不用迷茫
use: { //用file-loader这个loader来处理就可以了
loader: 'file-loader'
}
}],
output: {
path: path.resolve(__dirname,'dist'),
filename: 'bundle.js'
}
}
但是，单单这样配置还不够，因为我们还需要安装这个file-loader npm install file-loader -D
然后，当我们再次运行打包命令的时候，file-loader会怎么做呢？
第一步：把jpg文件移动到dist文件夹下，得到图片相对于dist目录的名称
第二步：把这个名称作为返回值，返回给我们引入图片模块的变量
这就是file-loader底层处理图片类型的文件打包的一个流程
当然，file-loader 可以处理的文件不仅仅是jpg,还可以处理任何类型的静态文件，比如.txt .png .exel .gif等等
其实loader就是一个打包的方案，它知道对于某一类特定的文件，webpack应该如何的去打包，webpack本身不知道如何处理非JS后缀的模块，但是loader知道,webpack去求助于loader就行了
当我们打包一个 jpg文件的时候，我们希望打包出的文件名跟打包之前的名字保持一致，我们可以通过file-loader的(placeholder)占位符来实现
[ext]就是指 jpg这个后缀字符串
-
当然除了 name外，我们还可以指定文件被打包后的存放位置，截至到现在，我们的图片打包后，都是直接在dist文件夹下的，如果我们想要把图片打包后放在dist文件夹下的images文件夹里呢？可以像下边这样写
image.png
url-loader 的用法
-
url-loader能实现file-loader能实现的功能，而且它本身也有一些独特的地方
image.png
当我们使用
url-loader直接去打包的时候，发现，jpg文件并没有被打包到dist文件夹下作为单独图片文件，而是以base64字符串的形式，被打包到了bundle.js文件里。
但是这样去用，有好处也有坏处
好处是：图片被直接打包到了JS文件里，当JS文件加载好以后，页面上图片就出来了，不用额外去请求一个图片的地址了，少了一次HTTP请求，但是弊端就是如果这个文件特别的大，打包生成的JS文件就会特别的大，那么加载JS文件的时间就会很长，所以在一开始很长的时间里，页面上什么东西都显示不出来。
那么url-loader 最佳的使用方式是什么呢？ 如果一个图片非常小，比如只有 1-2kb，那么这个图片以base64的形式打包到js文件里，是非常好的选择，没必要让这么小的图片再发一次HTTP请求，很浪费时间，如果图片很大的话，那么就像file-loader一样，把图片打包到dist目录下，而不是bundle.js里。
那么怎么实现这种最佳方式呢？
