WebPACKの動的高次コンポーネントにモジュールを必要

Question

は、私は、次の高次の成分を持っていると言う以上は、動的であることの

FormFactorSensitiveWrapper(Home, 'pages/home'); 

目標私たちがデスクトップ対モバイル固有のバンドルをコンパイルしているかどうかに依存して、モジュールで必要なスタイリングファイルの切り替え。

このアプローチは動作しますが - かろうじて - WebPACKのコンテキストを決定するために、一見できず、代わりにそのチャンクへstyle、フォルダ内のすべてのファイルをコンパイルしているように私は、バンドルのコンパイル+非常に肥大化したチャンクで致命的でない警告を取得します。私はrequire.contextを使ってアプローチを試みましたが、それは別々の失敗がありました（私のwebpack.config.jsで定義されたローダーは適切に適用されていないようです）。

EDIT私は次のようにも（意味、環境変数の使用が問題を引き起こしていない）同じ問題につながることに注意してください：

const FormFactorSensitiveWrapper = function(Component, styleFilePath) { 
    if (styleFilePath) { 
     require('styles/' + styleFilePath + '.desktop');   
    } 

    const FormFactorSensitive = React.createClass({ 
     render: function() { 
      return <Component {...this.props} /> 
     } 
    }); 

    return FormFactorSensitive; 
}; 

Answer 1

私は問題であることを感覚を得ますもちろん

if (styleFilePath) { 
    switch (styleFilePath) { 
    case 'blue': 
     require('styles/blue.desktop'); 
    case 'red': 
     require('styles/red.desktop'); 
    } 
} 

これはすべてあなたのスタイルのWebPACKがあるrequire contextを作成することで、とにかくやっていることで、このファイルにインポートされることを意味：動的なパスを必要とし、より多くの冗長モードを使用してみてくださいダイナミックな表現のためのすべての可能な組み合わせを必要としようとしている（'styles/' + styleFilePath + '.desktop'）

あなたは2