HtmlWebpackPlugin wstrzykuje pliki ścieżek względnych, które są przerywane podczas ładowania ścieżek innych niż root witryny

116

Używam pakietu webpack i HtmlWebpackPlugin do wstrzyknięcia pakietów js i css do pliku szablonu html.

new HtmlWebpackPlugin({
   template: 'client/index.tpl.html',
   inject: 'body',
   filename: 'index.html'
}),

I tworzy następujący plik 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>

Działa to dobrze podczas odwiedzania katalogu głównego aplikacji localhost:3000/, ale kończy się niepowodzeniem, gdy próbuję odwiedzić aplikację z innego adresu URL, na przykład localhost:3000/items/1ponieważ dołączone pliki nie są wstrzykiwane z bezwzględną ścieżką. Po załadowaniu pliku html będzie szukał pliku js w nieistniejącym /itemskatalogu, ponieważ reakcja-router nie została jeszcze załadowana.

Jak mogę zmusić HtmlWebpackPlugin do wstrzyknięcia plików z bezwzględną ścieżką, aby express będzie szukał ich w katalogu głównym mojego /distkatalogu, a nie w /dist/items/main-...min.js? A może mogę zmienić serwer ekspresowy, aby obejść ten problem?

app.use(express.static(__dirname + '/../dist'));

app.get('*', function response(req, res) {
  res.sendFile(path.join(__dirname, '../dist/index.html'));
});

Zasadniczo potrzebuję tylko linii:

<script src="main...js"></script>

mieć ukośnik na początku źródła.

<script src="/main...js></script>
javascript express webpack react-router aherriot
źródło

Odpowiedzi:

199

Spróbuj ustawić publicPath w konfiguracji swojego pakietu internetowego:

output.publicPath = '/'

HtmlWebpackPlugin używa publicPath do dołączania adresów URL wstrzyknięć.

Inną opcją jest ustawienie podstawowego href w <head>szablonie HTML, aby określić podstawowy adres URL wszystkich względnych adresów URL w dokumencie.

<base href="http://localhost:3000/">
Magnus Sjungare
źródło
7
Dziękuję, dodanie output.publicPath = '/'było rozwiązaniem.
aherriot
3
To nie zadziała, jeśli korzystasz z odwrotnego proxy.
t-my
4
Możesz również użyć po prostu, <base href="https://stackoverflow.com/">aby uniknąć konieczności zapisywania na stałe nazwy hosta w szablonie HTML lub konieczności interpolacji zmiennych.
Rafa
Musiałem ustawić publicPath = '' i dodać <base href = "~ / dist /">, ponieważ moja witryna jest projektem ASP.Net MVC korzystającym z usług IIS i katalogu wirtualnego.
bardziej pilne to
16

W rzeczywistości musiałem umieścić:

output.publicPath: './';

aby działał w ścieżce innej niż ROOT. W tym samym czasie wstrzykiwałem:

   baseUrl: './'

w 

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

Z obydwoma ustawionymi parametrami działało jak urok.

Kevin FONTAINE
źródło
To pokazuje URLprzeglądarkę jako https://localhost/myproject/%3C%=%20htmlWebpackPlugin.options.baseUrl%20%%3E#/project/1. Czy jest jakiś sposób, aby to rozwiązać?
NehaM
Gdzie ustawiasz baseUrl: '.'to w opcjach HtmlWebpackPlugin? { meta: { baseUrl: './' } }?
Coś,
@SomethingOn Nie mam w tej chwili tego projektu pakietu internetowego i myślę, że wiele rzeczy się zmieniło, odkąd opublikowałem tę odpowiedź (w tym wartość domyślna). Więc tak, to z pewnością miejsce, w którym należy go ustawić, ale './'jest to poprawna wartość.
Kevin FONTAINE,
1
Teraz może bezpośrednio wstrzyknąć znacznik bazowy. wstrzyknięcie znacznika bazowego
Liang
2

w konfiguracji webpacka 

config.output.publicPath = ''

w pliku index.html 

<base href="/someurl/" />

to powinno wystarczyć.

hannad rehman
źródło