浅析file-loader是什么及如何使用、file-loader与url-loader分别解决了什么问题以及其两者的联系与区别

一、file-loader 是什么

1、什么是 file-loader

　　简单来说，file-loader 就是在JS代码里 import/require 一个文件时，会将该文件生成到输出目录，并且在JS代码里返回该文件的地址。

2、如何使用

// 1、安装 file-loader
npm install file-loader --save-dev

// 2、配置 webapck
// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {},
          },
        ],
      },
    ],
  },
};

// 3、引入一个文件，可以是 import（或 require）
import logo from '../assets/image/logo.png';
console.log('logo的值: ', logo); // 打印一下看看 logo 是什么

　　PS：关于 file-loader 的 options，这里就不多说了，见：https://webpack.js.org/loaders/file-loader/#options

　　简单三步就搞定了，然后执行 webpack 打包之后，dist 目录下会生成一个打包好的 bundle.js，这个就不多说了。如果使用了 file-loader， dist 目录这时候会生成我们用到的那个文件，在这里也就是 logo.png。

　　默认情况下，生成到 dist 目录的文件不会是原文件名，而是：[原文件内容的 MD5 哈希值].[原文件扩展名]。回到上文，console.log(logo) 会打印什么呢，我们执 bundle.js 看看：

node dist/bundle.js

// 输出结果是：
logo的值:  dab1fd6b179f2dd87254d6e0f9f8efab.png

　　如上所说，会返回文件的地址

二、file-loader与url-loader的区别

　　url-loader和file-loader作用相似，不同之处在于处理不同大小图片时的方式：

1、file-loader在处理任何大小文件时，都会返回publicPath【指定资源的引用路径】；

　　这里返回的路径只是文件名，由hash值加上文件后缀。

　　可以通过下面的代码为css或js请求的资源【图片、字体等】指定请求位置。

const path = require('path');
module.exports = {
  entry:'./src/index.js',
  output:{
    filename:'bundle.js',
    path:path.resolve(__dirname,'dist'),
    publicPath:'dist/'
  }
}

　　此时图片路径为：dist/f80262b63f8da8dc5d1e8c67f34dc56e.jpg

2、url-loader可以设置一个阈值，文件大于阈值时，与file-loader一样返回publicPath，小于阈值时，返回文件base64形式编码

3、url-loader和file-loader是什么关系呢？

　　简单地说，url-loader封装了file-loader。url-loader不依赖于file-loader，即使用url-loader时，只需要安装url-loader即可，不需要安装file-loader，因为url-loader内置了file-loader。

4、url的工作情况分两种情况：

（1）文件大小小于limit参数，url-loader将会把文件转为DataURL；

（2）文件大小大于limit，url-loader会调用file-loader进行处理，参数也会直接传给file-loader。因此我们只需要安装url-loader即可

三、理解 file-loader 和 url-loader 解决的不同问题场景

　　如果我们希望在页面引入图片（包括 img 的 src 和 background 的 url）。当我们基于webpack进行开发时，引入图片会遇到一些问题。

　　其中一个就是引用路径的问题。拿background样式用url引入背景图来说，我们都知道，webpack最终会将各个模块打包成一个文件，因此我们样式中的url路径是相对入口html页面的，而不是相对于原始css文件所在的路径的。这就会导致图片引入失败。这个问题是用file-loader解决的，file-loader可以解析项目中的url引入（不仅限于css），根据我们的配置，将图片拷贝到相应的路径，再根据我们的配置，修改打包后文件引用路径，使之指向正确的文件。

　　另外，如果图片较多，会发很多http请求，会降低页面性能。这个问题可以通过url-loader解决。url-loader会将引入的图片编码，生成dataURl。相当于把图片数据翻译成一串字符。再把这串字符打包到文件中，最终只需要引入这个文件就能访问图片了。当然，如果图片较大，编码会消耗性能。因此url-loader提供了一个limit参数，小于limit字节的文件会被转为DataURl，大于limit的还会使用file-loader进行copy。