web-dev-qa-db-ja.com

HtmlWebpackPluginは、非ルートWebサイトのパスをロードすると壊れる相対パスファイルを挿入します

WebpackとHtmlWebpackPluginを使用して、バンドルされたjsとcssをhtmlテンプレートファイルに挿入します。

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ディレクトリのルートでそれらを検索しますか？または、問題を回避するためにエクスプレスサーバーを変更できますか？

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>

ソースの先頭にスラッシュを付けます。

<script src="/main...js></script>
javascriptexpresswebpackreact-router
94
aherriot

Webpack configでpublicPathを設定してみてください：

output.publicPath = '/'

HtmlWebpackPluginはpublicPathを使用して、注入のURLを付加します。

別のオプションは、HTMLテンプレートの<head>にベースhrefを設定し、ドキュメント内のすべての相対URLのベースURLを指定することです。

<base href="http://localhost:3000/">
164
Magnus Sjungare

実際には、私は置く必要がありました：

output.publicPath: './';

非ROOTパスで機能させるために。同時に私は注入していました：

   baseUrl: './'

に

<base href="<%= htmlWebpackPlugin.options.metadata.baseUrl %>">

両方のパラメータを設定すると、それは魅力のように機能しました。

12
Kevin FONTAINE

webpack configで

config.output.publicPath = ''

あなたのindex.htmlで

<base href="/someurl/" />

これでうまくいくはずです。

1
hannad rehman