Bagaimana cara inline font dalam CSS dengan webpack?

Latar belakang masalah: Saya menggunakan katex untuk membuat beberapa matematika pada halaman. Saya kemudian ingin membuat versi PDF dari bagian halaman itu, jadi saya membuat dokumen HTML yang berisi bagian yang akan diekspor yang menyatukan semua CSS dan meneruskannya ke renderer. Penyaji tidak dapat mengakses sumber daya simpul, itu sebabnya semuanya diuraikan. Ini berfungsi dengan baik, kecuali untuk font.

Saya mencoba baik url-loader dan bas64-inline-loader, tetapi font yang dihasilkan tidak inline. Saya memeriksa CSS yang dihasilkan di debugger, dan URL lama masih ada, tidak ada data-URL untuk font.

Ini webpack.config.js saya saat ini:

const path = require('path');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: {
        "editor": './src/editor.js',
        "editor.worker": 'monaco-editor/esm/vs/editor/editor.worker.js',
        "json.worker": 'monaco-editor/esm/vs/language/json/json.worker',
        "css.worker": 'monaco-editor/esm/vs/language/css/css.worker',
        "html.worker": 'monaco-editor/esm/vs/language/html/html.worker',
        "ts.worker": 'monaco-editor/esm/vs/language/typescript/ts.worker',
    },
    output: {
        globalObject: 'self',
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.(woff|woff2|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
                use: ['url-loader']
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            filename: 'editor_text.html',
            template: 'src/editor_text.html'
        }),
        new HtmlWebpackPlugin({
            filename: 'editor_markdown.html',
            template: 'src/editor_markdown.html',
            inlineSource: '/katex/.*'
        })
    ]
};

Cara terbaik adalah menggunakan postcss-cli dan postcss-inline-base64

paket web:

{
  test: /\.(css|sass|scss)$/,
  use: [
    MiniCssExtractPlugin.loader,
    {
      loader: 'css-loader',
      options: {
        importLoaders: 2,
        sourceMap: true
      },
    },
    {
      loader: 'postcss-loader', // important
      options: {
        sourceMap: true,
        config: {
          path: './config/',
        },
      },
    },
    {
      loader: 'sass-loader',
      options: {
        sourceMap: true,
      },
    },
  ],
}, {
  test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
  use: [{
    loader: 'file-loader',
  }]
},

Buat config lebar folder postcss.config.js

module.exports = {
  plugins: {
    'postcss-inline-base64': {
      baseDir: './sources/'
    },
  },
};

baseDir adalah path ke font. Dalam file scss saya menambahkan font dengan cara ini:

@font-face {
  font-family: 'Lato-Light';
  src: url('b64---../fonts/Lato-Light.ttf---') format('truetype');
  font-weight: normal;
  font-style: normal;
}

Sebagai hasil dari pekerjaan kami memiliki font yang dikonversi dengan baik ke base64 @font-face{font-family:Lato-Light;src:url("data:font/ttf;charset=utf-8;base64,...

UPDATE: Saya menyiapkan contoh kecil postcss-inline-base64