Phản ứng với Webpack 5

Kể từ tháng 7 năm 2021, create-react-app sử dụng Webpack 4 . Thật không may, điều đó có nghĩa là chúng ta phải cài đặt các phụ thuộc và tự cấu hình quá trình xây dựng để thử nghiệm với Webpack 5. Đây là hướng dẫn nhanh để chuyển các dự án được tạo bằng create-react-appWebpack 5.

1. Tạo một dự án mới / Sử dụng một dự án hiện có

npx create-react-app reactw5

Nếu bạn đã từng create-react-appkhởi tạo dự án, nó sẽ xử lý việc đóng gói, chuyển đổi và các tối ưu hóa khác cho bạn. Nhưng thiết lập này sử dụng Webpack 4 và không có ích cho chúng ta với Webpack 5. Chúng ta cần cài đặt Webpack 5 cùng với các công cụ khác và cấu hình chúng.

Các yếu tố phụ thuộc vào 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. Tạo webpack.config.jstệp ở cấp cơ sở.

Bây giờ chúng ta đã có Webpack 5, chúng ta cần một cấu hình tùy chỉnh để làm cho nó hoạt động.

*** Đây hoàn toàn không phải là cấu hình sẵn sàng sản xuất. Bạn có thể cần phải xử lý bản định kiểu, bộ xử lý trước / sau CSS và các tối ưu hóa khác dựa trên nhu cầu của bạn. Nhưng hy vọng đủ để bạn bắt đầu ***

4. Tạo babel.config.jsontệp ở cấp cơ sở.

Chúng tôi đã cài đặt một loạt các plugin babel để giúp chúng tôi với React. Hãy cấu hình chúng.

5. Cuối cùng, cập nhật package.jsontệp.

Bây giờ chúng ta đã cấu hình Webpack và Babel, chúng ta cần thay thế các tập lệnh NPM của mình.

Bạn sẽ có thể bắt đầu ứng dụng với yarn start

Ứng dụng React của bạn hiện sử dụng webpack 5. Chúc mừng!