Bereaksi dengan Webpack 5

Mulai Juli 2021, create-react-app menggunakan Webpack 4 . Sayangnya, ini berarti kita harus menginstal dependensi dan mengonfigurasi proses pembuatan sendiri untuk bereksperimen dengan Webpack 5. Ini adalah panduan cepat untuk memigrasikan proyek yang dibuat dengan create-react-appWebpack 5.

1. Buat proyek baru/Gunakan yang sudah ada

npx create-react-app reactw5

Jika Anda dulu create-react-appmenginisialisasi proyek, itu menangani bundling, transpililasi, dan pengoptimalan lainnya untuk Anda di luar kotak. Tetapi pengaturan ini menggunakan Webpack 4 dan tidak berguna bagi kami dengan Webpack 5. Kami perlu menginstal Webpack 5 bersama dengan alat lain dan mengkonfigurasinya.

Ketergantungan paket web

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. Buat webpack.config.jsfile di tingkat root.

Sekarang kami memiliki Webpack 5, kami memerlukan konfigurasi khusus untuk membuatnya berfungsi.

*** Ini sama sekali bukan konfigurasi siap produksi. Anda mungkin perlu menangani TypeScript, prosesor pra/pasca CSS, dan pengoptimalan lainnya berdasarkan kebutuhan Anda. Tapi semoga cukup untuk membantu Anda memulai ***

4. Buat babel.config.jsonfile di tingkat root.

Kami memasang banyak plugin babel untuk membantu kami dengan React. Mari kita konfigurasikan.

5. Terakhir, perbarui package.jsonfile.

Sekarang kita telah mengonfigurasi Webpack dan Babel, kita perlu mengganti skrip NPM kita.

Anda harus dapat memulai aplikasi dengan yarn start

Aplikasi React Anda sekarang menggunakan webpack 5. Cheers!