ตอบโต้กับ Webpack 5

ณ เดือนกรกฎาคม 2021 create-react-app ใช้ Webpack 4 น่าเสียดาย หมายความว่าเราต้องติดตั้งการพึ่งพาและกำหนดค่ากระบวนการสร้างด้วยตนเองเพื่อทดลองกับ Webpack 5 นี่คือคำแนะนำฉบับย่อในการโยกย้ายโปรเจ็กต์ที่สร้างด้วยcreate-react-appWebpack 5

1. สร้างโครงการใหม่/ใช้โครงการที่มีอยู่

npx create-react-app reactw5

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

การพึ่งพา Webpack

yarn add -D webpack webpack-cli webpack-dev-server html-webpack-plugin serve

yarn add -D babel-loader @babel/core @babel/preset-env @babel/preset-react

yarn add -D css-loader style-loader @svgr/webpack style-loader url-loader

3. สร้างwebpack.config.jsไฟล์ในระดับรูท

ตอนนี้เรามี Webpack 5 แล้ว เราจำเป็นต้องมีการกำหนดค่าแบบกำหนดเองเพื่อให้ใช้งานได้

*** นี่ไม่ใช่การกำหนดค่าพร้อมสำหรับใช้งานจริง คุณอาจต้องจัดการกับ typescript, CSS ก่อน/หลังโปรเซสเซอร์ และการเพิ่มประสิทธิภาพอื่นๆ ตามความต้องการของคุณ แต่หวังว่าจะพอให้คุณเริ่มต้นได้ ***

4. สร้างbabel.config.jsonไฟล์ในระดับรูท

เราได้ติดตั้งปลั๊กอิน Babel เพื่อช่วยเราในเรื่อง React มากำหนดค่ากัน

5. สุดท้าย อัปเดตpackage.jsonไฟล์

ตอนนี้เราได้กำหนดค่า Webpack และ Babel แล้ว เราจำเป็นต้องแทนที่สคริปต์ NPM ของเรา

คุณควรจะสามารถเริ่มต้นแอปพลิเคชันด้วย yarn start

แอป React ของคุณใช้ webpack 5 แล้ว ไชโย!