webpack5 学习（四）—— 管理资源：加载 fonts 字体

使用 Asset Modules 可以接收并加载任何文件，然后将其输出到构建目录。

所以，可以将 Asset Modules 用于任何类型的文件，也包括字体。

webpack.config.js

修改 webpack.config.js 来处理字体文件：

const path = require('path')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource'
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource'
      }
    ]
  }
}

项目结构

在项目中添加一些字体文件，此时项目结构：

  webpack-demo
  |- package.json
  |- package-lock.json
  |- webpack.config.js
  |- /dist
    |- bundle.js
    |- index.html
  |- /src
   |- OPPOSans-B.ttf
   |- OPPOSans-H.ttf
   |- logo.png
   |- icon.png
   |- style.css
   |- index.js
  |- /node_modules

style.css

配置好 loader 并将字体文件放在文件夹后，可以通过一个 @font-face 声明将其混合。

本地的 url(...) 指令会被 webpack 获取处理，就像处理图片一样：

修改src/style.css：

@font-face {
  font-family: "MyFont";
  src: url("./OPPOSans-B.ttf") format("ttf"),
    url("./OPPOSans-H.ttf") format("ttf");
  font-weight: 600;
  font-style: normal;
}
.hello {
  color: red;
  font-family: "MyFont";
  background: url("./icon.png");
}

重新构建项目：

可以看到， webpack 处理了引入的字体：