HtmlWebpackPlugin wstrzykuje pliki ścieżek względnych, które ulegają uszkodzeniu podczas ładowania ścieżek do ścieżek innych niż root

Używam pakietu internetowego i wtyczki HtmlWebpackPlugin do wstrzyknięcia dołączonych js i css do pliku szablonu html.HtmlWebpackPlugin wstrzykuje pliki ścieżek względnych, które ulegają uszkodzeniu podczas ładowania ścieżek do ścieżek innych niż root

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

I produkuje 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 wizyty korzeń aplikacji localhost:3000/, ale nie powiedzie się, gdy próbuję znaleźć aplikację z innego adresu URL, na przykład, localhost:3000/items/1 ponieważ Dołączone pliki nie są wstrzykiwane bezwzględną ścieżkę. Po załadowaniu pliku html będzie szukał pliku js wewnątrz nieistniejącego katalogu /items, ponieważ router reakcji jeszcze nie został załadowany.

Jak mogę uzyskać wtyczkę HtmlWebpackPlugin, aby wstrzyknąć pliki z absolutną ścieżką, więc funkcja Express wyszuka je w katalogu głównym mojego katalogu /dist, a nie pod /dist/items/main-...min.js? A może mogę zmienić mój ekspresowy serwer, 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, po prostu trzeba uzyskać linię:

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

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

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

Źródło

2016-01-05 aherriot

104

Spróbuj ustawić publicPath w WebPACK config:

output.publicPath = '/'

HtmlWebpackPlugin użyć publicPath do poprzedzić adresy URL wstrzykuje.

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

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

Źródło

2016-01-06 07:47:51

Dziękujemy, dodanie 'output.publicPath = '/" 'było rozwiązaniem. – aherriot

Nie będzie działać, jeśli używasz odwrotnego proxy. –

Można również użyć po prostu ', aby uniknąć konieczności szyfrowania nazwy hosta w szablonie HTML lub konieczności interpolacji zmiennych. – Rafa

W rzeczywistości, musiałem:

output.publicPath: './';

aby mieć to działa w ścieżce niż root. Jednocześnie byłem wstrzykiwania:

baseUrl: './'

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

Zarówno zestaw parametrów, to działa jak czar.

Źródło

2016-12-01 09:26:13

To pokazuje 'URL' na przeglądarce jako' https: // localhost/myproject /% 3C% =% 20htmlWebpackPlugin.options.baseUrl% 20 %% 3E #/project/1'. Czy istnieje sposób na rozwiązanie tego problemu? – NehaM

HtmlWebpackPlugin wstrzykuje pliki ścieżek względnych, które ulegają uszkodzeniu podczas ładowania ścieżek do ścieżek innych niż root

Odpowiedz

Powiązane problemy