Hướng dẫn cấu hình ReactJS với Webpack và Babel

Tram Ho

Ok trong bài viết này, mình sẽ hướng dẫn các bạn cấu hình dự án ReactJS kết hợp Webpack và Babel. Bài viết này được thực hiện năm 2021 được cấu hình trên Webpack 5, như các bạn biết thì các bài viết cũ đa số là cấu hình trên Webpack 4, nếu bài viết này quá cũ bạn có thể tìm kiếm bài viết khác nha.

Mình sẽ không đi qua giải thích Webpack và Babel nữa, bạn có thể hiểu cơ bản Webpack là trình đóng gói code Javascript và Babel có nhiệm vụ chuyển các đoạn code Javascript trên phiên bản mới về lại phiên bản cũ phù hợp với các trình duyệt cũ hơn. Nào chúng ta bắt đầu thôi…

1. Khởi Tạo ReactJS

Tạo Thư Mục, File Và Khởi Tạo NPM

Đầu tiên các bạn khởi tạo thư mục và cấu hình dự án npm mới:

Ở đây mình dùng npm init -y để khởi tạo nhanh dự án, bạn nào không thích có thể dùng npm init để cấu hình từng phần chi tiết nha.

Sau khi chạy xong nó sẽ tạo ra được file package.json có nội dung tương tự như sau:

Tiếp theo bạn tạo một file index.js và file index.html tại thư mục public ở thư mục gốc của dự án. Tạo tiếp 1 file App.js nằm ở thư mục src, đây là file mình sẽ bắt đầu viết ReactJS vào. Sau khi tạo xong thư mục của bạn sẽ tương tự thế này:

Cài Đặt ReactJS

Đầu tiên hãy cài react và react-dom với câu lệnh sau:

Mở file index.js lên và thêm đoạn code sau:

Ở đây thẻ <noscript> dùng thể yêu cầu trình duyệt mở Javascript.

Và thẻ <div> có id root dùng để render React.

Thêm code vào file index.js nữa nhé:

Cuối cùng viết Hello World với React thôi, cũng dễ mà đúng ko 🤗, mở file App.js và thêm đoạn code sau:

2. Khởi Tạo Webpack

Cài Đặt Webpack

Đầu tiên các bạn cài đặt tất cả những package sau:

  1. webpack là gói thư viện chính.
  2. webpack-cli dùng để chạy webpack.
  3. webpack-dev-server dùng để chạy trong quá trình phát triển.

Cấu Hình Webpack

Tạo file webpack.config.js nằm ở thư mục gốc của dự án và thêm như sau:

Thêm File Bundle Vào HTML

Khi file index.bundle.js được tạo, mình cần yêu cầu webpack đưa nó làm thẻ <script> vào tệp HTML. Để làm điều đó, trước tiên chúng ta cần cài đặt một thư viện khác:

Chỉnh sửa lại file webpack.config.js như sau:

3. Khởi Tạo Babel

Cài Đặt Babel

Tiếp tục cài đặt các package sau:

  1. @babel/core là gói thư viện của babel.
  2. babel-loader dùng để load babel vào dự án.
  3. @babel/preset-env dùng để chuyển code Javascript về ES5.
  4. @babel/preset-react dùng để sử dụng babel với ReactJS.

Cấu Hình Babel

Bây giờ chúng ta cần yêu cầu webpack tải các tệp javascript bằng cách sử dụng babel trước khi đóng gói. Thêm đoạn code sau vào webpack.config.js:

4. Build Và Chạy Thôi

Thêm scripts vào file package.json như sau:

Ok bây giờ để chạy được thì bạn chỉ cần gõ npm run serve là xong, mở http://localhost:8080/ và xem thành quả nhé.

Để build dự án bạn chạy câu lệnh npm run build khi đó webpack sẽ gói lại tất cả file Javascript của bạn vào thư mục dist mà mình cấu hình trước đó.

Chạy file index.html và tận hưởng thành quả 😃.

5. Bonus

6. Kết Thúc

Bài viết đến đây là kết thúc rồi, nếu có sai sót gì bạn bình luận phía dưới đóng góp cho mình nha. Để lại 1 vote và follow mình nếu thấy bài viết giúp ích cho bản thân ❤️.

Các nguồn tham khảo:

  1. https://webpack.js.org/concepts/
  2. https://viblo.asia/p/reactjs-ket-hop-voi-webpack-part-1-Eb85ogr052G
  3. https://medium.com/age-of-awareness/setup-react-with-webpack-and-babel-5114a14a47e9
  4. https://stackoverflow.com/questions/33527653/babel-6-regeneratorruntime-is-not-defined
Chia sẻ bài viết ngay