file-loader和url-loader的使用与区别

一、为什么要使用file-loader或者url-loader

webpack是不能识别非js文件的，默认只会处理js文件关系。举个例子看看：

二、file-loader的使用

使用file-loader去解析，首先 npm install file-loader，在webpack.config.js文件进行配置

 可以看到，添加了file-loader配置后，打包成功了。在bundle.js中看到了打包文件：

 总结：file-loader 可以指定要复制和放置资源文件的位置，以及如何使用版本哈希命名以获得更好的缓存。此外，这意味着 你可以就近管理图片文件，可以使用相对路径而不用担心部署时 URL 的问题。使用正确的配置，webpack 将会在打包输出中自动重写文件路径为正确的 URL。

三、url-loader的使用

 将上述的file-loader更换为url-loader，看看打包的结果：

 总结： url-loader 允许你有条件地将文件转换为内联的 base-64 URL (当文件小于给定的阈值)。

四、file-loader和url-loader的区别

两个图片的大小如下：

make.jpg:119kb

remake.jpg:38.1kb

总结：url-loader 可以识别图片的大小，然后把图片转换成base64，从而减少代码的体积。如果图片超过设定的现在，就还是用 file-loader来处理。

参考文档链接