The context is a vscode extension that generates and serves pages and supporting resources to a browser. It bundles KATEX and serves the CSS and supporting fonts.

The fonts are ending up in the bundle, no problem there, but for some reason that I cannot fathom webpack is resolving absolute paths and using them in the bundled CSS.

OK here’s the entire webpack.config.js, note that output.publicPath is already set to “./” so that’s not it.

//@ts-check

'use strict';

const path = require('path');

//@ts-check
/** @typedef {import('webpack').Configuration} WebpackConfig **/

/** @type WebpackConfig */
const extensionConfig = {
  target: 'node', // VS Code extensions run in a Node.js-context ???? -> https://webpack.js.org/configuration/node/
  mode: 'none', // this leaves the source code as close as possible to the original (when packaging we set this to 'production')

  entry: './src/extension.ts', // the entry point of this extension, ???? -> https://webpack.js.org/configuration/entry-context/
  output: {
    // the bundle is stored in the 'dist' folder (check package.json), ???? -> https://webpack.js.org/configuration/output/
    path: path.resolve(__dirname, 'dist'),
    publicPath: "./",
    filename: 'extension.js',
    libraryTarget: 'commonjs2'
  },
  externals: {
    vscode: 'commonjs vscode' // the vscode-module is created on-the-fly and must be excluded. Add other modules that cannot be webpack'ed, ???? -> https://webpack.js.org/configuration/externals/
    // modules added here also need to be added in the .vscodeignore file
  },
  resolve: {
    // support reading TypeScript and JavaScript files, ???? -> https://github.com/TypeStrong/ts-loader
    extensions: ['.ts', '.js', ".mjs"],
    alias: {
      // Assuming 'styles' is the directory you want to resolve to
      'highlight.js/styles': path.resolve(__dirname, 'node_modules/highlight.js/styles')
    }
  },
  module: {
    rules: [
      {
        test: /.ts$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'ts-loader'
          }
        ]
      },
      {
        test: /.(woff(2)?|ttf|eot|otf)(?v=d+.d+.d+)?$/i,
        type: 'asset/resource',
        use: {
          loader: "url-loader"
        },
        generator: {
          filename: 'fonts/[name][ext]'
        }
      },
      {
        test: /.css$/,
        use: [
          'css-loader'
        ]
      },
      {
        test: /.html$/,
        use: [
          'raw-loader'
        ]
      },
      {
        test: /.node$/,
        use: 'node-loader'
      }]
  },
  devtool: 'nosources-source-map',
  infrastructureLogging: {
    level: "log", // enables logging required for problem matchers
  },
};
module.exports = [extensionConfig];
```

This is the start of the stylesheet going in the node module

### katex.css

```css
/* stylelint-disable font-family-no-missing-generic-family-keyword */
@font-face {
  font-family: 'KaTeX_AMS';
  src: url(fonts/KaTeX_AMS-Regular.woff2) format('woff2'), url(fonts/KaTeX_AMS-Regular.woff) format('woff'), url(fonts/KaTeX_AMS-Regular.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
}
```

and this is what webpack puts in the `dist` folder

[![dist folder with font files](https://i.sstatic.net/erb3FtvI.png)](https://i.sstatic.net/erb3FtvI.png)

but this is what I get retrieving `katex.css` from the bundle at run time.

```css
/* stylelint-disable font-family-no-missing-generic-family-keyword */n@font-face {n  font-family: 'KaTeX_AMS';n  src: url(file:///d:/html-renderer-markdown/dist/fonts/KaTeX_AMS-Regular.woff2) format('woff2'), url(file:///d:/html-renderer-markdown/dist/fonts/KaTeX_AMS-Regular.woff) format('woff'), url(file:///d:/html-renderer-markdown/dist/fonts/KaTeX_AMS-Regular.ttf) format('truetype');n  font-weight: normal;n  font-style: normal;n}n@font-face {n  font-family: 'KaTeX_Caligraphic';n  src: url(fi…jtFQUNyQixrQkFBa0I7RUFDbEIsd0JBQXdCO0VBQ3hCLGdCQUFnQjtBQUNsQjtBQUNBO0VBQ0UscUJBQXFCO0VBQ3JCLGtCQUFrQjtFQUNsQix1QkFBdUI7RUFDdkIsaUJBQWlCO0FBQ25CO0FBQ0E7RUFDRSxjQUFjO0VBQ2QsYUFBYTtFQUNiLGtCQUFrQjtBQUNwQjtBQUNBO0VBQ0UsY0FBYztFQUNkLGtCQUFrQjtFQUNsQixtQkFBbUI7QUFDckI7QUFDQTtFQUNFLGNBQWM7RUFDZCxrQkFBa0I7QUFDcEI7QUFDQTtFQUNFLGtCQUFrQjtFQUNsQixRQUFRO0FBQ1Y7QUFDQTtFQUNFLE9BQU87RUFDUCxXQUFXO0FBQ2I7QUFDQTtFQUNFLGdCQUFnQjtFQUNoQixpQkFBaUI7QUFDbkI7QUFDQTtFQUNFLGtDQUFrQztBQUNwQyIsInNvdXJjZVJvb3QiOiIifQ== */
```

I do not understand why webpack is rewriting the urls like this. I expected publicPath to be used. Your guidance is appreciated.