Reactjs 用于react的带有babel loader的网页会损坏图像文件

Reactjs 用于react的带有babel loader的网页会损坏图像文件,reactjs,webpack,babeljs,isomorphic-javascript,Reactjs,Webpack,Babeljs,Isomorphic Javascript,我使用带有babel loader的webpack来转换.jsx文件。 但是,添加文件加载器或样式和css加载器无法正确处理react组件或样式表中所需的图像() 它们被webpack识别并复制到dist文件夹。图像文件的路径是正确的,我已经在css和js输出中验证了这一点。 服务器也可以显示文件,我已经检查了一些手动复制的文件 现在发生的是图像本身被破坏。任何图像查看器或浏览器都无法显示导致浏览器中出现不可见图像的图像 到目前为止,我所尝试的: 按照中的建议仅使用babel loader,会

我使用带有babel loader的webpack来转换.jsx文件。 但是,添加文件加载器或样式和css加载器无法正确处理react组件或样式表中所需的图像()

它们被webpack识别并复制到dist文件夹。图像文件的路径是正确的,我已经在css和js输出中验证了这一点。 服务器也可以显示文件,我已经检查了一些手动复制的文件

现在发生的是图像本身被破坏。任何图像查看器或浏览器都无法显示导致浏览器中出现不可见图像的图像

到目前为止,我所尝试的:

  • 按照中的建议仅使用babel loader,会导致错误:没有文件类型的处理程序
  • 直接使用文件加载器
  • 使用图像网页包加载器(似乎在引擎盖下使用文件加载器)
  • 使用IsomorphicLoaderPlugin(),这似乎是Web包同构工具的一个更简单的替代方法
  • 将css背景图像与url()和ExtractTextPlugin('style-loader','css loader')一起使用
上述所有步骤都会导致webpack找不到合适的处理程序时出错,或者导致图像文件损坏

以下是我当前的网页配置,以供参考(我已经包括了所有配置,以防我忽略了任何问题/冲突):

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"
            }
        ]
    }
};