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.

javascript reactjs webpack ecmascript-6 create-react-app Mohammad
źródło

Odpowiedzi:

96

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

img

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
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