Webpack là gì? Những thông tin cơ bản về Webpack

Vinh Phạm

1161

12-08-2022

Cùng với sự lên ngôi của các single page application trong thế giới web, cũng như các xử lý ngày càng được đưa xuống client-side nhiều hơn, cấu trúc frontend project của các website đang ngày càng phức tạp và khó kiểm soát. 

Những vấn đề trên trở thành động lực ra đời của Webpack – công cụ đóng gói mã nguồn được giới lập trình đánh giá cao mà chúng ta sẽ cùng Bizfly Cloud tìm hiểu trong bài viết này.

Webpack là gì?

Webpack là một công cụ đóng gói các module của javascript (module bundler), nó gói gọn toàn bộ các file js, css (cả scss, sass), image,… thành những đơn vị gọi là Assets. Webpack cũng có thể đóng vai trò như một JavaScript task runner (công cụ tự động thực hiện các tác vụ như minification, compilation, garbage collecting,…) thông qua lượng plugins phong phú từ cộng đồng phát triển nguồn mở.

Việc đóng gói của Webpack được thực hiện chặt chẽ và có cấu trúc rõ ràng, vẫn đảm bảo thứ tự chạy và phụ thuộc giữa các dependencies trong khi tăng tính module và giảm kích thước một cách đáng kể. Webpack cũng hỗ trợ các kênh phát triển khác nhau như development, production,… phù hợp với các dự án lớn.

Tại sao cần sử dụng Webpack?

Trong các website truyền thống, cách phổ biến nhất để chạy các file JavaScript là sử dụng cặp thẻ và truyền các tham số loại file và đường dẫn đến file. Cách làm này đã quá quen thuộc, khiến câu hỏi đặt ra là tại sao cần một trình đóng gói (bundler) như Webpack và không dùng thì có vấn đề gì không?

Ta đều biết các file JavaScript được nạp và thực thi đồng bộ từng file theo thứ tự, nên khi một hàm A nào đó cần gọi một hàm B khác mà file chứa hàm B đó không được nạp trước, hàm A sẽ không thể thực thi. Giả sử bạn chỉ có vài trăm dòng mã JavaScript lưu trong dưới 5 files, tác động của Webpack lên tốc độ phát triển và chạy ứng dụng web là không đáng kể. 

Tuy nhiên trong các dự án lớn hoặc kế hoạch mở rộng tính năng về sau, khi lượng mã nguồn lên tới hàng chục ngàn dòng với hàng chục file khác nhau, bạn sẽ cần một đống cặp thẻ để nạp các file js. 

Trong quá trình đó, bạn cũng sẽ mỏi mắt đi tìm dependencies của từng file và cố gắng nạp chúng theo đúng thứ tự để mọi thứ có thể hoạt động đúng. Đến lúc này chúng ta đều ước các file JavaScript có thể tự biết và nạp đúng thứ tự các dependencies liên quan, và Webpack ra đời để đáp ứng mong muốn đó.

Webpack hoạt động như thế nào?

Trong ES6 và Nodejs có quy định các phương thức để chỉ định và nạp các dependencies cho file js, bẳng cách thêm một số đoạn mã soạn sẵn vào đầu và cuối mỗi file. Webpack sử dụng các cơ chế này để xây dựng một biểu đồ phụ thuộc giữa tất cả các tệp và các dependencies của chúng, đồng thời đóng gói thành module.

Bắt đầu từ một file do người dùng quy định (entry point), Webpack duyệt qua từng file và tìm kiếm tất cả các file/module phụ thuộc (dependencies) có liên quan. Nếu tìm được, nó chuyển đổi mỗi file thành một module và lập sơ đồ phụ thuộc giữa các module đó.

Cuối cùng mọi thứ được đóng gói vào một tệp đầu ra (output) chứa đăng ký của tất cả các module cần thiết. do đó chúng có thể được gọi và thực thi bất cứ khi nào cần đến.

Ưu nhược điểm của Webpack

Ưu điểm

• Giúp cho cho project dễ dàng phát triển, quản lý, tùy biến, nhất là với các project có cấu trúc phức tạp.
• Tăng tốc độ truy vấn HTTP và caching do đóng gói chỉ còn một file
• Đóng gói tất cả file nguồn thành một file duy nhất, nhờ vào loader mà có thể biên dịch các loại file khác nhau
• Biến cả các tài nguyên tĩnh (image, css) trở thành 1 module, dễ dàng quản lý hơn cũng như giúp quá trình triển khai sản phẩm được ổn định thông qua việc giảm nguy cơ deploy code mà lại thiếu file ảnh và CSS.
• Chuyển đổi các mã nguồn ES6 thành ES5 thông qua babel transpiler, giúp tăng tính tương thích trong khi vẫn sử dụng được các tính năng mới

Nhược điểm

• Có ít tài liệu hướng dẫn sử dụng.
• Việc thiết lập cấu hình cho Webpack gặp phải nhiều khó khăn với những cú pháp khó hiểu. Sử dụng ngôn ngữ được ít người biết đến và không được giải thích một cách kỹ lưỡng.
• Webpack chỉ có một nhà phát triển do đó đôi lúc sẽ không kịp theo đuổi sự phát triển của công nghệ và những tài liệu được ghi chép cũng không đầy đủ.
• Tốc độ khởi động chậm trong Dev mode do phải đóng gói tất cả các module.

Mục tiêu của Webpack là gì?

• Webpack được sử dụng để đáp ứng các mục tiêu như:
• Giảm kích thước tệp và làm cho mã code ngắn hơn, loại bỏ mã code không cần thiết và thay đổi các tên biến dài với tính năng Minification
• Giúp chuyển đổi nhiều tệp khác ngoài javascript thành các module
• Biên dịch các javascript module khác nhau
• Giải quyết vấn đề ghi đè các biến toàn cục
• Gửi mã code tới một hoặc nhiều môi trường khi thử nghiệm các tính năng
• Tăng tốc quá trình phát triển, làm giảm thời gian tải của trang web trong quá trình gỡ lỗi giúp tiết kiệm thời gian

Hướng dẫn cài đặt Webpack

Giống như nhiều công cụ phát triển khác, trước tiên bạn cần phải có một package manager như npm hoặc yarn để cài đặt Webpack từ giao diện dòng lệnh.

Để cài webpack trên toàn hệ thống, sử dụng các lệnh sau:

• Yarn: yarn global add webpack webpack-cli
• Npm: npm i -g webpack webpack-cli
• Yarn: yarn add webpack webpack-cli -D
• Npm: npm i webpack webpack-cli –save-dev

Sau khi cài đặt, mở Terminal và chạy lệnh "webpack --version" Nếu cài đặt thành công sẽ trả về phiên bản hiện tại của Webpack.

Để chạy Webpack, thêm đoạn mã sau vào file package.json trong project

Hi vọng qua bài viết này các bạn đã có được những thông tin hữu ích về Webpack, những đặc điểm của nó và cách cài đặt trên máy tính của bạn. Hãy tiếp tục theo dõi bizflycloud để cùng chúng tôi cập nhật những xu hướng mới nhất về công nghệ thông tin và điện toán đám mây đang không ngừng phát triển từng ngày.