di mana file konfigurasi webpack buat-reaksi-aplikasi?

172

Saya membuat proyek ReactJS dengan create-react-apppaket dan itu bekerja dengan baik, tetapi saya tidak dapat menemukan file dan konfigurasi webpack.

Bagaimana cara kerja reaksi-membuat-aplikasi dengan webpack? Di mana file konfigurasi webpack berada dalam instalasi default create-react-app? Saya tidak dapat menemukan file konfigurasi di folder proyek saya.

Saya belum membuat file konfigurasi override. Saya dapat mengatur pengaturan konfigurasi dengan artikel lain tetapi saya ingin mencari file konfigurasi konvensional.

javascript reactjs webpack ecmascript-6 create-react-app Mohammad
sumber

Jawaban:

96

Jika Anda ingin menemukan file dan konfigurasi webpack, buka file package.json Anda dan cari skrip

img

Anda akan menemukan bahwa objek skrip menggunakan skrip reaksi perpustakaan

Sekarang pergi ke node_modules dan cari folder react- scripts react-script-in-node-modules

Ini bereaksi-script / scripts dan bereaksi-script / config folder berisi semua konfigurasi Webpack.

Vikram Thakur
sumber
1
Saya melihat tetapi saya belum bereaksi terhadap skrip dir
Mohammad
4
Saya baru saja membuat aplikasi menggunakan create-react-app dan dalam kasus saya ada folder reaksi-skrip di node_modules. dapatkah Anda membagikan paket Anda. json
Vikram Thakur
5
Jawaban ini tidak lagi benar , NPM sekarang datar artinya semua modul ada di node_modulesdirektori root
vsync
4
Konfigurasi webpack yang sebenarnya ada di sini: github.com/facebook/create-react-app/blob/master/packages/…
protoEvangelion
Kasus penggunaan yang paling umum adalah untuk menyesuaikan konfigurasi webpack proyek. Tetapi jika ada di node_modules itu akan ditimpa di setiap instalasi npm, bukan?
Blanc
59

Dari dokumentasi :

Anda tidak perlu menginstal atau mengkonfigurasi alat seperti Webpack atau Babel. Mereka sudah dikonfigurasikan sebelumnya dan disembunyikan sehingga Anda dapat fokus pada kode.

Jika Anda ingin memiliki akses ke file konfigurasi, Anda harus mengeluarkan dengan menjalankan:

npm run eject

Catatan: ini adalah operasi satu arah. Setelah Anda mengeluarkan, Anda tidak dapat kembali!

Dalam sebagian besar skenario, yang terbaik adalah tidak mengeluarkan dan mencoba menemukan cara untuk membuatnya bekerja untuk Anda dengan cara lain. Dengan begitu, Anda dapat memperbarui dependensi Anda melalui create-react-appdan tidak harus berurusan dengan neraka ketergantungan Webpack.

klugjo
sumber
6
Saya tahu ini disembunyikan, tetapi saya ingin tahu di mana ini dan bagaimana bereaksi-membuat-aplikasi menangani kemampuan ini?
Mohammad
Maka Anda mungkin harus melihat kode sumbernya. Saya tidak yakin
klugjo
2
@Mohammad memeriksa sumber untuk 'bereaksi-skrip' Anda dapat menemukan semua konfigurasi di sana
Jose Munoz
1
Tidak menjawab pertanyaan, tetapi membantu saya bagaimanapun
Chicken Soup
32

Banyak orang datang ke halaman ini dengan tujuan menemukan konfigurasi webpack dan file untuk menambahkan konfigurasi mereka sendiri kepada mereka. Cara lain untuk mencapai ini tanpa berjalan npm run ejectadalah dengan menggunakan reaksi-aplikasi-rewired . Ini memungkinkan Anda untuk menimpa file konfigurasi webpack Anda tanpa mengeluarkan.

jjbskir
sumber
6
Apakah masih solusi yang disukai? Ada peringatan ini pada proyek yang diperbarui : github.com/timarney/react-app-rewired#rewire-your-app- : "Pada Create React App 2.0 repo ini" ringan "sebagian besar dikelola oleh komunitas pada saat ini. .. Catatan: Saya pribadi menggunakan next.js atau Razzle yang keduanya mendukung Webpack khusus di luar kotak. "
Anthony Kong
24

Dengan asumsi Anda tidak ingin mengeluarkan dan Anda hanya ingin melihat konfigurasi Anda akan menemukannya /node_modules/react-scripts/config

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

Anda dapat menemukannya di dalam folder / config .

Ketika Anda mengeluarkan Anda mendapatkan pesan seperti: 

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

Konfigurasi webpack sedang ditangani oleh skrip reaksi . Anda dapat menemukan semua konfigurasi webpack di dalam node_modules react-scripts / config .

Dan Jika Anda ingin mengkustomisasi konfigurasi webpack, Anda dapat mengikuti custom-webpack-config ini

Hassan Ajaz
sumber
3

Coba keluarkan file konfigurasi, dengan menjalankan:

npm run eject

maka Anda akan menemukan folder konfigurasi yang dibuat di proyek Anda. Anda akan menemukan file konfigurasi webpack Anda di dalamnya.

Vinayak humberi
sumber
0

Saya tahu ini cukup terlambat, tetapi untuk orang-orang di masa depan yang tersandung masalah ini, jika Anda ingin memiliki akses ke konfigurasi webpack CRA, tidak ada cara lain kecuali Anda harus menjalankan:

$ npm run eject

Namun, dengan ejeksi, Anda akan melepaskan diri dari saluran pembaruan CRA, oleh karena itu dari titik ejeksi, Anda harus mempertahankannya sendiri.

Saya telah menemukan masalah ini berkali-kali, dan oleh karena itu saya telah membuat template untuk bereaksi aplikasi yang memiliki sebagian besar konfigurasi yang sama dengan CRA, tetapi juga tunjangan tambahan (seperti komponen ditata, uji unit lelucon, Travis ci untuk penyebaran, lebih cantik , ESLint, dll ...) untuk mempermudah perawatan. Lihat repo itu .

Humbledore
sumber