Преобразование относительных URL-адресов в CSS в абсолютные с помощью веб-пакета и игнорирование локального присутствия

Question

В моем каталоге компоновки есть таблица стилей, созданная третьей стороной.Он называется file.scss и выглядит следующим образом (упрощенно):

.something {
  background-image: url('../images/image.jpeg');
}

@font-face {
  font-family: 'YourFontName';
  src: url('../fonts/OpenSans-Bold.ttf');
}

Все пути к URL-адресам в их файле CSS (изображения, шрифты) относятся к домену cdn.com.Я хочу преобразовать их в абсолютные значения с помощью веб-пакета.

Моя конфигурация веб-пакета выглядит следующим образом:

const path = require("path");
const glob = require('glob')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const PurgecssPlugin = require('purgecss-webpack-plugin')
const HtmlWebpackPlugin = require("html-webpack-plugin");
const FixStyleOnlyEntriesPlugin = require("webpack-fix-style-only-entries");

const PATHS = {
    src: path.join(__dirname, 'src')
}

module.exports = {
    optimization: {
        splitChunks: {
            cacheGroups: {
                styles: {
                    name: 'styles',
                    test: /\.css$/,
                    chunks: 'all',
                    enforce: true
                }
            }
        }
    },
    entry: "./src/index.js",
    output: {
        path: path.join(__dirname, "/dist"),
        filename: "index-bundle.js",
        publicPath: 'https://cdn.com/',
    },
    resolve: {
        extensions: ['.js', '.jsx'],
    },
    module: {
        rules: [{
            test: /\.jsx?$/,
            use: [{
                loader: 'babel-loader',
                options: {
                    plugins: ['transform-react-remove-prop-types'],
                },
            }],
        },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: ["babel-loader"]
            },
            {
                test: /\.scss$/,
                use: [
                    "style-loader",
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "sass-loader"
                ]
            }, {
                test: /\.(png|jpg|gif|svg|jpeg|eot|ttf|woff)$/i,
                use: [{
                    loader: 'file-loader',
                    options: {
                        outputPath: 'images/',
                        name: '[name].[ext]',
                    }
                }],
            }
        ]
    },
    plugins: [
        new FixStyleOnlyEntriesPlugin(),
        new MiniCssExtractPlugin({
            filename: "[name].css",
        }),
        new PurgecssPlugin({
            paths: glob.sync(`${PATHS.src}/**/*`, {nodir: true}),
        }),
    ]
};

Файл index.js:

import './styles/file.scss';

Когда шрифти файлы изображений существуют в моем локальном каталоге в нужных местах, сборка веб-пакета завершается успешно и выдает следующий вывод:

.something {
  background-image: url(https://cdn.com/fonts/OpenSans-Bold.ttf);
}

@font-face {
  font-family: 'YourFontName';
  src: url(https://cdn.com/images/image.jpeg);
}

Однако, когда файлы не существуют, я вижу следующую ошибку:

ModuleNotFoundError: Module not found: Error: Can't resolve '../image.jpeg'

Есть ли способ заставить загрузчик файлов webpack игнорировать расположение файлов и просто заменить абсолютные URL-адреса относительными URL-адресами?Поскольку в CDN слишком много ссылок на статические файлы и файл извлекается удаленно, поэтому, если в будущем появятся какие-либо обновления, я хочу, чтобы он обновлялся без локальных исходных файлов.