⭐webpack5开发指南（四）如何加载图片、icon、数据等资源

前言

✈️ ‍在之前的章节中我们学习了使用asset module资源模块进行png格式、base64格式、txt内容等不同格式的引入并解析，今天我们就补充一下图片资源的加载新方式，以及如何引入icon、字体以及导入CSV、TSV和XML、toml yaml json5等格式的数据，通过本节课的学习，能够掌握对于特殊类型资源的引入与解析，同时能够自定义JSON模块parser。✋

⚡️本小节主要知识点：

• 加载images图像新方式-url
• asset/resource解析woff|woff2|eot|ttf|otf等格式icon字体
• CSV、TSV和XML特殊类型数据解析
• 自定义JSON模块parser解析toml yaml json5等格式的数据

四、加载图片、icon、字体等资源

4.1 加载images图像

在之前的学习中，我们知道加载图片资源可以使用asset modules资源模块进行引入，那么一种新方式，只需要在css中直接引用即可❓。 css中设置：

.back-img{
    background-image: url('./assets/img3.png');
}

在index.js我们设置class,并添加到页面。

const img=document.createElement('img')
img.style.cssText='width:300px;height:300px'
img.classList.add('back-img')
document.body.appendChild(img)

执行npx webpack打包后可以看到，我们不需要配置asset modules 也能快速引入图片资源。

4.2 加载fonts字体

如何在webpack中加载字体等资源呢？我们可以使用之前学过的asset modules ，它可以接收并加载任何文件，然后将其输出到构建目录中，那么我们就来配置webpack.config.js来处理字体文件。 首先配置解析格式woff|woff2|eot|ttf|otf，并将type设置为asset/resource

    module:{
       rules:[
           {
               test:/\.(woff|woff2|eot|ttf|otf)$/,
               type:'asset/resource'
           },
       ] 
   },

在style.css中通过font-face设置字体格式：

@font-face{
    font-family: 'iconfont';
    src: url(./assets/iconfont.ttf) format('truetype');
}

.icon{
    font-family: 'iconfont';
    font-size: 20px;
}

在页面中我们创建span元素，并设置该元素的innerHtml为对应unicode号（本ttf资源包使用的iconfont下载到本地的资源包，可以在iconfont仓库中查看unicode号）

const span=document.createElement('span')
span.classList.add('icon')
span.innerHTML=''
document.body.appendChild(span)

执行npx webpack打包后可以看到我们的icon图标可以正常显示。（本次图标使用iconfont图标库下载）

4.3 加载数据

除了图片、icon、字体等资源外，还可以加载数据，如json数据，但是json实际上是内置的，直接使用import form是可以引入的，但是如果想要导入一些特殊类型格式的数据，需要使用loader,如导入CSV、TSV和XML，可以使用csv-loader、xml-loader。

npm install --save-dev csv-loader xml-loader

修改webpack.config.js配置,添加rules,配置csv-loader、xml-loader。

module:{
        rules:[
            {
                test:/\.(csv|tsv)$/,
                use:['csv-loader']
            },
            {
                test:/\.(xml)$/,
                use:['xml-loader']
            },    
           ] 
    },

配置完成后只需要在使用的页面使用import方式导入，输出即可看到内容。

4.4 自定义JSON模块parser

通过自定义JSON模块parser替代webpack loader,可以将json5、toml、yaml等文件作为JSON模块导入。 安装toml yaml json5

npm install toml yaml json5 -D

修改webpack.config.js配置,引入安装的toml yaml json5解析工具，配置rules,注意使用parser属性自定义JSON模块parser替代webpack loader,设置对应的解析工具。

const path=require('path')
const toml=require('toml')
const yaml=require('yaml')
const json5=require('json5')
module.exports={
    entry:'./src/index.js',
    output:{
        filename:"bundle.js",
        path:path.resolve(__dirname,'./dist'),
        clean:true,
        assetModuleFilename:"images/[contenthash][ext]"
    },
    mode:'development',
    devtool:'inline-source-map',
    devServer:{
        static:"./dist"
    },
    module:{
        rules:[
            {
                test:/\.toml$/,
                type:'json',
                parser:{
                    parse:toml.parse
                }
            },
            {
                test:/\.yaml$/,
                type:'json',
                parser:{
                    parse:yaml.parse
                }
            },  
            {
                test:/\.json5$/,
                type:'json',
                parser:{
                    parse:json5.parse
                }
            },            
        ] 
    },
}

在main.js中使用import from方式进行引入，同时我们使用console.log打印引入的数据：

import toml from './assets/data.toml'
import yaml from './assets/data.yaml'
import json5 from './assets/data.json5'

console.log(toml)
console.log(yaml)
console.log(json5)

执行npx webpack打包后可以看到我们引入的toml yaml json5等格式的文件可以正常展示输出。

✍️总结

本章节中我们学习了使用url新方式加载背景图片资源，通过asset/resource解析ttf等icon格式文件，并通过@font-face属性进行css设置对icon、字体进行引入，同时我们使用csv-loader、xml-loader导入CSV、TSV、XML等格式的数据、最后我们学习了通过自定义JSON模块parser替代webpack loader,可以将json5、toml、yaml等文件作为JSON模块导入，本节课对之前资源模块导入进行的补充，拓宽了对于特殊类型资源的处理方式。