サーバ側レンダリングとwebpackを反応させる

Question

私はサーバ側のリアクションレンダリングが新しく、クライアント側のwebpackとサーバ側のExpressを使って単純な同形のReactアプリケーションを作ることができます。しかし、今、私はいくつかの問題を持っている - 私は私のプロジェクトで画像を使用することにしました：

export default class JustImage extends Component { 
    render() { 
    return (
     <div> 
     <img src={require("just_image.png")} /> 
     </div> 
    ); 
    } 
} 

それのコードは、クライアントのための魔法のように動作しますが、私のサーバー側のコード私は私にこのエラーを伝えるレンダリングしようとすると：

just_image.png: Unexpected character '�' 

私が理解しているように、Node.jsはWebpackローダーについて何も知らないので、イメージを正しく読み込むことはできません。 Reactとサーバーサイドのレンダリングでは新しいので、画像だけでなく、画像（PNG/JPEG/JPG/ICO）、SVG、SASS/LESS/CSS。前もって感謝します。

Answer 1

問題を解決するには2つの方法が私の知る限り、あります

1. は、同様に、サーバーコードのwebpackを使用してください。サーバー用のwebpack構成では、クライアント用に行ったのと同じローダーを使用できます。たとえば、イメージファイルにはurl-loaderまたはfile-loaderを使用できます。

   { 
       test: /\.(jpe?g|png|gif|svg)$/i, 
       loader: 'url-loader', 
       options: { 
       limit: 8192, 
       }, 
   } 
   

2. ご自分のサーバのコードの先頭にrequire.extensionsをハックすることができます。

   if (process.env === 'development') { 
       require.extensions['.png'] =() => {} 
   } 
   

私はそれが明はすぐにあなたがする必要が、あなたに言った基本的に、react-starter-kitコードを読み取ることにより、これについて多くのことを学びました同様の質問here答えを得ていない:)

Answer 2

を掲載webpackでサーバー側のコードをコンパイルするには、複数のwebpack configsが必要です。