Tìm hiểu về Webpack và Create React App

Bài viết được sự cho phép của tác giả Võ Xuân Phong

Khi làm việc với ReactJS, chúng ta đã nghe khá nhiều về 2 cái tên Webpack với Create React App. Vậy Webpack với Create React App khác nhau như thế nào? Chúng ta sẽ cùng nhau tìm hiểu ở bài viết này nhé.

Webpack với mục đích chung nhất là để đóng gói, nó dùng để chuyển đổi code React + ES6 sang Javascript thuần (plan-vanilla JS), nó cực kỳ hữu ích và mềm dẻo, nó có thể được cấu hình để bao gồm những thứ mà khi xây dựng một ứng dụng React có thể cần, nhưng nó tốn nhiều thời gian để developer hiểu và cấu hình thiết lập. Webpack cũng hoạt động tốt với Angular, Vue, NodeJS và kể cả là Web Assembly.

Vì lý do trên, mà Facebook đã tạo ra Create React App, chứa Webpack ở bên  trong. Mọi thứ đã được cấu hình sẵn, developer chỉ cần tập trung vào việc code, chứ không phải việc ngồi cấu hình cho dự án. Nhưng với Create React App, để cấu hình một cách linh hoạt như Webpack thì đó là một điệu cực kỳ khó khăn.

Bên dưới đây, là một số so sánh cụ thể hơn nữa về Create React App Và Webpack.

Tuyển dụng lập trình React các công ty HOT

Mô-đun và Npm package

Để dễ hiểu thì npm package là một thư mục hoặc một file có chứa hoặc sử dụng nhiều mô-đun.

Các bạn có thể tham khảo link này để biết sự khác biệt giữa mô-đun và npm package:

https://docs.npmjs.com/about-packages-and-modules

Webpack là một mô-đun đóng gói trong khi react-script là một npm package, nó chứa các dependency (gói thư viện) cần để khởi tạo nhanh một project ReactJS như “babel” và “webpack” cũng có trong danh sách các dependency của react-script.

Môi trường

Create React App không có file build cấu hình vì thế chúng ta không thể cấu hình cho nó. Nếu bạn muốn điều chỉnh một số thứ bạn phải sử dụng đến lệnh “npm run eject” để nó xuất ra cho bạn các file cấu hình để bạn điều chỉnh. Mà bạn biết rồi đấy code hay cấu hình của một ai đó sẽ khiến bạn khó hiểu và bối rối mỗi khi xem chúng.

Với Webpack bạn có toàn quyền cấu hình môi trường phát triển cho dự án của bạn, và cấu hình theo cái mà bạn mong muốn.

Server Side Rendering

Để cấu hình và thiết lập SSR với Create React App thì rất đau đầu, với Webpack thì mọi chuyện sẽ dễ dàng hơn.

Bảo trì dự án

Trong khi sử dụng Webpack, thì bạn sẽ hoàn toàn dễ dàng, thoải mái chỉnh sửa cấu hình của Webpack, khi có sự thay đổi hoặc bạn muốn nâng cấp dự án.

Với Create React App thì tất cả được quản lý bởi cộng đồng React.

Tổng kết

Create React App phù hợp nhất cho các dự án nhỏ, nó không phù hợp cho các dự án lớn và phức tạp.

Sử dụng Create React App, sẽ tiết kiệm được thời gian khởi tạo và thiết lập dự án cho các bạn mới học React. Các bạn có thể tập trung vào học cách code React mà không cần lo lắng hay quan tâm “babel” là gì hay các thiết lập phức tạp khác trong file cấu hình Webpack.

Kiến thức về Webpack như là một kỹ năng cần có.

Tham khảo:

1. https://medium.com/@imbudhiraja/webpack-vs-create-react-app-cb72c47f8100
2. https://stackoverflow.com/questions/52177318/webpack-build-vs-react-scripts-build

Bài viết gốc được đăng tải tại anhlamweb.com

Có thể bạn quan tâm:

• Làm sao để không bị “ngộp” khi học cái mới?
• Laravel 5.5 và Reactjs: Xây dựng CRUD (Create, Read, Update, Delete) từ đầu
• Top 22 công cụ cho lập trình viên React 2019

Xem thêm Việc làm IT hấp dẫn tại TopDev