où se trouvent la configuration et les fichiers du pack web create-react-app?

174

Je crée un projet ReactJS avec le create-react-apppackage et cela a bien fonctionné, mais je ne trouve pas de fichiers et de configurations Webpack.

Comment React-Create-App fonctionne avec Webpack? Où se trouvent les fichiers de configuration Webpack dans une installation par défaut avec create-react-app? Je ne parviens pas à trouver les fichiers de configuration dans les dossiers de mon projet.

Je n'ai pas créé de fichier de configuration de remplacement. Je peux gérer les paramètres de configuration avec d'autres articles mais je veux trouver le (s) fichier (s) de configuration conventionnel (s).

Mohammad
la source

Réponses:

96

Si vous voulez trouver des fichiers et des configurations webpack, accédez à votre fichier package.json et recherchez des scripts

img

Vous constaterez que l'objet scripts utilise une bibliothèque react-scripts

Maintenant, allez dans node_modules et recherchez le dossier react-scripts react -script-in-node-modules

Ce dossier react -scripts / scripts et react-scripts / config contient toutes les configurations Webpack.

Vikram Thakur
la source
1
J'ai vu mais je n'ai pas réagi-scripts dir
Mohammad
4
Je viens de créer une application en utilisant create-react-app et dans mon cas, il y a un dossier react-scripts dans node_modules. pouvez-vous partager votre package.json
Vikram Thakur
5
Cette réponse n'est plus correcte , NPM est maintenant plat, ce qui signifie que tous les modules sont sur le node_modulesrépertoire racine
vsync
4
La configuration actuelle du webpack est ici: github.com/facebook/create-react-app/blob/master/packages/…
protoEvangelion
Le cas d'utilisation le plus courant serait de personnaliser la configuration du webpack du projet. Mais s'il est dans node_modules, il sera écrasé à chaque installation de npm, n'est-ce pas?
Blanc
59

De la documentation :

Vous n'avez pas besoin d'installer ou de configurer des outils comme Webpack ou Babel. Ils sont préconfigurés et masqués afin que vous puissiez vous concentrer sur le code.

Si vous souhaitez avoir accès aux fichiers de configuration, vous devez éjecter en exécutant:

npm run eject

Remarque: il s'agit d'une opération à sens unique. Une fois que vous vous éjectez, vous ne pouvez plus revenir en arrière!

Dans la plupart des scénarios, il est préférable de ne pas éjecter et d'essayer de trouver un moyen de le faire fonctionner pour vous d'une autre manière. De cette façon, vous pouvez mettre à jour vos dépendances create-react-appsans avoir à gérer l'enfer des dépendances Webpack.

Klugjo
la source
6
Je sais que ceux-ci sont cachés, mais je veux savoir où sont-ils et comment react-create-app gère cette capacité?
Mohammad
Ensuite, vous devrez probablement regarder le code source. Je ne suis pas sûr
klugjo
2
@Mohammad consultez la source des 'react-scripts', vous pouvez trouver toute la configuration là
Jose Munoz
1
Ne répond pas à la question, mais m'a aidé malgré tout
Soupe au poulet
33

Beaucoup de gens viennent sur cette page dans le but de trouver la configuration et les fichiers du pack Web afin d'y ajouter leur propre configuration. Une autre façon d'y parvenir sans courir npm run ejectest d'utiliser react-app-rewired . Cela vous permet d'écraser votre fichier de configuration webpack sans l'éjecter.

jjbskir
la source
6
Est-ce toujours la solution préférée? Il y a cet avertissement sur le projet rewired : github.com/timarney/react-app-rewired#rewire-your-app- : "Depuis Create React App 2.0, ce dépôt est" légèrement "maintenu principalement par la communauté à ce stade. .. Remarque: j'utilise personnellement next.js ou Razzle, qui prennent tous deux en charge le Webpack personnalisé dès la sortie de la boîte. "
Anthony Kong
25

En supposant que vous ne vouliez pas éjecter et que vous vouliez simplement regarder la configuration dans laquelle vous les trouverez /node_modules/react-scripts/config

webpack.config.dev.js. //used by `npm start`
webpack.config.prod.js //used by `npm run build`
vv1z
la source
10

Vous pouvez le trouver dans le dossier / config .

Lorsque vous éjectez, vous recevez un message du type:

 Adding /config/webpack.config.dev.js to the project
 Adding /config/webpack.config.prod.js to the project
Alfrex92
la source
7

La configuration de Webpack est gérée par des scripts de réaction . Vous pouvez trouver toutes les configurations Webpack dans node_modules react -scripts / config .

Et si vous souhaitez personnaliser la configuration du webpack, vous pouvez suivre cette personnalisation-webpack-config

Hassan Ajaz
la source
3

Essayez d'éjecter les fichiers de configuration en exécutant:

npm run eject

alors vous trouverez un dossier de configuration créé dans votre projet. Vous trouverez vos fichiers de configuration webpack init.

Vinayak humberi
la source
0

Je sais qu'il est assez tard, mais pour les futures personnes qui tombent sur ce problème, si vous voulez avoir accès à la configuration webpack de CRA, il n'y a pas d'autre moyen sauf que vous devez exécuter:

$ npm run eject

Cependant, avec l'éjection, vous vous retirerez du pipeline de mises à jour de l'ARC, par conséquent, à partir du point d'éjection, vous devez le maintenir vous-même.

J'ai rencontré ce problème plusieurs fois, et j'ai donc créé un modèle pour les applications de réaction qui ont la plupart de la même configuration que CRA, mais aussi des avantages supplémentaires (comme des composants stylisés, un test unitaire de plaisanterie, Travis ci pour les déploiements, plus joli , ESLint, etc ...) pour faciliter la maintenance. Découvrez le repo .

Humbledore
la source