file-loader：处理静态资源模块    【url-loader包含了所有file-loader的功能，并且还有处理base64格式图片的功能】

原理是把打包⼊⼝中识别出的资源模块，移动到输出⽬录，并且返回⼀个地址名称。如下图

webpack4.0核心概念（六）———— 图片和第三方字体的处理_数组


所以我们什么时候⽤file-loader呢？

场景：就是当我们需要模块，仅仅是从源代码挪移到打包⽬录，就可以使⽤file-loader来处理，

txt，svg，csv，excel，图⽚资源啦等等

file-loader

安装 

npm install file-loader -D

package.json中的配置

module: {
  rules: [{
    test: /\.(png|jpe?g|gif)$/,
    //use使⽤⼀个loader可以⽤对象，字符串，两个loader需要⽤数组
    use: {
      loader: "file-loader",
      // options额外的配置，⽐如资源名称
      options: {
        // placeholder 占位符 [name]⽼资源模块的名称
        // [ext]⽼资源模块的后缀
        // https://webpack.js.org/loaders/file-loader#placeholders
        name: "[name]_[hash].[ext]",
        //打包后的存放位置
        outputPath: "images/"
      }
    }
  }]
},

url-loader  大图片不合适转为base64

{
        test: /\.(png|jpe?g|gif)$/,
        use: {
          loader: "url-loader",
          options: {
            name: "[name].[ext]",
            outputPath: "images/",
            limit: 2048, //小于2048kb(官网推荐)的图片会转为base64,大图片不合适转为base64
          },
        },
},

 第三方字体的处理 

//webpack.config.js
{
 test: /\.(eot|ttf|woff|woff2|svg)$/,
 use: "file-loader"
}