如何使用 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

我正在使用帶有emitFile: false 的文件加載器來從服務器端的捆綁中排除資產。 按預期工作。

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