如何使用 webpack 服务器端处理静态资产？

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

我将文件加载器与 emmitFile: false 一起使用，以将资产从服务器端的捆绑中排除。按预期工作。

const imageRules = (emit = true) => ({
    test: /\.(png|svg|jpeg|jpg|gif|ico)$/,
    type: "asset",
    generator: {
        emit: emit,
    },
});

然后在 webpack 客户端配置中使用它：

module: {
    rules: [imageRules()],
},

并在服务器配置中

module: {
    rules: [imageRules(false)],
},