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

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

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

所以我们什么时候?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#placeholdersname: "[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"
}