>[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 地址 ![](https://img.kancloud.cn/ce/4d/ce4d93121174910833ddb6f41b3e88be_841x388.png) >[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 ![](https://img.kancloud.cn/9a/05/9a05ebd22112f7f2dd1659af154e8faf_1226x405.png) 对于超过`limit`值的图片则直接调用`file-loader`完成加载 >[danger] ##### raw-loader 1. 可以提取文件中的内容,在处理svg 时候可以使用,也可以是其他具有文本的文件(img不算文本文件,svg一般以一段文本) ~~~ // webpack.config.js module.exports = { // ... module: { rules: [ { test: /\.svg$/i, use: ['raw-loader'], }, ], }, }; ~~~ ![](https://img.kancloud.cn/29/c6/29c6e16e28b6318280ed8f2806bdbd0f_1371x352.png) [参考 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 形式储存,不如将图片复制一份到打包目录下**,来操作这个新的在打包目录下生成的文件地址 ![](https://img.kancloud.cn/57/af/57aff52ae38afda74ce28eac1bd91761_1186x582.png) >[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,减少请求次数,大文件单独提取存放,提高加载速度