Với xu hướng lập trình mà business và phần lớn xử lý đều nằm ở tầng phía front-end với gánh nặng càng ngày càng đè lên vai chàng dũng sĩ javascript tội nghiệp, thì các công cụ hỗ trợ cho anh ấy (ahihi) như typing, task runner, test tools,… tè le tà la hết, nói chung là không thể thiếu được với 1 front-end dev. Hôm nay mình muốn giới thiệu Webpack một module loader cho javascript một cách cơ bản nhất.
Bạn đang xem: Webpack là gì
Webpack hiện đang là module loader được sử dụng rộng rãi nhất hiện nay với cộng động support to lớn và những chức năng vô cùng mạnh mẽ. Phiên bản hiện tại là v2.3.3.
webpack với 26k stars
Vậy Module loader là gì?
Một cách đơn giản là ngày xưa chúng ta thường add những thư viện (3th parties) như jquery, moment, select2, dtpicker,sticky,… vào thẻ script để khi web load lên xong thì những thư viện này sẽ được execute và xử lý. Nhưng không còn như những ngày xưa chỉ vài dòng jquery là đủ dùng, sau này do việc code dưới front-end càng ngày càng phìng to nên việc quản lý code = javascript càng ngày càng tõ rõ sự quan trọng nên từ đó khái niệm module loader ra đời.
Có khá nhiều thư viện từ nhỏ đến to ra đời cho việc này: Tiny Loaders (curl, LABjs, almond), RequireJS, Browserify, SystemJs, Webpack và gần đây đang nổi lên là RollupJs (mình chưa xài thằng này nhưng nghe nói Facebook sử dụng thg này cho React :D).
Nếu bạn nào có xài SystemJs, Browserify rồi thì thấy thật ra Webpack ra đời từ thừa hưởng những thành quả và kinh nghiệm từ những thư viện đó và phát triển lền một tầm mới tốt hơn cho công việc quản lý module.
Xem thêm: 419 Là Gì – Một Số Từ Ngữ Trong Ngôn Tình
Có ai đọc tới đây mà chưa thấy hiểu gì không? Hoặc chưa tiếp xúc với khái niệm module loader trong javascript bao giờ, thì xem qua ví dụ này sẽ chắc dễ hiểu hơn.
Ví dụ cơ bản
Chúng ta sẽ có 2 file .js
//xinchao.jsexport default function xinchao(name){ console.log(“Xin chao “+ name);}//index.jsimport xinchao from “./xinchao”;xinchao(“Dinh”);Thì đây import xinchao from “./xinchao” chính là chỗ mà Webpack sẽ làm việc cho chúng ta.
import và export hiện tại chưa được support cho đa phần các browser. Và khi bạn viết như thế này thì browser cũng ếu hiểu bạn đang muốn làm cái gì? Và đó là lúc các module loader xuất hiện.
Hỗ trợ import export của các trình duyệt
Với 2 file .js ở trên chúng ta sẽ dùng Webpack để bundle và xem kết quả như thế nào nhé?
Tạo file webpack.config.js để config cho Webpack.
Xem thêm: Upsell Là Gì – Và Khác Gì Với Cross
//webpack.config.jsmodule.exports = { entry: “./index.js”, output: { filename: “bundle.js” }}– entry: là file mà chúng ta sẽ bắt đầu chạy bằng webpack. Nói chung nó là bắt nguồn của chiến tranh. Nó import từ thằng khác rồi thằng khác import từ thằng khác khác nữa từ đó sẽ kéo theo một chuỗi có hệ thống việc load các js module. Ở đây là file index.js ở trên.
Chuyên mục: Hỏi Đáp
