¿Cómo incorporar fuentes en CSS con webpack?

Antecedentes del problema: estoy usando katex para representar algunas matemáticas en una página. Luego quiero crear una versión PDF de parte de esa página, así que creo un documento HTML que contiene la parte a exportar que alinea todo CSS y lo pasa al renderizador. El renderizador no puede acceder a los recursos del nodo, es por eso que todo está en línea. Funciona perfectamente, excepto por las fuentes.

Probé tanto url-loader como bas64-inline-loader, pero las fuentes generadas no están en línea. Inspeccioné el CSS generado en el depurador, y las URL antiguas todavía están en, no hay URL de datos para las fuentes.

Este es mi webpack.config.js actual:

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/.*'
        })
    ]
};

La mejor manera es usar postcss-cli y postcss-inline-base64

paquete 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',
  }]
},

Crear ancho de carpeta de configuración postcss.config.js

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

baseDir es la ruta a las fuentes. En el archivo scss agrego una fuente de esta manera:

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

Como resultado del trabajo, tenemos una fuente bien convertida a base64 @font-face{font-family:Lato-Light;src:url("data:font/ttf;charset=utf-8;base64,...

ACTUALIZACIÓN: preparé un pequeño ejemplo postcss-inline-base64