如何处理与webpack服务器端的静态资产?

我试图创build一个通用的反应应用程序(在服务器和客户端上使用webpack),并与图像导入斗争。 我想写这个:

import someImage from './someImage.png' const SomeImage = () => <img src={someImage}/> 

这是我的webpackconfiguration文件:

 var path = require('path'); var webpack = require('webpack'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { entry: [ 'webpack-dev-server/client?http://127.0.0.1:8080/', 'webpack/hot/only-dev-server', './client', 'babel-polyfill' ], output: { path: path.join(__dirname, 'dist'), filename: 'bundle.js' }, resolve: { modulesDirectories: ['node_modules', 'shared'], extensions: ['', '.js', '.jsx'] }, module: { loaders: [ { test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel'] }, { test: /\.css/, exclude: /node_modules/, loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]') }, { test: /\.(jpe?g|png|gif|svg)$/i, loaders: [ 'file?emitFile=false', ] } ] }, plugins: [ new ExtractTextPlugin('styles.css', { allChunks: true }), new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin() ], devtool: 'inline-source-map', devServer: { hot: true, proxy: { '*': 'http://127.0.0.1:' + (process.env.PORT || 3000) }, host: '127.0.0.1' } }; 

显然这不是在服务器端工作,因为node试图读取./someImage.png文件的内容,导致错误。

我该如何处理? 我知道有一些软件包,如webpack-isomorphic-toolsuniversal-webpack ,甚至是可以发送或不发送文件的文件加载程序包,但我不明白在我的通用应用程序中使用它。