[解決済み] webpack-dev-serverでreact-routerからの入力を許可する方法

質問

開発でreact-routerと一緒にwebpack-dev-serverを使用するアプリを作っています。

webpack-dev-serverは一箇所(つまり"/")に公開されたエントリポイントを持つことを前提に作られているようですが、react-routerではエントリポイントを無制限に持つことができるようです。

webpack-dev-serverの利点、特にホットリロード機能は生産性に優れているので欲しいのですが、やはりreact-routerで設定したルートをロードできるようにしたいのです。

どのように実装すれば、両者が連動するようになるのでしょうか？webpack-dev-server の前に express server を走らせれば、このようなことが可能になるのでしょうか？

どのように解決するのですか？

プロキシを設定して実現しました。

通常の express ウェブサーバが、アセットルート以外のあらゆるルートで index.html を提供します。

react のホットエントリーポイントは webpack の開発サーバーを直接指すので、ホットリロードはまだ機能します。

webpack-dev-server を 8081 で動かし、プロキシを 8080 で動かすと仮定しましょう。server.js ファイルはこのようになります。

"use strict";
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./make-webpack-config')('dev');

var express = require('express');
var proxy = require('proxy-middleware');
var url = require('url');

## --------your proxy----------------------
var app = express();
## proxy the request for static assets
app.use('/assets', proxy(url.parse('http://localhost:8081/assets')));

app.get('/*', function(req, res) {
    res.sendFile(__dirname + '/index.html');
});


# -----your-webpack-dev-server------------------
var server = new WebpackDevServer(webpack(config), {
    contentBase: __dirname,
    hot: true,
    quiet: false,
    noInfo: false,
    publicPath: "/assets/",

    stats: { colors: true }
});

## run the two servers
server.listen(8081, "localhost", function() {});
app.listen(8080);

のように、webpackの設定にエントリーポイントを作成します。

 entry: [
     './src/main.js',
     'webpack/hot/dev-server',
     'webpack-dev-server/client?http://localhost:8081'
 ]

hotreloadのために8081に直接コールしていることに注意してください。

に絶対パスを渡していることも確認してください。 output.publicPath オプションに絶対パスを渡すようにしてください。

 output: {
     publicPath: "http://localhost:8081/assets/",
     // ...
 }