Как asnwered здесь by @mcortesi если вы удалите исходные карты из запроса загрузчика css, css будет построен без использования blob, а URL-адреса данных будут проанализированы нормально

для меня проблемой было мое регулярное выражение. Ниже сделал трюк, чтобы получить bootstrap работает

        { test: /\.(woff|ttf|eot|svg)(\?v=[a-z0-9]\.[a-z0-9]\.[a-z0-9])?$/, loader: 'url-loader?limit=100000' },

Как и в случае с @user3006381 выше, моя проблема заключалась не только в относительных URL-адресах, но и в том, что webpack размещал файлы, как если бы они были файлами javascript. Их содержание было все в основном:

module.exports = __webpack_public_path__ + "7410dd7fd1616d9a61625679285ff5d4.eot";

в каталоге шрифтов вместо реальных шрифтов и файлов шрифтов были в выходной папке под хэш-кодами. Чтобы исправить это, мне пришлось изменить тест на моем url-загрузчике (в моем случае мой процессор изображений), чтобы не загружать папку шрифтов. Мне все еще нужно было установить выход.publicPath в webpack.конфиг.js as @will-madden отмечает в своем превосходном ответе.

Я испытал ту же проблему, но по разным причинам.

после того, как решение Уилла Мэддена не помогло, я попробовал все альтернативные исправления, которые я мог найти через Intertubes - также безрезультатно. Исследуя дальше, я просто случайно открыл один из файлов шрифтов, о которых идет речь. Исходное содержимое файла каким-то образом было перезаписано Webpack, чтобы включить какую-то информацию о конфигурации, вероятно, от предыдущего возни с загрузчиком файлов. Я заменил поврежденные файлы на оригиналы и вуаля, ошибки исчезли (как для Chrome, так и для Firefox).

Я знаю, что это не отвечает на точный вопрос OPs, но я пришел сюда с тем же симптомом, но по другой причине:

у меня было .scss файлы Slick Slider включены следующим образом:

@import "../../../node_modules/slick-carousel/slick/slick.scss";

при ближайшем рассмотрении оказалось, что он пытался загрузить шрифт из недопустимого места (<host>/assets/css/fonts/slick.woff), как это было указано в таблице стилей.

Я закончил тем, что просто скопировал /font/ мой assets/css/ и вопрос был решен для меня.

так как вы используете url-loader:

url-загрузчик работает как файл-загрузчик, но может возвращать DataURL, если файл меньше, чем ограничение в байтах.

таким образом, другим решением этой проблемы было бы сделать предел достаточно высоким, чтобы файлы шрифтов включались как DataURL, например, в 100000 более-менее 100Kb:

{
  module: {
    loaders: [
      // ...
      {
        test: /\.scss$/,
        loaders: ['style', 'css?sourceMap', 'autoprefixer', 'sass?sourceMap'],
      },
      {
        test: /images\/.*\.(png|jpg|svg|gif)$/,
        loader: 'url-loader?limit=10000&name="[name]-[hash].[ext]"',
      },
      {
        test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
        use: 'url-loader?limit=100000&mimetype=application/font-woff',
      },
      {
        test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
        use: 'url-loader?limit=100000&mimetype=application/font-woff',
      },
      {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        use: 'url-loader?limit=100000&mimetype=application/octet-stream',
      },
      {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        use: 'file-loader',
      },
      {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        use: 'url-loader?limit=100000&mimetype=image/svg+xml',
      },
    ],
  },
}

всегда с учетом того, что предельное число представляет:

ограничение байта для встроенных файлов в качестве URL-адреса данных

таким образом, вам не нужно указывать полный URL-адрес ресурсов. Что может быть сложно, когда вы хотите, чтобы Webpack не только отвечал с localhost.

только одно последнее соображение, эта конфигурация не рекомендуется для производства. Это просто для развития легкости.

если вы используете угловые вы должны проверить, чтобы убедиться, что ваше

<base href="/"> 

тег приходит перед вашим набором таблиц стилей. Я переключил свой код с этого:

 <script src="~/bundles/style.bundle.js"></script>
 <base href="~/" />

для этого:

 <base href="~/" />
 <script src="~/bundles/style.bundle.js"></script>

и проблема была решена. Спасибо этот пост за то, что открыл мне глаза.

по состоянию на 2018 год,

use MiniCssExtractPlugin

для Webpack (>4.0) решит эту проблему.

https://github.com/webpack-contrib/mini-css-extract-plugin

используя extract-text-webpack-plugin в принятом ответе это не рекомендуется для Webpack 4.0+.