javascript - 如何使用 webpack 服务器端处理静态 Assets ？

Question

我正在尝试创建一个通用的 react 应用程序(在服务器和客户端上使用 webpack)并努力导入图像。我想写这个:

import someImage from './someImage.png'

const SomeImage = () => <img src={someImage}/>

这是我的 webpack 配置文件:

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-tools 这样的包或 universal-webpack 甚至可以发出或不发出文件的文件加载器包，但我不明白在我的通用应用程序中使用它。

Answer 1

我正在使用带有 emitFile: false 的文件加载器来从服务器端的捆绑中排除 Assets 。按预期工作。

    module: {
      rules: [
        {
          test: /\.(png|jpeg|gif|ico|ttf|css)$/,
          use: [
            {
              loader: "file-loader",
              options: { emitFile: false },
            },
          ],
        }
      ],
    },