5

Używam webpack i html-webpack-plugin, aby zaktualizować mój plik index.html za pomocą wygenerowanego pakietu skryptów, takiego jak bundle.[hash].js.Jak wyprowadzić plik .html na dysk przy użyciu Webpack-dev-server i wtyczki HTML-Webpack-

Następnie muszę uruchomić webpack-dev-server, dzięki czemu mogę załadować ten pakiet do pamięci i skorzystać z wymiany modułu Hot.

To powoduje, że kod kompiluje się dwa razy.

Jednak to, co chciałbym jest webpack-dev-server być również w stanie zaktualizować plik index.html z nowym bundle.[hash].js, bo teraz muszę uruchomić webpack następnie webpack-dev-sever. Wydaje się dziwne, że kompiluje się dwa razy.

Ponownie, jedynym powodem, dla którego uruchamiam webpack jest zaktualizowanie mojego pliku index.html za pomocą nowego skrótu pakietu. Gdybym mógł uzyskać webpack-dev-server, aby wyprowadzić zaktualizowany plik index.html na dysk, mógłbym całkowicie zrzucić komendę webpack.

Czy to możliwe? Jeśli tak, co by zmieniło konfiguracja pakietu sieciowego? Moja konfiguracja webpacka jest bardzo długa, więc nie sądziłem, że pomoże to opublikować tutaj.

+0

Czy kiedykolwiek dowiedziałeś się, dlaczego kompiluje się dwa razy. mając ten sam problem ... – alphapilgrim

+0

Tak, kompiluje się dwa razy, ponieważ powinno się "skompilować", a "webpack-dev-server" się skompiluje. W końcu nie używałem "webpack" do aktualizacji pliku index.html i używam tylko 'webpack-dev-server' podczas programowania i tylko' webpack' podczas kompilacji produkcji. Będziesz musiał umieścić niektóre wykluczenia w jednym z nich, aby zapobiec temu. – TetraDev

Odpowiedz

1

webpack-dev-server będzie przechowywać skompilowany pakiet w pamięci i nie będzie pisać zawiniątko do Ouput katalogu, więc myślę, że nie trzeba dodawać [hash] w wiązki nazwy przy użyciu webpack-dev-server,

można mieć trzy pliki konfiguracyjne webpack, na przykład: webpack.common.js, webpack.dev.js i webpack.prod.js.

webpack.common.js zawiera wspólne konfiguracji, które mogą być łączone z innymi konfiguracjami stosując webpack-merge

webpack.dev.js użytego do webpack-dev-server i wyjście nazwa pliku powinny bundle.js

plik webpack.prod.js jest używany do produkcji, a nazwa pliku wyjściowego powinna być bundle.[hash].js

następnie można po prostu uruchomić webpack-dev-server webpack.dev.js

+0

Używam właśnie 3 różnych konfiguracji, od Angular2-webpack-starter. Ale aby uzyskać moją stronę serwera .NET "_Layout.cshtml" (która jest głównym widokiem dla aplikacji pojedynczej strony) do załadowania pakietu Webpack, '_Layout.cshtml' musi być zapisany przez webpack z nazwą pakiet.Dlatego webpack-dev-server nie może zaktualizować widoku z nowym hashem pakunku i muszę użyć "webpack", aby napisać nazwę pakietu, a następnie "webpack-dev-server" do obsługi pakietu. – TetraDev

+0

Właściwie to po prostu zdałem sobie sprawę, że nie można załadować starego hasha z webpack-dev-server, ponieważ nie ma pamięci podręcznej, jest ona ładowana do pamięci i usuwana za każdym razem, gdy serwer dev zatrzymuje się. Więc masz rację, że mogę usunąć skrót z pakietu deweloperów. – TetraDev

+1

Nowy pomysł: czy istnieje sposób, aby serwer 'webpack-dev-server' wyeksportował zasoby do wwwroot podczas kompilacji? A może tylko zasoby wyjściowe 'webpack' na dysk? – TetraDev

Powiązane problemy