404s на некоторых изображениях из загрузчика URL-адресов Webpack

Есть много вопросов по этому поводу и много ответов, читайте ниже, чтобы увидеть, что я пробовал и почему они не работали. Я предполагаю, что моя проблема связана с фундаментальным непониманием того, как работает url-loader.

У меня есть изображения, включенные в мои файлы .less. Я использую два разных формата в качестве примера того, что я пробовал.

без приложения

#logo {
  background-image: url("~/img/LoginMarketingImage.png");
}
#logotwo{
  background-image: url("../public/img/LoginMarketingImage2.png");
}

webpack.config.js

module.exports = {
    context: path.resolve(__dirname, '../../'),
    entry: {
        app: './public/js/app.js'
    },
    output: {
        path: path.resolve(__dirname, '../build'),
        filename: '[name].js',
        publicPath: '/'
    },

я тоже пробовал

webpack.config.js

module.exports = {
    context: path.resolve(__dirname, '../../'),
    entry: {
        app: './public/js/app.js'
    },
    output: {
        path: path.resolve(__dirname, '../build'),
        filename: '[name].js',
        publicPath: ''
    },

Как и ниже, на основе: webpack css-loader не находит изображения в ссылке url() во внешней таблице стилей

webpack.config.js

module.exports = {
    context: path.resolve(__dirname, '../../'),
    entry: {
        app: './public/js/app.js'
    },
    output: {
        path: path.resolve(__dirname, '../build'),
        filename: '[name].js',
        publicPath: 'https://localhost:9081/'
    },

Моя конфигурация модуля выглядит так

webpack.config.js

   module: {
        rules: [
        {
            test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
            loader: 'url-loader',
            options: {
                limit: 2000000,
                name: utils.assetsPath('img/[name].[ext]')
            }
        },
     ]
   }

Я экспериментировал с пределом 1 и выше, чтобы увидеть, работает ли встроенный или не встроенный.

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

  build/
  less/
     app.less
  public/
     img/
        LoginMarketingImage.png
        LoginMarketingImage2.png

  config/
     webpack/
        webpack.config.js

Мои результаты

Если я установлю ограничение на 1 и заставлю все изображения выводиться напрямую, единственный раз, когда они выводятся, - это если они используют синтаксис url("../"). url("~/") не выдает ошибок веб-пакета, но изображения не выводятся в папку сборки. В этом случае изображения, использующие синтаксис url("../"), также не вызывают ошибок в браузере. Однако это не идеально, так как я хочу воспользоваться возможностью url-loader возвращать DataURL. В этом случае изображения, использующие синтаксис url("~/"), выдают ошибку GET https://localhost:9081/img/logo.png 404 (Not Found) независимо от настройки publicPath.

Если я установлю ограничение на 20000000, очевидно, что никакие изображения не будут помещены в папку сборки file-loader. Однако все изображения возвращают в браузере ошибку 404, независимо от настройки publicPath.

Я чувствую, что неправильно понимаю, как использовать url-loader. Какая конфигурация мне нужна и как я должен требовать свои файлы внутри less, чтобы воспользоваться способностью url-loader возвращать DataURL?

РЕДАКТИРОВАТЬ: Основываясь на этой проблеме, я убедился что исходные карты css отключены.