create-tepki-app webpack yapılandırma ve dosyaları nerede?

174

Paketle bir ReactJS projesi oluşturdum create-react-appve bu iyi çalıştı, ancak webpack dosyalarını ve yapılandırmalarını bulamıyorum.

Reac-create-app webpack ile nasıl çalışır? Varsayılan kurulumda web paketi yapılandırma dosyaları nerededir create-react-app? Projemin klasörlerinde yapılandırma dosyaları bulamıyorum.

Geçersiz kılma yapılandırma dosyası oluşturmadım. Yapılandırma ayarlarını diğer makalelerle yönetebilirim, ancak geleneksel yapılandırma dosyalarını bulmak istiyorum.

— Mohammad
kaynak

96

Web paketi dosyalarını ve yapılandırmalarını bulmak istiyorsanız package.json dosyanıza gidin ve komut dosyaları arayın

Komut dosyaları nesnesinin bir kütüphane tepki komut dosyaları kullandığını göreceksiniz

Şimdi node_modules'e gidin ve reakt -script-script-script-in-node-modüllerini arayın

Bu tepki komut dosyaları / komut dosyaları ve tepki komut dosyaları / yapılandırma klasörü tüm web paketi yapılandırmalarını içerir.

— Vikram Thakur
kaynak

1

Gördüm ama tepki göstermedim dir

— Mohammad

4

Ben sadece create-tepki-app kullanarak bir uygulama yarattı ve benim durumumda node_modules bir klasör tepki-script var. .json

— Vikram Thakur

5

Bu cevap artık doğru değil , NPM artık düz. Yani tüm modüller kök node_modulesdizinde.

— vsync

4

Gerçek webpack yapılandırması burada: github.com/facebook/create-react-app/blob/master/packages/…

— protoEvangelion

En yaygın kullanım durumu projenin webpack yapılandırmasını özelleştirmek olacaktır. Ama eğer node_modules içindeyse, her npm kurulumunda üzerine yazılır, değil mi?

— Blanc

59

Gönderen belgeler :

Webpack veya Babel gibi araçları kurmanıza veya yapılandırmanıza gerek yoktur. Kodlara odaklanabilmeniz için önceden yapılandırılmış ve gizlenmiştir.

Eğer yapılandırma dosyalarına erişmesini istiyorsanız, gerek çıkarma çalıştırarak:

npm run eject

Not: Bu tek yönlü bir işlemdir. Çıkardıktan sonra geri dönemezsin!

Çoğu senaryoda, çıkarmamak ve başka bir şekilde sizin için çalışmasını sağlamak için bir yol bulmaya çalışmak en iyisidir. Bu şekilde, bağımlılıklarınızı create-react-appWebpack bağımlılık cehennemiyle uğraşmak zorunda kalmadan güncelleyebilirsiniz .

— klugjo
kaynak

6

Bunların gizli olduğunu biliyorum, ancak bunların nerede olduğunu ve tepki-yarat-uygulamanın bu yeteneği nasıl ele aldığını bilmek istiyorum?

— Muhammed

O zaman muhtemelen kaynak koduna bakmanız gerekecektir. Emin değilim

— klugjo

2

@Mohammad, 'tepki-komut dosyalarının kaynağını kontrol edebilir, burada tüm yapılandırmayı bulabilirsiniz

— Jose Munoz

1

Soruyu cevaplamıyor, ama bana ne olursa olsun yardım etti

— Tavuk Çorbası

33

Birçok kişi, web konfigürasyonunu ve dosyalarını kendi konfigürasyonlarını eklemek için bulmak amacıyla bu sayfaya geliyor. Çalıştırmadan bunu başarmak için başka bir yol npm run ejectkullanımı için tepki-app-rewired . Bu, webpack yapılandırma dosyanızı çıkarmadan yazmanıza olanak tanır.

— jjbskir
kaynak

6

Hala tercih edilen çözüm mü? Yenilenen projede şu uyarı var: github.com/timarney/react-app-rewired#rewire-your-app- : "Create React App 2.0'dan itibaren bu repo çoğunlukla bu noktada" hafifçe "korunuyor. .. Not: Şahsen next.js veya Razzle'ı kullanıyorum, her ikisi de özel Web paketini kutudan çıkarıyor. "

— Anthony Kong

24

Çıkarmak istemediğinizi ve yalnızca bulabileceğiniz yapılandırmaya bakmak istediğinizi varsayarsak /node_modules/react-scripts/config

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

— vv1z
kaynak

21

Tarafından kullanılan webpack yapılandırması create-react-appburada: https://github.com/facebook/create-react-app/tree/master/packages/react-scripts/config

— Mihai Rotaru
kaynak

2

Bu cevap olmalı

— krankuba

10

/ Config klasörünün içinde bulabilirsiniz .

Çıkardığınızda şöyle bir mesaj alırsınız:

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

— Alfrex92
kaynak

7

Webpack yapılandırması reaksiyon komut dosyaları tarafından işleniyor . Tüm webpack yapılandırmalarını node_modules tepki-scriptleri / config içinde bulabilirsiniz .

Ve webpack yapılandırmasını özelleştirmek istiyorsanız, bu custom-webpack-config'i takip edebilirsiniz.

— Hassan Ajaz
kaynak

3

Yapılandırma dosyalarını çalıştırarak çıkarmayı deneyin:

npm run eject

projenizde oluşturulmuş bir yapılandırma klasörü bulacaksınız. Webpack yapılandırma dosyalarınızı init içinde bulacaksınız.

— Vinayak Humberi
kaynak

0

Oldukça geç olduğunu biliyorum, ancak gelecekteki insanlar için bu sorun üzerinde tökezleyen, CRA'nın web paketi yapılandırmasına erişmek istiyorsanız, çalıştırmanız gereken başka bir yol yoktur:

$ npm run eject

Bununla birlikte, fırlatma ile, kendinizi CRA güncelleme boru hattından uzaklaştıracaksınız, bu nedenle fırlatma noktasından kendiniz tutmalısınız.

Bu sorunla birçok kez karşılaştım ve bu nedenle CRA ile aynı yapılandırmanın çoğuna sahip tepki uygulamaları için bir şablon oluşturdum, aynı zamanda ek avantajlar (stilize bileşenler, jest birim testi, dağıtımlar için Travis ci, daha güzel) , ESLint, vb ...) bakımı kolaylaştırmak için. Check repo .

— Humbledore
kaynak