BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] HtmlWebpackPluginが相対パスファイルを注入し、非ルートのウェブサイトパスを読み込むと壊れる件

2022-06-04 21:41:30

質問

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 ファイルが読み込まれると、存在しない /items ディレクトリの中にあるjsファイルを探します。

HtmlWebpackPlugin に絶対パスでファイルを注入させるには、どうすればよいでしょうか。 /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>

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

webpackの設定にpublicPathを設定してみてください。 

output.publicPath = '/'

HtmlWebpackPluginはpublicPathを使用して、注入するURLの前に追加します。

他の方法として、ベースとなる href を <head> で、ドキュメント内のすべての相対 URL のベースとなる URL を指定することです。 

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

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します