206 Cộng Hòa, Phường 12, Quận Tân Bình, TPHCM

electronichcm@gmail.com

Giới thiệu

Tin tức

Liên hệ

Vận chuyển

Toàn quốc (trả phí)

093 629 2319

Hotline tư vấn miễn phí

093 214 0397

Hotline tư vấn miễn phí

Tin tức

Webpack là gì? Định nghĩa Webpack

Webpack là gì? Định nghĩa Webpack

Ngày nay, với sự phát triển mạnh mẻ của các Framework Javascript và CSS làm cho website  sử dụng nhiều mã Javascript hơn giúp website tải nhanh hơn, tương tác với người dùng cao hơn và giảm tai cho các server.

Bên cạnh những lợi ích trên thì việc sử dụng nhiều thư viện, các module được sử dụng nhiều hơn  dẫn đến website to lên và không kiểm soát được. Khi đó bạn cần một hệ thống quản lý module tốt để giải quyết vấn đề trên.

Hiện nay, có rất nhiều hệ thống quản lý module(Modulers) nổi tiếng như: Browserify, RequireJS, Webpack...ra đời nhằm giải quyết vấn để trên. Một trong số các Modulers trên thì Webpack hiện đang là Modulers được nhiều người sử dụng nhất bởi tính năng nổi trội cũng như các khả năng làm việc tốt và ổn định hơn. Vậy Webpack là gì, hãy cùng Electronic VN tìm hiểu về nó nhé.

Webpack là gì? Định nghĩa Webpack

Webpack là gì?

Hiểu đơn giản thì Webpack là một công cụ dùng để đóng gói lại toàn bộ phần mã nguồn cũng như các file hình ảnh, font, và CSS( bao gồm SCSS, SASS…) thành 1 file tĩnh(hoặc 2-3 file). Việc đóng gói này không phải làm một cách lộn xộn mà được gói theo một cấu trúc nhất định.

Webpack sẽ sắp xếp các phần sao cho mọi thứ ngăn nắp giống như cấu trúc Project từ phần này sang phần kia, chỉ định phần nào chạy trước phần nào chạy sau và phụ thuộc lẫn nhau giúp website làm việc ổn định hơn.

Ngoài ra, Webpack còn tích hợp nhiều tính năng hữu ích như: Optimize, Watchfile hay tuỳ chọn chạy trên các môi trường khác nhau (production, de)… Webpack còn có thể sử dụng plugin để nén file js từ 6mb xuống còn 76 kb rất tiện lợi. Chính vì thế, Webpack được xem là công cụ hỗ trợ tốt nhất cho các dev js, việc sử dụng Webpack cho các project lớn là hết sức tuyệt vời.

Webpack là gì? Định nghĩa Webpack

Ưu điểm khi sử dụng Webpack

Xử lý các file tĩnh, mọi hình ảnh,  CSS đều được đóng gói vào folder dist/ dễ dàng. Sau khi được đóng gói các file sẽ ở dạng module.

Dễ dàng chia tách file mã nguồn, chia nhỏ toàn bộ tài nguyên các thư viện và các tài nguyên phụ thuộc thành các “chunk” giúp quá trình tải các tài nguyên nhanh.

Kiểm soát quá trình xử lý các assets: khi file ảnh có kích thước nhỏ bạn có thể yêu cầu Webpack encode ra dưới dạng base64 và chèn trực tiếp vào JavaScript để giảm số lượng HTTP requests. Nếu file ảnh lớn thì tải nó thông qua URL. Nếu cần requirethì nó sẽ được tự động chuyển đổi từ Less về CSS thuần.

Cho phép tích hợp các thư viên bên thứ ba ở dạng module và cá nhân hóa mọi thành phần của công cụ đóng gói module. Webpack thích hợp cho cả những dự án cực lớn vẫn làm việc rất ổn định.

Bài viết liên quan:

Nhược điểm của Webpack

Tài liệu hướng dẫn rất kém cùng với mã nguồn thì cũng rất nhiều vấn đề nên không thích hợp với những người mới học vè Web.

Việc thiết lập cấu hình cho Webpack, làm việc với các CSS files, Images và một số file khác không phải js sẽ gây khó hiểu ở lúc đầu. Tốt nhất bạn nên xem những thiết lập có sẵn từ những dự án dạng "boilerplate" hoặc dùng những thư viện giúp kiểm tra file cấu hình.

Wepback gần như chỉ được 1 người quản lý dẫn đến mọi thứ không theo kịp với tốc độ phát triển của công nghệ khác dùng với nó

Webpack sử dụng ngôn ngữ rất khó hiểu và tài liệu cũng không được giải thích kỹ lưỡng nên rất khó cho người mới học.

Cách cài đặt webpack

Trước khi tiến hành cài đặt Webpack thì máy bạn cần có Nodejs, file Package.json và npm (hoặc yarn). Dưới đây mình sử dụng npm để hướng dẫn bạn cài đặt Wrbpack.

Bước 1: tạo một folde với tên tùy ý và khởi động.

Bước 2: tạo một file Package.json bằng lệnh “npm init”. Khi chạy lệnh bạn điền thông tin vào các dòng lệnh, phần nào biết thì trả lời, không biết thì Enter để tiếp tục

Webpack là gì? Định nghĩa Webpack

Bước 3: tiếp đến bạn cài đặt Webpack bằng lệnh “npm install webpack –save-dev”. Sau khi chạy lệnh xong hãy vào file package.json xem lại.

Webpack là gì? Định nghĩa Webpack

Bước 4: so sánh lại file package.json lúc trước và sau khi chạy lệnh có được thêm 1 đoạn mã

“devDependencies”:{

“webpack” : “^3.0.0”

}

Nếu có thì Webpack đã được cài đặt thành công.

Bước 5: hãy thêm tiếp đoạn mã

“build” : “webpack –p”,

“watch”:  “webpack –watch”

Vào file package.json là hoàn tất phần cài đặt.

Kết luận

Webpack là một công cụ modulers rất xuất sắc, nó hữu dụng trong những tình huống như muốn tải file CSS trong mã Javascript. Nếu các bạn muốn biết sâu hơn về webpack thì có thể vào phần document của webpack.js.org để học nhé. Xin chào và hẹn gặp lại các bạn ở các bài viết sau.

Keyword google search: webpack là gì

HÃY KHÁM PHÁ THÊM NHỮNG SẢN PHẨM HOT NHẤT. HÃY Ở LẠI WEBSITE THÊM VÀI PHÚT

Electronic VN

Mỗi sản phẩm của chúng tôi là một kiệt tác, chúng tôi rất hân hạnh được là nhà cung cấp của bạn!