Khi làm việc cùng Javascript, đôi khi ta cảm thấy thật phiền toái khi áp dụng các cú pháp mới nhất thì code chạy được trên trình duyệt này, lại chết trên trình duyệt khác, hay cùng một trình duyệt version mới nhất thì ok, nhưng lại ngắc ngoải trên version thấp hơn vì chưa được support. Thật may mắn, thay vì phải lo lắng thay đổi code cho phù hợp cho từng trình duyệt, một công cụ được sinh ra để giải quyết vấn đề đó là babel. Babel được dùng với mục đích chuyển đổi mã lệnh JavaScript được viết dựa trên tiêu chuẩn ECMAScript phiên bản mới về phiên bản cũ hơn để tương thích với hầu hết các trình duyệt.
Chém gió tí là ở trên tuy chỉ có hai dòng nhưng mình đã sử dụng syntax mới của ES6 đó là khai báo biến const thay cho var và sử dụng Template Literals để thực thi biểu thức trong chuỗi. Code ngày xưa thì viết kiểu này
Chém gió thế thôi, giờ để sử dụng babel loader ta sửa lại file webpack.config.js
Giờ chạy lại webpack xem thế nào
Ta mở trang index.html và thấy log ra đúng câu mong muốn.
Mình click thử vào dòng 2 xem code thế nào
Thật là vi diệu! Nói chung với dự án còi như này thì cấu hình này là ok lắm rồi, còn đối với các dự án lớn siêu to khổng lồ thì các bạn sẽ phải đào sâu thêm vào thư viện để config.
Bài viết đến đây là hết, hi vọng với bài viết này các bạn đã thêm được nhiều kiến thức bổ ích. Hẹn gặp lại các bạn ở bài viết tiếp theo!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Webpack từ A đến Á cùng kentrung</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>
const author = 'kentrung'
console.log(`Webpack từ A đến Á cùng ${author}`)
var author = 'kentrung'
console.log('Webpack từ A đến Á cùng ' + author)