Webpack 5 ile tepki verin

Temmuz create-react-app 2021'den itibaren Webpack 4'ü kullanır . Ne yazık ki, bu, Webpack 5'i denemek için bağımlılıkları kurmamız ve oluşturma sürecini kendimiz yapılandırmamız gerektiği anlamına gelir. Bu, create-react-appWebpack 5 ile oluşturulan projeleri taşımak için hızlı bir kılavuzdur .

1. Yeni bir proje oluşturun/Mevcut olanı kullanın

npx create-react-app reactw5

create-react-appProjeyi başlatırsanız, sizin için paketleme, aktarma ve diğer optimizasyonları kutudan çıkarır. Ancak bu kurulum Webpack 4 kullanıyor ve Webpack 5 ile bizim işimize yaramaz. Webpack 5'i diğer araçlarla birlikte kurmamız ve yapılandırmamız gerekiyor.

Web paketi bağımlılıkları

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.jsKök düzeyinde dosya oluşturun .

Artık Webpack 5'e sahip olduğumuza göre, çalışması için özel bir yapılandırmaya ihtiyacımız var.

*** Bu kesinlikle üretime hazır bir konfigürasyon değildir. Daktilo metni, CSS ön/son işlemcileri ve ihtiyaçlarınıza göre diğer optimizasyonları yapmanız gerekebilir. Ama umarım başlamana yetecek kadardır ***

4. babel.config.jsonKök düzeyinde dosya oluşturun .

React'te bize yardımcı olması için bir sürü babel eklentisi kurduk. Onları yapılandıralım.

5. Son olarak, package.jsondosyayı güncelleyin .

Artık Webpack ve Babel'i yapılandırdığımıza göre, NPM betiklerimizi değiştirmemiz gerekiyor.

ile uygulamayı başlatabilmelisiniz. yarn start

React uygulamanız artık web paketi 5'i kullanıyor. Şerefe!