Webpack с babel-загрузчиком для реакции повреждает файлы изображений

Question

Я использую веб-пакет с babel-loader для преобразования файлов реакции.jsx. Однако добавление загрузчика файлов или загрузчика стилей и CSS не позволяет правильно обрабатывать требуемые изображения () в компонентах реакции или таблицах стилей.

Они распознаются веб-пакетом и копируются в папку dist. Путь к файлу изображения правильный, я это проверил в выводе css и js. Сервер также может отображать файлы, я проверил некоторые из них, скопированные вручную.

То, что происходит, - то, что сами изображения искажены. Ни просмотрщик изображений, ни браузер не могут отобразить изображение, в результате чего в браузере появляется невидимое изображение.

Что я пробовал до сих пор:

• использование только babel-загрузчика, как предложено в: https://github.com/webpack/file-loader/issues/35, приводит к ошибке: нет обработчика для типа файла.
• используя загрузчик файлов напрямую
• используя image-webpack-loader (который, кажется, использует file-loader под капотом)
• используя IsomorphicLoaderPlugin ( https://github.com/jchip/isomorphic-loader), который кажется более простой альтернативой webpack-isomorphic-tools
• использование css background-images с помощью url() и ExtractTextPlugin('style-loader', 'css-loader')

Все вышеперечисленные шаги привели либо к ошибкам в веб-пакете, не найденным подходящим обработчиком, либо к поврежденным файлам изображений.

Вот моя текущая конфигурация веб-пакета для справки (я включил все на случай, если возникнут какие-либо проблемы / конфликты, которые я пропускаю):

var ExtractTextPlugin = require('extract-text-webpack-plugin'),
        webpack = require('webpack');
        IsomorphicLoaderPlugin = require("isomorphic-loader/lib/webpack-plugin");



module.exports = {

    context: __dirname + '/client',

    entry: ['babel-polyfill', './index.jsx'],

    output: {
        filename: 'app.js',
        path: __dirname + '/dist',
        publicPath: '/'
    },

    resolve: {
        ignore: /node_modules/,
        extensions: ['', '.js', '.jsx']
    },

    devtool: 'source-map',

    plugins: [
        new ExtractTextPlugin('styles.css'),

        new IsomorphicLoaderPlugin({ keepExistingConfig: false }),

        new webpack.DefinePlugin({
            "process.env": {
                BROWSER: JSON.stringify(true)
            }
        })
    ],

    module: {

        preLoaders: [
            {
                loaders: ['isomorphine']
            }
        ],

        loaders: [
            {
                test: /\.jsx?$/,
                loader: 'babel',
                exclude: /node_modules/,
                query: {
                    cacheDirectory: true,
                    plugins: ['transform-runtime', 'transform-decorators-legacy', 'transform-class-properties', 'transform-object-rest-spread'],
                    presets: ['react', 'es2015', 'stage-0']
                }
            },
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                loader: "file!isomorphic"
            }
        ]
    }
};