asset|asset module type 替代 loader 处理图片字体等文件资源 assetmoduletype替代loader处理图片

前面文章中体验了webpack的打包、解析css资源，接下来看看项目中常用到的图片、字体、文件该怎么处理吧~
项目路径如下，在上一篇解析css资源项目基础上增加了一些文件

demo ├─ src │├─ css ││├─ index.css ││└─ file.css（+） │├─ img ││├─ portrait.png （+） ││└─ sky.jpg（+） │├─ js ││├─ component.js ││└─ createElement.js（+） │└─ index.js ├─index.html ├─package.json └─webpack.config.js

【asset|asset module type 替代 loader 处理图片字体等文件资源】在 createElement.js 分别创建一个 div 元素设置背景图片、img 选择引入图片链接。

// createElement.js const imageEl = new Image(); const portrait = require("../img/portrait.png"); imageEl.src = https://www.it610.com/article/portrait; document.body.appendChild(imageEl); const divEl = document.createElement("div"); divEl.style.width = "200px"; divEl.style.height = "200px"; divEl.className = "div-el"; document.body.appendChild(divEl); // file.css .div-el { background: url("../img/sky.jpg") top center/100% no-repeat; display: inline-block; }// index.css @import './file.css';

no loaders
直接通过 npm run build 是无法通过编译的，会提示没有合适的 loader 处理图片资源

asset|asset module type 替代 loader 处理图片字体等文件资源

文章图片

file-loader
file-loader 就是一个可以用来处理图片字体等文件资源的 loader，它的处理方式是将资源复制到打包后的文件夹，并重命名。
通过 npm i file-loader -D 安装依赖，在 webpack.config.js 中配置
因为 file-loader 在webpack5 环境下已经弃用，要想正确处理图片，需要配置两个属性。

esModule: false （启用 CommonJS 模块语法）
type: "javascript/auto" （停止当前 asset 模块的处理，并再次启动处理时，防止导致 asset 重复）

module.exports = { // 其它配置省略 module: { rules: [ { test: /\.(jpe?g|png|gif|svg)$/i, use: [ { loader: "file-loader", options: { // 定义复制后的文件名，取原文件名+哈希值6位+原文件后缀 name: "img/[name]_[hash:6].[ext]", esModule: false, }, }, ], type: "javascript/auto", }, ], }, };

复制后的资源在 dist/img 文件夹下

文章图片

在 html 页面引入打包后的 js 文件，通过 live server 可以看到图片显示在页面上

文章图片

url-loader
url-loader 是另一个可以处理图片字体等文件资源的 loader，它与 file-loader 有些不同

file-loader 会复制所有的资源
url-loader 只会复制占用空间较大的资源，当资源较小时，会对它进行 base64 编码

通过 npm i url-loader -D 安装依赖，在 webpack.config.js 中配置
url-loader 和 file-loader 一样，在webpack5环境下已经弃用，也需要配置 esModule: false、type: "javascript/auto" 属性

module.exports = { // 其它配置省略 module: { rules: [ { test: /\.(jpe?g|png|gif|svg)$/i, use: [ { loader: "url-loader", options: { name: "[name]_[hash:6].[ext]", // 自定义转成 base64 资源大小，超过 limit 将直接复制资源 limit: 100 * 1024, esModule: false, }, }, ], type: "javascript/auto", }, ], }, };

sky.jpg 大小为576kb，portrait.png 为33.2kb，所以 portrait.png 是以 base64 编码的形式展现，sky.jpg 被复制到了打包后的文件夹 img 中

文章图片

asset module type
在webpack5环境下弃用的 url-loader、file-loader，使用 asset module type 来替代，无需安装依赖，直接在 webpack.config.js 中配置
asset module type 有以下几种类型来对应 url-loader、file-loader

asset/resource 实现同 file-loader，复制资源
asset/inline 实现同 url-loader，自定义复制资源还是处理成 base64编码
asset 实现同url-loader，根据文件大小自动处理

asset module type 的配置会稍微简单一些

module.exports = { // 其它配置省略 module: { rules: [ { test: /\.(jpe?g|png|gif|svg)$/i, type: "asset", // 对复制后的资源重命名 generator: { filename: "img/assetmodule.[name][ext]", }, }, ], }, };

type为asset 时，大小为576kb的 sky.jpg 和 33.2kb 的 portrait.png 都被直接复制了

文章图片

字体资源
以上方式也都可以处理字体资源，从 iconfont 上选取图标保存到自己项目并下载到本地

文章图片

将iconfont.css及ttf、woff文件放到src目录下新增font文件夹中，在 createElement.js 中创建标签、index.css 中引入 iconfont 样式资源

// createElement.js const addIcon = document.createElement("i"); addIcon.className = "iconfont icon-add"; document.body.appendChild(addIcon); const deleteIcon = document.createElement("i"); deleteIcon.className = "iconfont"; deleteIcon.innerHTML = " "; document.body.appendChild(deleteIcon); // index.css @import '../font/iconfont.css'

使用 asset module type 来对字体资源进行配置

module.exports = { // 其它配置省略 module: { rules: [ { test: /\.(ttf|woff2?)$/i, type: "asset/resource", generator: { filename: "font/[name]_[hash:6][ext]", }, }, ], }, };

两个小图标就能在页面上展示了