create-react-app webpack config และไฟล์อยู่ที่ไหน?

ฉันสร้างโครงการ ReactJS ด้วยcreate-react-appแพ็คเกจและใช้งานได้ดี แต่ฉันไม่สามารถค้นหาไฟล์และการกำหนดค่าของwebpack ได้

react-create-app ทำงานกับ webpack อย่างไร ไฟล์การกำหนดค่า webpack อยู่ที่ไหนในการติดตั้งเริ่มต้นด้วยcreate-react-app? ฉันไม่พบไฟล์การกำหนดค่าในโฟลเดอร์ของโครงการ

ฉันยังไม่ได้สร้างไฟล์ปรับแต่งแทนที่ ฉันสามารถจัดการการตั้งค่าคอนฟิเกอเรชันกับบทความอื่น ๆ แต่ฉันต้องการค้นหาไฟล์ปรับแต่งแบบธรรมดา

หากคุณต้องการค้นหาไฟล์ webpack และการกำหนดค่าให้ไปที่ไฟล์ package.json ของคุณแล้วค้นหาสคริปต์

คุณจะพบว่าวัตถุสคริปต์กำลังใช้ไลบรารีreact-สคริปต์

ตอนนี้ไปที่ node_modules และค้นหาโฟลเดอร์ react-สคริปต์react-script-in-node-modules

นี้ตอบสนองสคริปต์ / สคริปต์และตอบสนองสคริปต์ / configโฟลเดอร์ที่มีการกำหนดค่า webpack

จากเอกสาร :

คุณไม่จำเป็นต้องติดตั้งหรือกำหนดค่าเครื่องมือเช่น Webpack หรือ Babel พวกเขาถูกกำหนดค่าไว้ล่วงหน้าและซ่อนไว้เพื่อให้คุณสามารถมุ่งเน้นไปที่รหัส

หากคุณต้องการเข้าถึงไฟล์กำหนดค่าคุณต้องนำออกโดยเรียกใช้:

npm run eject

หมายเหตุ: นี่เป็นการดำเนินการทางเดียว เมื่อคุณนำออกคุณจะไม่สามารถย้อนกลับไป!

ในสถานการณ์ส่วนใหญ่เป็นการดีที่สุดที่จะไม่ดีดตัวออกมาและพยายามหาวิธีที่จะทำให้มันใช้ได้ผลในทางอื่น ด้วยวิธีนี้คุณสามารถอัปเดตการอ้างอิงของคุณผ่านcreate-react-appและไม่ต้องจัดการกับนรก Webpack

ผู้คนมากมายมาที่หน้านี้โดยมีเป้าหมายในการค้นหาการกำหนดค่า webpack และไฟล์เพื่อเพิ่มการกำหนดค่าของพวกเขาเอง วิธีการที่จะบรรลุเป้าหมายนี้ได้โดยไม่ต้องใช้อีกnpm run ejectคือการใช้งานตอบสนองแอป-rewired สิ่งนี้ช่วยให้คุณเขียนทับไฟล์กำหนดค่า webpack ของคุณโดยไม่ต้องดีดแผ่นออก

สมมติว่าคุณไม่ต้องการนำออกและคุณเพียงต้องการดูการกำหนดค่าที่คุณจะพบพวกเขา /node_modules/react-scripts/config

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

การกำหนดค่า Webpack ที่ใช้create-react-appอยู่ที่นี่: https://github.com/facebook/create-react-app/tree/master/packages/react-scripts/config

คุณสามารถค้นหาได้ในโฟลเดอร์/ config

เมื่อคุณเปิดถาดออกคุณจะได้รับข้อความเช่น:

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

การกำหนดค่า Webpack จะถูกจัดการโดยตอบสนองสคริปต์ คุณสามารถค้นหาทั้งหมด node_modules webpack การตั้งค่าภายในตอบสนองสคริปต์ / config

และหากคุณต้องการปรับแต่งการกำหนดค่า webpack คุณสามารถทำตามการปรับแต่งนี้- webpack-config

ลองนำไฟล์ config ออกโดยใช้:

npm run eject

จากนั้นคุณจะพบโฟลเดอร์ปรับแต่งที่สร้างขึ้นในโครงการของคุณ คุณจะพบไฟล์กำหนดค่า webpack ของคุณ

ฉันรู้ว่ามันค่อนข้างช้า แต่สำหรับคนในอนาคตที่สะดุดปัญหานี้หากคุณต้องการเข้าถึงการกำหนดค่า webpack ของ CRA ไม่มีวิธีอื่นนอกจากคุณต้องเรียกใช้:

$ npm run eject

อย่างไรก็ตามด้วยการดีดตัวออกคุณจะตัดตัวคุณเองออกจากขั้นตอนการอัพเดต CRA ดังนั้นจากจุดออกคุณจะต้องรักษาตัวเอง

ฉันเจอปัญหานี้หลายครั้งและดังนั้นฉันจึงสร้างเทมเพลตสำหรับแอปตอบโต้ที่มีการตั้งค่าส่วนใหญ่เหมือนกับ CRA แต่ยังมีสิทธิพิเศษเพิ่มเติม (เช่นองค์ประกอบที่มีสไตล์การทดสอบหน่วยตลก ๆ เทรวิส ci สำหรับการใช้งาน , ESLint, ฯลฯ ... ) เพื่อทำให้การบำรุงรักษาง่ายขึ้น ตรวจสอบrepo