64
webpackとHtmlWebpackPluginを使用して、バンドルされたjsとcssをhtmlテンプレートファイルに挿入します。HtmlWebpackPluginは、ルート以外のWebサイトパスをロードするときに壊れる相対パスファイルを挿入します。
new HtmlWebpackPlugin({
template: 'client/index.tpl.html',
inject: 'body',
filename: 'index.html'
}),
そして、次のhtmlファイルを生成します。
<!doctype html>
<html lang="en">
<head>
...
<link href="main-295c5189923694ec44ac.min.css" rel="stylesheet">
</head>
<body>
<div id="app"></div>
<script src="main-295c5189923694ec44ac.min.js"></script>
</body>
</html>
これはアプリlocalhost:3000/のルートを訪問したときに正常に動作しますが、私はバンドルファイルが絶対パスで注入されないので、例えば、別のURLからlocalhost:3000/items/1をアプリを訪問しようとすると失敗します。 htmlファイルがロードされると、react-routerがまだロードされていないので、存在しない/itemsディレクトリ内のjsファイルを探します。
HtmlWebpackPluginに絶対パスでファイルを注入するにはどうすればよいですか？expressは/distディレクトリのルートで、/dist/items/main-...min.jsではなくそれらを検索しますか？または、問題を回避するためにエクスプレスサーバーを変更することはできますか？
<script src="main...js"></script>
はソースの先頭にスラッシュを持っている：
app.use(express.static(__dirname + '/../dist'));
app.get('*', function response(req, res) {
res.sendFile(path.join(__dirname, '../dist/index.html'));
});
は基本的に、私はラインを取得する必要があります。
<script src="/main...js></script>
ありがとうございます。 'output.publicPath ='/'が追加されました。 – aherriot
リバースプロキシの背後で実行している場合、これは機能しません。 –
HTMLテンプレートのホスト名をハードコードすることや、変数を補間することを避けるために、単純に '