HtmlWebpackPluginは相対パスファイルを挿入し、ルート以外のWebサイトパスをロードすると破損します

113

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

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/ますが、たとえば、localhost:3000/items/1バンドルされたファイルに絶対パスが挿入されていないため、別のURLからアプリにアクセスしようとすると失敗します。htmlファイルがロードされると、/itemsreact-routerがまだロードされていないため、存在しないディレクトリ内でjsファイルを探します。

HtmlWebpackPluginに絶対パスでファイルを挿入させるにはどうすればいいですか？Expressは/distディレクトリではなくディレクトリのルートでファイルを探し/dist/items/main-...min.jsますか？または、問題を回避するためにExpressサーバーを変更できますか？

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>

— aherriot
ソース

198

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

output.publicPath = '/'

HtmlWebpackPluginはpublicPathを使用して、インジェクトのURLを付加します。

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

<base href="http://localhost:3000/">

— マグナス・スンガレ
ソース

7

ありがとう、追加output.publicPath = '/'が解決策でした。

— aherriot

3

リバースプロキシの背後で実行している場合、これは機能しません。

— t-my

4

また<base href="https://stackoverflow.com/">、HTMLテンプレートでホスト名をハードコーディングしたり、変数を補間したりする必要がないようにするためにも使用できます。

— Rafa 2017

サイトはIISと仮想ディレクトリを使用するASP.Net MVCプロジェクトであるため、publicPath = ''を設定して<base href = "〜/ dist /">を追加する必要がありました。

— より緊急の冗談

16

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

output.publicPath: './';

ROOT以外のパスで機能させるため。同時に私は注射をしていました：

   baseUrl: './'

に

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

両方のパラメーターセットを使用すると、魅力のように動作しました。

— ケビン・フォンテーン
ソース

これはURLブラウザ上でを示していhttps://localhost/myproject/%3C%=%20htmlWebpackPlugin.options.baseUrl%20%%3E#/project/1ます。これを解決する方法はありますか？

— NehaM 2017年

baseUrl: '.'HtmlWebpackPluginオプションのどこに設定していますか？{ meta: { baseUrl: './' } }？

— SomethingOn

@SomethingOnこのWebpackプロジェクトは現在手元にありません。この回答（デフォルト値を含む）を投稿してから、多くのことが変わったと思います。つまり、これは確かに設定すべき場所'./'ですが、正しい値です。

— Kevin FONTAINE 2018

1

これで、ベースタグを直接挿入できます。基本タグを挿入する

— Liang

2

Webpack設定

config.output.publicPath = ''

あなたのindex.html

<base href="/someurl/" />

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

— ハナド・レーマン
ソース