分享一个字体抽离打包的 webpack loader

[xiaoming1992]

地址: font-packer-webpack-loader

我们项目中有时可能会用到特殊字体, 但为了那么几个字引入一个好几 M 的字体文件实在是浪费，手动提取又很麻烦。

这个 loader 就是为了解决这个问题。欢迎三连(star issue pr)

Usage

yarn add -D font-packer-webpack-loader

// webpack.config.js

const SRC = path.resolve("src")

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.ttf(\?.*)?$/i,
        include: SRC,
        use: [
          // 正常 .ttf 文件需要的 loader
          {
            loader: "url-loader",
            options: {
              limit: 8192,
              name: "assets/fonts/[name].[contenthash:5].[ext]",
            },
          },
          // 在下面新增本 loader
          {
            loader: "font-packer-webpack-loader",
            options: {
              texts: [
                "这是可选的、需要额外提取的文本",
              ],
              filesOrDirs: [
                // 可选
                // 示例是 src 目录, 你可以配置任何文件或目录, 会将该 文件 /目录 中的文本提取到 .ttf 文件中
                SRC,
              ],
            },
          },
        ],
      },
    ],
  },
}