我正在使用带有babel-loader的webpack来转换.jsx反应文件 . 但是，添加文件加载器或样式和css-loader无法正确处理react组件或样式表中的required（）图像 .
它们被webpack识别并复制到dist文件夹 . 图像文件的路径是正确的，我在css和js输出中验证了这一点 . 服务器也能够显示文件，我已经检查了一些手动复制的文件 .
发生的事情是图像本身被破坏了 . 没有图像查看器和浏览器可以显示导致浏览器中不可见图像的图像 .
到目前为止我尝试过的：
-
仅使用babel-loader，如：https://github.com/webpack/file-loader/issues/35中所述，导致错误：文件类型没有处理程序 .
-
直接使用file-loader
-
使用image-webpack-loader（似乎是在引擎盖下使用文件加载器）
-
使用IsomorphicLoaderPlugin（https://github.com/jchip/isomorphic-loader），它似乎是webpack-isomorphic-tools的一个更简单的替代品
-
使用带有url（）和ExtractTextPlugin（'style-loader", ' css-loader'）的css background-images
上述所有步骤都导致webpack错误，找不到合适的处理程序或损坏的图像文件 .
这是我当前的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"
}
]
}
};