जहाँ बनाने के लिए प्रतिक्रिया-अनुप्रयोग-वेबपैक कॉन्फिग और फाइल्स है?


173

मैं के साथ एक ReactJS प्रोजेक्ट बनाता हूं create-react-app पैकेज के और यह अच्छी तरह से काम करता है, लेकिन मुझे वेबपैक फाइलें और कॉन्फ़िगरेशन नहीं मिल सकते हैं।

वेबपैक के साथ प्रतिक्रिया-निर्माण-ऐप कैसे काम करता है? वेबपैक कॉन्फ़िगरेशन फ़ाइल कहाँ डिफ़ॉल्ट स्थापना के साथ स्थित हैं create-react-app? मैं अपने प्रोजेक्ट के फ़ोल्डर्स में कॉन्फ़िगरेशन फ़ाइलों को खोजने में असमर्थ हूं।

मैंने एक ओवरराइड कॉन्फ़िग फ़ाइल नहीं बनाई है। मैं अन्य लेखों के साथ कॉन्फिग सेटिंग्स का प्रबंधन कर सकता हूं लेकिन मैं पारंपरिक कॉन्फिग फाइल (ओं) को ढूंढना चाहता हूं।

जवाबों:


96

यदि आप वेबपैक फ़ाइल ढूंढना चाहते हैं और कॉन्फ़िगरेशन आपकी पैकेज.जॉसन फ़ाइल पर जाएं और स्क्रिप्ट देखें

img

आप पाएंगे कि स्क्रिप्ट ऑब्जेक्ट किसी लाइब्रेरी का उपयोग कर रहा है रिएक्शन-स्क्रिप्ट

अब node_modules पर जाएं और प्रतिक्रिया-स्क्रिप्ट फ़ोल्डर देखें प्रतिक्रिया-स्क्रिप्ट-इन-नोड-मॉड्यूल की तलाश करें

यह प्रतिक्रिया-स्क्रिप्ट / स्क्रिप्ट और प्रतिक्रिया-स्क्रिप्ट / कॉन्फिग फ़ोल्डर में सभी वेबपैक कॉन्फ़िगरेशन शामिल हैं।


1
मैंने देखा, लेकिन मैंने कोई प्रतिक्रिया नहीं दी है-लिप्स
मोहम्मद

4
मैंने सिर्फ create-react-app का उपयोग करके एक ऐप बनाया है और मेरे मामले में नोड_मॉड्यूल्स में एक फ़ोल्डर रिएक्शन-स्क्रिप्ट है। क्या आप अपना पैकेज साझा कर सकते हैं। आगजनी
विक्रम ठाकुर

5
यह उत्तर अब सही नहीं है , NPM का अब सपाट अर्थ है कि सभी मॉड्यूल रूट node_modulesडायरेक्टरी पर हैं
vsync

4
वास्तविक वेबपैक कॉन्फ़िगरेशन यहां है: github.com/facebook/create-react-app/blob/master/packages/…
protoEvangelion

सबसे आम उपयोग मामला परियोजना के वेबपैक कॉन्फ़िगरेशन को अनुकूलित करने के लिए होगा। लेकिन अगर यह नोड_मॉड्यूल्स में है तो इसे हर एनपीएम इंस्टॉल में ओवरराइट किया जाएगा, है ना?
ब्लैंक

59

से प्रलेखन :

आपको Webpack या Babel जैसे टूल इंस्टॉल या कॉन्फ़िगर करने की आवश्यकता नहीं है। वे पूर्वनिर्मित और छिपे हुए हैं ताकि आप कोड पर ध्यान केंद्रित कर सकें।

यदि आप कॉन्फिग फाइलों तक पहुंचना चाहते हैं, तो आपको रनिंग द्वारा बेदखल करना होगा :

npm run eject

नोट: यह एक तरफ़ा ऑपरेशन है। एक बार जब आप बाहर निकल जाते हैं, तो आप वापस नहीं जा सकते हैं!

अधिकांश परिदृश्यों में, किसी अन्य तरीके से आपके लिए काम करने के तरीके को बाहर निकालना और उसे खोजने का प्रयास नहीं करना सबसे अच्छा है। इस तरह, आप अपनी निर्भरता को अपडेट कर सकते हैं create-react-appऔर वेबपैक निर्भरता नरक से नहीं निपट सकते।


6
मुझे पता है कि ये छिपे हुए हैं, लेकिन मैं यह जानना चाहता हूं कि ये कहां हैं और इस प्रतिक्रिया को कैसे बनाते हैं?
मोहम्मद

फिर आपको स्रोत कोड को देखना होगा। मुझे यकीन नहीं है
klugjo

2
@ मोहम्मद 'प्रतिक्रिया-लिपियों' के लिए स्रोत की जाँच करें आप वहाँ सभी विन्यास पा सकते हैं
जोस मुनोज़

1
इस सवाल का जवाब नहीं है, लेकिन मेरी परवाह किए बिना मदद की
चिकन सूप

33

इस पेज पर बहुत सारे लोग वेबपैक कॉन्फिगरेशन और फाइल्स ढूंढने के लक्ष्य के साथ आते हैं ताकि वे अपने खुद के कॉन्फ़िगरेशन को जोड़ सकें। बिना चलने के npm run ejectइसे प्राप्त करने का एक और तरीका है, प्रतिक्रिया-ऐप-पुनः का उपयोग करना । यह आपको बेदखल किए बिना अपने वेबपैक कॉन्फिगर फाइल को ओवरराइट करने की अनुमति देता है।


6
क्या यह अभी भी पसंदीदा समाधान है? Rewired प्रोजेक्ट पर यह चेतावनी है: github.com/timarney/react-app-rewired#rewire-your-app- : "As Reactct App 2.0 यह रेपो इस समुदाय द्वारा ज्यादातर समय तक" हल्का "बनाए रखा गया है। .. नोट: मैं व्यक्तिगत रूप से next.js या Razzle का उपयोग करता हूं जो दोनों बॉक्स से बाहर कस्टम वेबपैक का समर्थन करते हैं। "
एंथनी कोंग

24

यह मानते हुए कि आप बेदखल नहीं करना चाहते हैं और आप केवल उस विन्यास को देखना चाहते हैं जो आप उन्हें पाएंगे /node_modules/react-scripts/config

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


10

आप इसे / config फ़ोल्डर के अंदर पा सकते हैं ।

जब आप बाहर निकालते हैं तो आपको एक संदेश मिलता है:

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

7

वेबपैक कॉन्फ़िगरेशन को प्रतिक्रिया-लिपियों द्वारा नियंत्रित किया जा रहा है । आप सभी वेबपैक विन्यास नोड_मॉडल प्रतिक्रिया-लिपियों / विन्यास के अंदर पा सकते हैं

और यदि आप webpack config को अनुकूलित करना चाहते हैं, तो आप इस custom-webpack-config का अनुसरण कर सकते हैं


3

चल कर, कॉन्फिग फाइलों को बाहर निकालने की कोशिश करें:

npm run eject

तब आपको अपनी परियोजना में बनाया गया एक विन्यास फ़ोल्डर मिलेगा। आप अपने webpack config फाइल init को पाएंगे।


0

मुझे पता है कि यह बहुत देर हो चुकी है, लेकिन भविष्य के लोग इस मुद्दे पर ठोकर खा रहे हैं, अगर आप CRA के वेबपैक कॉन्फिगर को एक्सेस करना चाहते हैं, तो आपको चलाने के अलावा कोई और रास्ता नहीं है:

$ npm run eject

हालाँकि, इजेक्शन के साथ, आप अपडेट के CRA पाइपलाइन से खुद को दूर कर लेंगे, इसलिए इजेक्शन के बिंदु से, आपको इसे स्वयं बनाए रखना होगा।

मैं इस मुद्दे पर कई बार आया हूं, और इसलिए मैंने प्रतिक्रिया ऐप के लिए एक टेम्पलेट बनाया है जिसमें सीआरए के समान ही अधिकांश कॉन्फ़िगरेशन हैं, लेकिन अतिरिक्त भत्ते (जैसे स्टाइल-घटकों, जेस्ट यूनिट टेस्ट, तैनाती के लिए ट्रैविस सी, प्रीटीयर , ESLint, आदि ...) रखरखाव को आसान बनाने के लिए। रेपो की जांच करें ।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.