20-webpack 加载字体优化

在 08-webpack加载字体 中，使用 file-loader 可以加载字体资源。

通过 url-loader 将小文件转换成 base64 URIs 内联到 bundle.js 中，可以减少 HTTP 请求次数。

一、添加字体

添加 华文彩云.ttf 字体库,大小为 5.7 MB。

二、编辑 index.js

import "./style.css"

function component() {
    let element = document.createElement('div');
    element.innerHTML = "Hello webpack !";
    element.classList.add("hello");
    return element;
}
document.body.appendChild(component());

style.css

 @font-face {
   font-family: "MyFont";
   src:  url('./华文彩云.ttf');
   font-weight: 600;
   font-style: normal;
}
.hello{
    color: red;
    font-size: 30px;
    font-family: "MyFont";
}

三、安装 url-loader

npm install url-loader --save-dev
//
yarn add url-loader --dev
</