dove sono i file e le configurazioni di webpack per creare-reagire-app?

172

Creo un progetto ReactJS con il create-react-apppacchetto e ha funzionato bene, ma non riesco a trovare i file e le configurazioni del webpack.

Come funziona la reatt-create-app con il webpack? Dove si trovano i file di configurazione del webpack in un'installazione predefinita create-react-app? Non riesco a trovare i file di configurazione nelle cartelle del mio progetto.

Non ho creato un file di configurazione di sostituzione. Posso gestire le impostazioni di configurazione con altri articoli ma voglio trovare i file di configurazione convenzionali.

— Mohammad
fonte

96

Se vuoi trovare file e configurazioni webpack vai al tuo file package.json e cerca gli script

Scoprirai che l'oggetto script sta usando una libreria reag-script

Ora vai a node_modules e cerca la cartella reagire-script reagire-script-in-nodo-moduli

Questa cartella reazioni -script / script e reazioni-script / config contiene tutte le configurazioni del webpack.

— Vikram Thakur
fonte

1

Ho visto ma non ho dir-script di reazione

— Mohammad il

4

Ho appena creato un'app usando create -eagire-app e nel mio caso c'è una cartella reag-script in node_modules. puoi condividere il tuo package.json

— Vikram Thakur il

5

Questa risposta non è più corretta , NPM è ora piatto, il che significa che tutti i moduli si trovano nella node_modulesdirectory principale

— vsync

4

La configurazione del webpack attuale è qui: github.com/facebook/create-react-app/blob/master/packages/…

— protoEvangelion

Il caso d'uso più comune sarebbe quello di personalizzare la configurazione del webpack del progetto. Ma se si trova in node_modules verrà sovrascritto in ogni installazione di npm, no?

— Blanc

59

Dalla documentazione :

Non è necessario installare o configurare strumenti come Webpack o Babel. Sono preconfigurati e nascosti in modo che tu possa concentrarti sul codice.

Se vuoi avere accesso ai file di configurazione, devi espellere eseguendo:

npm run eject

Nota: questa è un'operazione a senso unico. Una volta espulso, non puoi tornare indietro!

Nella maggior parte degli scenari, è meglio non espellere e cercare di trovare un modo per farlo funzionare per te in un altro modo. In questo modo, puoi aggiornare le tue dipendenze create-react-appe non dover affrontare l'inferno delle dipendenze di Webpack.

— klugjo
fonte

6

So che sono nascosti, ma voglio sapere dove sono e in che modo reatt-creare-app gestire questa capacità?

— Mohammad,

Quindi probabilmente dovrai guardare il codice sorgente. Non sono sicuro

— Klugjo

2

@Mohammad controlla la fonte per "reagire-script" puoi trovare tutte le configurazioni lì

— Jose Munoz,

1

Non risponde alla domanda, ma mi ha aiutato a prescindere

— Chicken Soup

32

Molte persone vengono su questa pagina con l'obiettivo di trovare la configurazione e i file del webpack per aggiungere loro la propria configurazione. Un altro modo per ottenere questo risultato senza eseguire npm run ejectè utilizzare la reatt-app-ricablata . Ciò consente di sovrascrivere il file di configurazione del webpack senza espellerlo.

— jjbskir
fonte

6

È ancora la soluzione preferita? C'è questo avvertimento sul progetto ricablato: github.com/timarney/react-app-rewired#rewire-your-app- : "A partire da Create React App 2.0 questo repository è" leggermente "gestito principalmente dalla comunità a questo punto. .. Nota: utilizzo personalmente next.js o Razzle che supportano entrambi Webpack personalizzato immediatamente. "

— Anthony Kong,

24

Supponendo che non si voglia espellere e si desideri solo guardare la configurazione in cui si trovano /node_modules/react-scripts/config

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

— vv1z
fonte

21

La configurazione Webpack utilizzata da create-react-appè qui: https://github.com/facebook/create-react-app/tree/master/packages/react-scripts/config

— Mihai Rotaru
fonte

2

questa dovrebbe essere la risposta

— Krankuba,

10

Puoi trovarlo nella cartella / config .

Quando espelli ricevi un messaggio come:

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

— Alfrex92
fonte

7

La configurazione del Webpack è gestita da reagenti-script . Puoi trovare tutta la configurazione del webpack all'interno di node_modules reazioni -script / config .

E se vuoi personalizzare la configurazione del webpack, puoi seguire personalize-webpack-config

— Hassan Ajaz
fonte

3

Prova a espellere i file di configurazione, eseguendo:

npm run eject

quindi troverai una cartella di configurazione creata nel tuo progetto. Troverai i file di configurazione del webpack init.

— Vinayak humberi
fonte

0

So che è piuttosto tardi, ma per le persone future che si imbattono in questo problema, se vuoi avere accesso alla configurazione del webpack di CRA, non c'è altro modo se non quello di eseguire:

$ npm run eject

Tuttavia, con l'espulsione, ti allontanerai dalla pipeline di aggiornamenti CRA, quindi dal punto di espulsione, devi mantenerlo da solo.

Ho riscontrato questo problema molte volte e quindi ho creato un modello per le app di reazione che hanno la stessa configurazione di CRA, ma anche vantaggi aggiuntivi (come componenti in stile, test di unità jest, Travis ci per distribuzioni, più carino , ESLint, ecc ...) per facilitare la manutenzione. Dai un'occhiata al repository .

— Humbledore
fonte