2017-05-11 49 views
2

WebpackにバンドルされたReact & react-router v4アプリケーションを作成しています。私はasync split pointsを作成しており、オンデマンドで自分のアプリケーションの反応ルータルート用にWebpackと非同期のロードバンドルを作成しています。サーバーにデプロイするときに非同期バンドルロードが動作するためにはwebpack-dev-serverで特定のURLを書き換える方法

/myapp/static/<assetName> 

:私は私のサーバーに自分の静的な資産を、これを展開するときに、私のアプリは、「myappの」と呼ばれていると仮定すると、

から提供する必要があります、私のWebPACKの出力の設定は次のとおりです。

devServer: { 
    historyApiFallback: true, 
    inline: true, 
    port: 4000, 
    publicPath: "/myapp" // this is so my app is served from http://locahost:4000/myapp 
} 
:私のdevServerセクションで
output: { 
    path: path.resolve(__dirname, "build"), 
    publicPath: "/myapp/static/", 
    chunkFilename: "[name].[chunkhash].bundle.js", 
    filename: "[name].[chunkhash].bundle.js" 
} 

私はこれを持っています

​​

が... HTMLがアップ提供していますが、すべてのURL:私は実際に自分のサーバーに展開するときに210

私はWebPACKの-devのサーバーを実行して、私がアクセスところがとき、すべての問題を持っていませんHtmlWebpackPluginによって私のバンドルのために生成されたものは/myapp/static/<bundleName>であるので、バンドルが/mpapp/<bundleName>で提供されているときにフェッチすることができません。

/myapp/static/<bundleName>から/myapp/<bundleName>を書き換えて、実際にローカルで提供されているバンドルにルーティングするように、webpack-dev-serverを設定するにはどうすればいいですか?/myapp

私は書き直しとプロキシディレクティブのすべての方法を試しましたが、私はちょうどアプリを壊しているようです - 私は見落としている簡単な方法があると確信しています。

多くのありがとうございます。

+0

ここにもう一つの可能​​なオプションは、私は私を変えていますプロセスを構築する。だからローカルdevの私のwebpackの設定は、通常バンドルを提供し、私のprodビルドプロセスは、特定の/ myapp /静的なpublicPathディレクティブを使用して? – Michael

+0

基本的なnode.jsエクスプレスサーバーは、私が望むものを実現するwebpack-devミドルウェアを使って書かれています。基本的に私のパブリックパスに静的パスをマップします: 'app.use("/myapp/static "、express.static path.join(__ dirname、 "/../ public"))); '。 webpack-dev-serverでこれを実現する方法はありますか?ありがとう。 – Michael

答えて

関連する問題