[h.....c]

#webdev #webpack

Witajcie,

Od jakiegoś czasu uczę się tworzyć strony internetowe i ostatnio zacząłem korzystać z Webpacka 2. Opiszę krótko mój problem:

Struktura mojego projektu wygląda mniej więcej tak:

|-dist
--- index.html
|-src
--- img
--- css
--- js

Chcąc dodać jakieś zdjęcie jako background-image danego elementu, muszę w pliku css wpisać ścieżkę do pliku tak: url('/src/img/home/header-photo.png'); I wszystko działa, dopóki mam włączony podgląd strony poprzez webpack-dev-server, jednak uruchamiając stronę bezpośrednio z pliku *.html, te obrazy dodane w css'ie nie ładują się, ponieważ plik *.html potrzebuje takiego zapisu, aby odczytać zdjęcie: "../src/img/home/header-photo.png". Kluczowe tutaj są te dwie kropki na samym początku. Próbowałem użyć takiego zapisu przy dodawaniu zdjęcia w css'ie, lecz wtedy webpack nie kompiluje plików i wyświetla błąd, że nie może znaleźć takiej ścieżki.

No i chciałbym Was zapytać, czy znacie spośób jak to rozwiązać, żeby i Webpack nie miał problemów z odnalezieniem obrazu i plik *.html również. Szukałem rozwiązania mojego problemu na internecie, ale nie udało mi nic znaleźć, może ktoś z Was będzie potrafił mi z tym pomóc, lub podrzuci inne rozwiązanie jak powinno to się robić.

[siteeng]

@harleyowiec: jak chcesz zobaczyć stronę odpalając index.html, to musisz zrobić build'a. W przypadku gdy odpalasz bezpośrednio index.html webpack nie zadziała. Zerknij sobie w źródło po odpaleniu bezpośrednio index.html.

[h.....c]

@siteeng: Muszę w takim razie poszukać jak robi się build'a, bo nie miałem do tej pory z tym jeszcze styczności.

[h.....c]

@PolskiSwir345: Mógłbyś nieco rozwinąć ? Gdzie tego użyć ? Nie miałem z tym wcześniej styczności i nie bardzo rozumiem

[h.....c]

@siteeng: Mówiąc o buildzie, masz na myśli konfigurację webpacka, czy chodzi o jakiś konkretny build ? Jestem początkującym, być może moje pytania brzmią śmiesznie, ale lepiej zapytać, niż udawać, że się wie o co chodzi ;)

[P.....5]

@harleyowiec: moja odpowiedź raczej nie jest dobra, zignoruj

[siteeng]

@harleyowiec: poczytaj sobie, albo poszukaj jak zrobić build projektu, np. https://medium.com/selleo/perfectly-simple-webpack-2-setup-8b223e2ae0bd

[h.....c]

@siteeng Ok, sprawdziłem tą stronę. Mam zrobiony podobny build i programując uruchamiam go razem z webpack-dev-serverem i tak programuje, ale chodziło mi o to, że gdybym np. chciał pokazać swoją stronę nie na swoim komputerze i nie będę miał tam webpacka. Bezpośrednio z pliku index.html się nie da jak rozumiem, a jak to wygląda np. przy korzystaniu z jakiegoś hostingu ? Gdybym chciał wrzucić swój projekt na jakiś hosting, to co

[Defekt]

@harleyowiec: Webpack służy właśnie do tego, żeby z ładnej struktury plików i katalogów tworzyć pliki, które nadają się do wrzucenia na serwer (w uproszczeniu). A więc zwykle nie chcesz w ogóle korzystać z webpacka na serwerze tylko lokalnie, a na serwer wrzucasz to co webpack wygenerował.
Użyj po prostu ścieżek do plków wygenerowanych, a nie źródłowych.

[h.....c]

@Defekt Czyli jak rozumiem, mam nie podawać ścieżek do folderu gdzie mam wrzucone obrazy, tylko inaczej ma to wyglądać ? Mógłbyś podać jakiś prosty przykład ? Byłoby mi łatwiej to zrozumieć.

[Defekt]

Przeważnie kopiujesz obrazki, cssy (po zbudowaniu) i jsy (po zbudowaniu) do katalogu public.
WIęc jak masz obrazek w src/img/dolor.jpg to po skopiowaniu będziesz go miał (dla przykładu) w public, więc w html piszesz src="public/dolor.jpg".

Obczaj CopyWebpackPlugin.

[h.....c]

@Defekt: Ok, dzięki, sprawdzę

[h.....c]

@Defekt: Dodałem CopyWebpackPlugin do projektu, ale to nie rozwiązuje mojego problemu, bo wciąż muszę w CSS'ie podać ścieżkę do pliku "/home/photo.png" a wtedy index.html nie widzi tych plików bez webpacka, bo jeśli wpisze "home/photo.png" lub "./home/photo.png" to webpack wywala błąd że nie może znaleźć ścieżki.

[Defekt]

@harleyowiec: Wydaje mi się, że musisz zweryfikować to co jest problemem, a co nie jest. Przecież na tym to polega budowanie projektu, że wcześniej nie działa, bo jest w kawałkach. Wyobraź sobie, że próbujesz odpalić plik c++ przed skompilowaniem i dziwisz się, że nie chce się włączyć program. ;)

[h.....c]

@Defekt: Będę próbował zatem dalej znaleźć jakieś rozwiązanie tego problemu, dzięki za chęci ;)