gdzie jest konfiguracja i pliki pakietu webpack create-react-app?

173

Tworzę projekt ReactJS z create-react-apppakietem i działa dobrze, ale nie mogę znaleźć plików i konfiguracji pakietu webpack .

Jak działa aplikacja react-create-app z pakietem internetowym? Gdzie znajdują się pliki konfiguracyjne pakietu WebPack w domyślnej instalacji create-react-app? Nie mogę znaleźć plików konfiguracyjnych w folderach mojego projektu.

Nie utworzyłem nadpisanego pliku konfiguracyjnego. Mogę zarządzać ustawieniami konfiguracji z innymi artykułami, ale chcę znaleźć konwencjonalne pliki konfiguracyjne.

— Mohammad
źródło

96

Jeśli chcesz znaleźć pliki i konfiguracje pakietu internetowego, przejdź do pliku package.json i poszukaj skryptów

Przekonasz się, że obiekt scripts używa biblioteki re-scripts

Teraz przejdź do node_modules i poszukaj folderu react- scripts respond -script-in-node-modules

Ten folder react-scripts / scripts i react-scripts / config zawiera wszystkie konfiguracje pakietów webpack.

— Vikram Thakur
źródło

1

Widziałem, ale nie mam reż. Skrypty

— Mohammad

4

Właśnie stworzyłem aplikację za pomocą create-react-app, aw moim przypadku jest folder react-scripts w node_modules. czy możesz udostępnić swój pakiet.json

— Vikram Thakur

5

Ta odpowiedź nie jest już poprawna , NPM jest teraz płaski, co oznacza, że wszystkie moduły znajdują się w node_moduleskatalogu głównym

— vsync

4

Rzeczywista konfiguracja webpacka

— protoEvangelion

Najczęstszym przypadkiem użycia byłoby dostosowanie konfiguracji pakietu internetowego projektu. Ale jeśli jest w node_modules, zostanie nadpisany przy każdej instalacji npm, prawda?

— Blanc

59

Z dokumentacji :

Nie musisz instalować ani konfigurować narzędzi takich jak Webpack czy Babel. Są wstępnie skonfigurowane i ukryte, abyś mógł skupić się na kodzie.

Jeśli chcesz mieć dostęp do plików konfiguracyjnych, musisz je wysunąć , uruchamiając:

npm run eject

Uwaga: jest to operacja jednokierunkowa. Po wysunięciu nie możesz wrócić!

W większości scenariuszy najlepiej jest nie wyrzucać i próbować znaleźć sposób, aby zadziałał w inny sposób. W ten sposób możesz zaktualizować swoje zależności przez create-react-apppiekło zależności Webpacka i nie musisz zajmować się nimi.

— klugjo
źródło

6

Wiem, że są one ukryte, ale chcę wiedzieć, gdzie one są i jak aplikacja „Reaguj-utwórz” obsługuje tę możliwość?

— Mohammad

Wtedy prawdopodobnie będziesz musiał spojrzeć na kod źródłowy. Nie jestem pewien

— klugjo

2

@Mohammad sprawdź źródło 'react-scripts', możesz tam znaleźć całą konfigurację

— Jose Munoz

1

Nie odpowiada na pytanie, ale pomogło mi mimo wszystko

— Chicken Soup

33

Wiele osób odwiedza tę stronę w celu znalezienia konfiguracji i plików pakietu webpack, aby dodać do nich własną konfigurację. Innym sposobem na osiągnięcie tego bez uruchamiania npm run ejectjest użycie rewired-app-rewired . Pozwala to na nadpisanie pliku konfiguracyjnego pakietu internetowego bez wysuwania.

— jjbskir
źródło

6

Czy nadal jest to preferowane rozwiązanie? Jest to ostrzeżenie dotyczące projektu rewired : github.com/timarney/react-app-rewired#rewire-your-app- : „Od momentu utworzenia aplikacji React App 2.0 to repozytorium jest„ lekko ”obsługiwane głównie przez społeczność. .. Uwaga: osobiście używam next.js lub Razzle, które obsługują niestandardowy pakiet Webpack po wyjęciu z pudełka. ”

— Anthony Kong

24

Zakładając, że nie chcesz wysunąć i chcesz po prostu spojrzeć na konfigurację, w której je znajdziesz /node_modules/react-scripts/config

webpack.config.dev.js. //used by `npm start`
webpack.config.prod.js //used by `npm run build`

— vv1z
źródło

21

Konfiguracja WebPacka używana przez create-react-appjest tutaj: https://github.com/facebook/create-react-app/tree/master/packages/react-scripts/config

— Mihai Rotaru
źródło

2

to powinna być odpowiedź

— krankuba

10

Możesz go znaleźć w folderze / config .

Po wysunięciu otrzymasz wiadomość taką jak:

 Adding /config/webpack.config.dev.js to the project
 Adding /config/webpack.config.prod.js to the project

— Alfrex92
źródło

7

Konfiguracja pakietu WebPack jest obsługiwana przez skrypty reagujące . Możesz znaleźć całą konfigurację pakietu webpack w node_modules react-scripts / config .

Jeśli chcesz dostosować konfigurację pakietu webpack, możesz skorzystać z tego pliku dostosuj-webpack-config

— Hassan Ajaz
źródło

3

Spróbuj wysunąć pliki konfiguracyjne, uruchamiając:

npm run eject

wtedy znajdziesz folder konfiguracyjny utworzony w swoim projekcie. Znajdziesz pliki konfiguracyjne pakietu webpack init.

— Vinayak humberi
źródło

0

Wiem, że jest dość późno, ale dla przyszłych ludzi, którzy natkną się na ten problem, jeśli chcesz mieć dostęp do konfiguracji pakietu internetowego CRA, nie ma innego wyjścia, jak tylko musisz uruchomić:

$ npm run eject

Jednak w przypadku wyrzucenia odetniesz się od potoku aktualizacji CRA, dlatego od momentu wyrzucenia musisz sam go utrzymywać.

Wielokrotnie zetknąłem się z tym problemem, dlatego stworzyłem szablon dla aplikacji reagujących, które mają większość tej samej konfiguracji co CRA, ale także dodatkowe korzyści (jak styled-components, jest unit test, Travis ci dla wdrożeń, ładniejsze , ESLint, itp ...), aby ułatwić konserwację. Sprawdź repozytorium .

— Humbledore
źródło