webpack从0到手写webpack_06

使用Loader打包静态资源—图片

上一篇我们打包图片的名字，实际上被打包成了一个很长的字符串。我们需要打包的图片名字不变，这个时候我们就需要对webpack进行配置了。我们使用loader的使用参数，这个参数我们可以写到额外的配置项options中。这个配置项中我们可以写一些内容，比如说我希望打包生成的名字和打包之前一摸一样

运行打包命令，生成的bundle文件中有一张和原图名称一样的图片

[name] [hash] [ext] 这些称为占位符
文件打包的名称可以自己进行配置，我想加一个下划线拼接哈希值，如下

我现在图片被打包到bundle下，我现在想要打包到bundle下的images文件夹中,可以再配置一个参数

此时打包后的结果就是我们预期想要的。

我们打开bundle下面的html文件，也能正常运行

有一个loader功能与file-loader类似，也可以打包图片资源，它就是url-loader
我们首先删除bundle文件夹下的部分文件

在webpack.config.js使用url-loader

下载 cnpm install url-loader -D

执行打包命令，打包成功了，但是我们发现，图片根本没有打包进来，但是打开index.html发现，图片虽然没有被打包进来，但是我图片还是能照样在浏览器上显示的



打开浏览器查看图片我们可以发现这张图片并不是引入一个外部的地址，而是一个base64的内容，这是什么情况呢？

url-loader将图片转换成了base64的字符串，然后直接放到bundle.js中，而不是单独生成一个图片文件，实际上如果url-loader这么使用的话，是不合理的好处是将打包的图片放入到了bundle.js中，少了一次http请求，但是带来的问题是：如果图片资源特别大，打包生成的js文件也就会特别的大，加载的时间就会很长，一段时间内，页面什么也显示不出来。所以url-loader最佳的使用方式是什么呢？如果图片资源特别小，几KB的话打包到bundle.js中是一个非常好的选择，没必要为几KB的资源再发一次请求，浪费时间。如果图片非常道的话，就像file-loader一样，打包到单独的文件夹中，这样bundle.js就可以快速的加载完成，页面很快就可以展示出来，在options中配置limit:10240(200KB),如果图片小于10KB，就直接打包放入bundle.js中，如果大于10KB就单独放到生成的images文件夹中，

执行执行打包命令，就会在bundle下生成images文件夹，里面有一张打包后的图片