webpack5学习与实战-（五）-直接加载资源

在之前的文章中，我们说过，使用webpack内置的asset module可以加载任何资源。那是我们通过import把那些资源当作模块来引入处理的。更多的时候，我们会在代码比如css中直接引入资源。
例如css中的background:url(’./img/test.png’)

一，加载图片资源

.test{
    background: url('./assets/boy.png');
}

当我这张图片是png的时候，它就会采用我之前在asset module中配置的策略，将其作为单文件处理，输出url：

也就是说，在css中直接引入的图片资源，使用的策略也是asset module中设置的策略。

二，加载字体文件资源

同样可以使用webpack内置的asset module模块来加载引入字体文件。
这里我使用阿里矢量图标库的字体图标来演示。

第一步：配置webpack

其实我发现这个不配置也能生效。。也许是因为asset module是webpack内置的模块。所以对于资源的引入，它已经设置了默认的参数。这里重新写只是覆盖内置的配置？

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

第二步，下载阿里图标库文件

解压之后，是这么一大坨东西，而我要修改的其实仅仅是这个文件：

具体的使用方法可以查看这个地址：https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8cf4382a&helptype=code
本文只是讲字体文件的引入，所以这里采用unicode 引用的方式

第三步，参考第二步红圈中文件的写法。引入注册这个字体

当然，正常情况下使用阿里图标库，是直接完全引入这个css文件。这样那几种字体图标的方法都可以用了。

@font-face{
    font-family: 'myfont';
    src: url('./assets/font_3169160_b1lel1c1ag/iconfont.ttf') format('truetype');//这里就是引入这个ttf结尾的字体文件
}
.testIcon{
    font-family: 'myfont'!important;
    font-size: 36px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

第四步，在页面代码中使用

import './style2.scss'
const span = document.createElement('span')
span.classList.add('testIcon')
span.innerHTML=''//这个是下载时对应图标的unicode
document.body.appendChild(span)

实现的效果便是：

三，加载其他资源

此外，可以加载的有用资源还有数据，如json文件、CSV、TSV和XML等，其中json是默认支持的。另外的则需要对应的loader来进行加载。