webpack基础知识学习(四)--字体

在处理业务时，我们也会用到字体库，加下来我们就学习webpack自带的asset属性来处理字体。
1.我们去iconfont的官网去下载一个字体库，按照说明我们把它引入到项目中。

2.创建一个标签，添加web-font的类名。

// src/js/font.js

import '../font/webfont.css'

function createfont() {
    const dom = document.createElement('div');
    dom.innerHTML = '我是字体'
    dom.className = 'web-font';
    document.body.appendChild(dom);
}

createfont();

3.修改webpack.config.js.添加对字体的处理规则。

// webpack.config.js

{
    test: /\.(ttf|woff2?|eot)$/,
    type: 'asset',
    generator: {
        filename: 'font/[name].[hash:8].[ext]'
    }
},

就可以看到字体不一样啦！