>[success] # loader -- 图片和字体（4.x） 1. **图片和字体**也属于非 js 但在开发过程中常用的模块之一，需要 对应的`loader`去配置 * [file-loader](https://link.juejin.cn/?target=https%3A%2F%2Fv4.webpack.js.org%2Floaders%2Ffile-loader%2F "https://v4.webpack.js.org/loaders/file-loader/")：将图像引用转换为 url 语句并生成相应图片文件 * [url-loader](https://link.juejin.cn/?target=https%3A%2F%2Fv4.webpack.js.org%2Floaders%2Furl-loader%2F "https://v4.webpack.js.org/loaders/url-loader/")：有两种表现，对于小于阈值`limit`的图像直接转化为 base64 编码；大于阈值的图像则调用`file-loader`进行加载 * [raw-loader](https://link.juejin.cn/?target=https%3A%2F%2Fv4.webpack.js.org%2Floaders%2Fraw-loader "https://v4.webpack.js.org/loaders/raw-loader")：不做任何转译，只是简单将文件内容复制到产物中，适用于 SVG 场景 * [svg-inline-loader](https://link.juejin.cn/?target=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fsvg-inline-loader "https://www.npmjs.com/package/svg-inline-loader")：能够自动删除 SVG 图片中与显式无关的各种原信息，达到压缩效果 * [svg-url-loader](https://link.juejin.cn/?target=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fsvg-url-loader "https://www.npmjs.com/package/svg-url-loader")：以[DataURL](https://link.juejin.cn/?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FHTTP%2FBasics_of_HTTP%2FData_URIs "https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/Data_URIs")方式导入 SVG 图片，相比于 Base64 更节省空间 * [react-svg-loader](https://link.juejin.cn/?target=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Freact-svg-loader "https://www.npmjs.com/package/react-svg-loader")：导入 SVG 图片并自动转化为 React 组件形态，效果类似[@svgr/webpack](https://link.juejin.cn/?target=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2F%40svgr%2Fwebpack "https://www.npmjs.com/package/@svgr/webpack")； * [vue-svg-loader](https://link.juejin.cn/?target=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fvue-svg-loader "https://www.npmjs.com/package/vue-svg-loader")：导入 SVG 图片并自动转化为 Vue 组件形态 2. `url-loader` 其实也是基于 `file-loader`，只不过 `url-loader` 多了可以自动设置小图片、字体 base64 内联到代码里面的功能。全部用 `url-loader` 也没问题,但是也需要安装`file-loader`,经过测试有些文章说安装了`url-loader`不用安装`file-loade`是错误的 3. `url-loader`同样适用于大多数图片格式，且能将许多细小的图片直接内嵌进产物中，减少页面运行时需要发出的网络请求数，在 HTTP 1.1 及之前版本中能带来正向的性能收益 4. 安装 `npm install url-loader file-loader --save-dev` >[info] ## 使用 * 入口文件代码 ~~~ // 导入图片 import zznhImage from './images/zznh.png' window.onload = function () { const imgEl = document.createElement('img') imgEl.src = zznhImage document.body.append(imgEl) } ~~~ >[danger] ##### file-loader ~~~ // 配置file-loader { test: /\.(png|jpg)$/, use: ['file-loader'], }, ~~~ * 经过 file-loader 处理后，原始图片会被重命名并复制到产物文件夹，同时在代码中插入图片 URL 地址  >[danger] ##### url-loader 使用 ~~~ module: { // 配置所有第三方loader 模块的 rules: [ { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7631&name=[hash:8]-[name].[ext]' } ] } ~~~ * 也可以通过options设置一些配置项 ~~~ rules: [ { test: /\.(png|jpg|gif)$/, use: [ { loader: 'url-loader', options: { // 选项中是文件大小限制 如果超过仍使用file-loader 该插件 limit: 2228192, }, }, ], }, ], ~~~ 经过 `url-loader` 处理后，小于 limit 参数即 2228192B 的图片会被转译为 Base64  对于超过`limit`值的图片则直接调用`file-loader`完成加载 >[danger] ##### raw-loader 1. 可以提取文件中的内容，在处理svg 时候可以使用，也可以是其他具有文本的文件（img不算文本文件，svg一般以一段文本） ~~~ // webpack.config.js module.exports = { // ... module: { rules: [ { test: /\.svg$/i, use: ['raw-loader'], }, ], }, }; ~~~  [参考 Webpack实战-加载SVG](https://cloud.tencent.com/developer/article/1547656) >[danger] ##### url-loader可以处理文字文件 ~~~ module: { // 配置所有第三方loader 模块的 rules: [ { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, // 处理 字体文件的 loader ] } ~~~ >[info] ## file-loader 工作原理 1. 之前介绍了`css-loader`，本质是将**css转换成commonjs**对象，**像图片这种无法转换成 js的**，webpack打包时遇到了**图片文件**，通过配置文件当中的配置匹配到对应的**文件加载器**，文件加载器将**资源文件拷贝到输出目录**，然后输出目录的**文件路径作为输出值返回**，因此可以通过模块的导入成员获取图片的访问路 2. 总结**图片变成 js 形式储存，不如将图片复制一份到打包目录下**，来操作这个新的在打包目录下生成的文件地址  >[info] ## url-loader 怎么工作 1. 需要先了解`Data URLs`（[data\_URIs](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/data_URIs)）这种特殊的URL协议，用来直接表示一个文件 * **传统URL**需要服务器有一个对应的文件，然后通过请求地址获取服务器的对应文件 * **Data URLs**是一种通过当前URL就可以直接去表示文件内容的方式，URL中的文本就已经包含URL的内容，就不会再去发送任务的http请求图片内容进行base64编码来进行图片存储能够直接解析图片 2. 经过`url-loader`处理后，小于 limit 参数会被转译为 Base64，自然就不会有对应的copy 文件在打包文件目录中，对于超过`limit`值的图片则直接调用`file-loader`完成加载copy 一份到打包文件目录 >[danger] ##### 总结 1. base64有什么好处呢？ * 答：减少http请求数，优化页面加载性能 2. 什么时候使用 base64 文件 * 答：小文件使用Data URLs,减少请求次数，大文件单独提取存放，提高加载速度