Lời nói đầu: Trong bài viết này mình sẽ kết hợp webpack và Babel vào React, rất mong các bạn
Webpack là gì ?
là một module bundler (quản lý và tải các module độc lập). Nó nhận các module phụ thuộc và biên dịch chúng thành một file. Bạn có thể sử dụng file này trong khi phát triển ứng dụng bằng dòng lệnh hoặc bằng cách định cấu hình nó bằng tệp webpack.config.js
Babel là gì ?
Là một chương trình biên dịch và trình dịch mã Javascript. Nó được sử dụng để chuyển đổi một mã nguồn khác. Sử dụng điều này, bạn sẽ có thể sử dụng các tính năng mới của ES6, ES7 mới trong mã của mình, babel chuyển đổi nó thành ES5 cũ đơn giản để có thể chạy trên các trình duyệt.
Cài đặt
- Cài đặt wedpack
Mình sẽ sử dụng webpack cho một project mà mình đã làm sẵn, các bạn có thể tham khảo tại đây.
Đầu tiên mình sẽ tiến hành cài đặt webpack cho project của mình trên CMD bằng lệnh sau.
npm install --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin
- weback-cli giúp tạo môi trường hoạt động của webpack
- webpack là công cụ tổ chức, bundle mã nguồn
- webpack-dev-server khởi tạo server môi trường development giúp cho việc phát triển ứng dụng dễ dàng hơn với tính năng như hot-reload
- html-webpack-plugin giúp kết nối mã nguồn Javascript tạo nên bởi webpack và file gốc index.html
Sau khi cài đặt xong thì chú ta vào file package.json xem nhé:
- Cài đặt Babel
Mình sử dụng lệnh sau để cài đặt babel cho project:
npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader
Trong đó :
- babel-core: Chuyển code ES6 thành code ES5.
- babel-loader: Một webpack helper giúp chuyển code dựa trên preset.
- babel-preset-env: Bộ preset giúp babel chuyển code ES6, ES7 và ES8 thành ES5.
- babel-preset-react: Bộ Preset giúp chuyển JSX thành javascript.
Sau khi cài đặt các package xong thì mình sẽ tiến hành config cho webpack và bable
- Config cho webpack
Tạo một file có tên là webpack.config.js, file này có nội dụng như sau .
Trong đó, babel-loader dùng cho việc load file JSX/js và css-loader dùng cho việc load và đóng gói tất cả các file css thành một file. Còn style-loader sẽ thêm tất cả các style đó vào một thẻ style của document.
Sau đó mình cần install css-loader và style-loader cho webpack bằng lệnh sau:
npm install css-loader style-loader --save-dev
Tiếp theo các bạn mở file package.json bên trong đối tượng scripts các bạn thêm vào các câu lệnh sau.
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"
- config cho Babel
Mình thực hiện config cho babel, tạo một file .babelrc trong thư mục gốc của project với nội dung sau:
Sau đó mình thực hiện Html-webpack-plugin và plugin này sinh ra một file HTML
npm install html-webpack-plugin --save-dev
Và mình thực hiện config nó vào webpack.config.js
Cuối cùng mình chạy project trong CMD bằng lệnh:
npm start
Đây là kết quả:
Lời kết: Trong bài này mình đã demo Webpack và Babel với ví dụ thực tế, mong rằng nó sẽ giúp ích cho các bạn và mình rất cảm ơn các bạn đã đọc bài viết của mình.
