HtmlWebpackPlugin注入相對路徑文件，這些文件在加載非根網站路徑時會中斷

Question

我使用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文件時，它將在non-exist /items目錄中查找js文件，因為react-router尚未加載。

如何讓HtmlWebpackPlugin注入具有絕對路徑的文件，所以express會在my /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>

Answer 1

嘗試在webpack配置中設置publicPath：

output.publicPath = '/'

HtmlWebpackPlugin使用publicPath來預先注入注入的url。

另一個選項是在html模板的<head>中設置基本href，以指定文檔中所有相對URL的基本URL。

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

Answer 2

事實上，我不得不說：

output.publicPath: './';

為了讓它在非ROOT路徑下工作。 同時我注射：

   baseUrl: './'

成

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

有了這兩個參數設置，它就像一個魅力。

Answer 3

在webpack配置中

config.output.publicPath = ''

在index.html中

<base href="/someurl/" />

這應該做到這一點。

HtmlWebpackPlugin注入相對路徑文件，這些文件在加載非根網站路徑時會中斷

問題描述

3 個解決方案

解決方案1
164 已采納 2016-01-06 07:47:51

解決方案2
12 2016-12-01 09:26:13

解決方案3
1 2018-07-23 13:26:10

HtmlWebpackPlugin注入相對路徑文件，這些文件在加載非根網站路徑時會中斷

問題描述

3 個解決方案

解決方案1 164 已采納 2016-01-06 07:47:51

解決方案2 12 2016-12-01 09:26:13

解決方案3 1 2018-07-23 13:26:10

解決方案1
164 已采納 2016-01-06 07:47:51

解決方案2
12 2016-12-01 09:26:13

解決方案3
1 2018-07-23 13:26:10