Webpack Là Gì

     
Webpack là công cụ ngày càng được cộng đồng sử dụng Javascript ưa chuộng. Bạn đã biết cách làm chủ Webpack và sử dụng nó cho project của mình chưa?

Webpack là gì?

Webpack là công cụ giúp bạn compile các module Javascript. Nó hay được gọi là “module bundler”.

Bạn đang xem: Webpack là gì

Thay vì nhiều file, nó tạo ra một hoặc vài file để chạy ứng dụng của bạn.

Webpack có thể trở thành người bạn đồng hành trong suốt quá trình dev của bạn, bởi vì nó có thể:

Đóng gói các file của bạn.Theo dõi (Watch) các thay đổi và chạy lại các task (như gulp).Có thể chạy biên dịch Babel ES6 sang ES5, nên bạn có thể vô tư viết ES6 mà không lo trình duyệt chưa hỗ trợ đầy đủ.Có thể biên dịch CoffeeScript sang Javascript.Có thể chuyển ảnh inline sang data URI.Cho phép bạn gọi require() trong file CSS.Có thể chạy máy chủ dùng cho development.Có thể hỗ trợ chế độ hot module replacement.Có thể tách nhỏ file output thành nhiều file nhỏ để giảm kích thước khi tải trang.… và còn rất nhiều thứ thú vị khác nữa.

Webpack không bị giới hạn bởi frontend, mà cùng dùng làm backend Node.js trong lập trình.

Có nhiều đối thủ của Webpack có nhiều điểm giống với những gì Webpack làm. Điểm khác biệt ở đây là nhiều đối thủ sinh ra để làm “task runners”, đại khái là thực hiện các công việc lặp đi lặp lại, trong khi Webpack có xuất phát là “module bundler”, tức kẻ đóng gói các món hàng và trao tay.

Ta sẽ cùng tìm hiểu quá trình làm việc của Webpack ngay sau đây.

Xem thêm: Tiếng Anh Lớp 5 Tập 2 Review 3, Tiếng Anh Lớp 5 Review 3 Trang 36

Cài đặt Webpack

Webpack có sẵn bằng cách cài đặt global -g hoặc cho từng project.

Nếu bạn cài đặt global để sử dụng bất kì đâu, gõ lệnh:

npm i -g webpack webpack-cliMột khi hoàn tất, bạn có thể sử dụng dòng lệnh webpack-cli:

*

Cách khác là ta cài đặt trong 1 project nào đó. Ta sẽ thực hiện câu lệnh sau:

npm i webpack webpack-cli --save-devMột khi hoàn tất, bạn thêm các dòng sau vào trong package.json:

{ "scripts": { "build": "webpack" }}Khi đó, bạn có thể dùng npm run build được nhé.

Tất nhiên, cài mới chỉ là cài, chưa xong, ta sẽ còn cấu hình Webpack để làm theo thứ mình muốn nữa.

Cấu hình Webpack

Nếu bạn lười, hay tốt nhất ta hiểu là Webpack (từ phiên bản 4) mặc định có thể thực hiện được ngay việc sau:

Entry point (điểm bắt đầu của source) nằm trong ./src/index.jsKết quả compile sẽ nằm ở ./dist/main.js

Tuy nhiên, chúng ta tạo file webpack.config.js để thiết lập chi tiết hơn.

Cấu hình Entry Point (Đầu vào)

Trong webpack.config.js, bạn có thể thay đổi path entry point như dưới đây. Mặc định nếu bạn không nhập thì được hiểu là ./src/index.js như đã nói ở trên.

Xem thêm: Truyện Lặng Lẽ Sa Pa Có Mấy Nhân Vật, Truyện Ngắn Lặng Lẽ Sa Pa Có Mấy Nhân Vật

module.exports = { /*...*/ entry: "./src/js/main.js" /*...*/}

Cấu hình output (đầu ra)

Trong webpack.config.js, bạn cũng có thể thay đổi đầu ra. Mặc định khi không nhập thì sẽ là ./dist/main.js. Ta có thể đổi thành path khác, ví dụ:

module.exports = { /*...*/ output: { path: path.resolve(__dirname, "dist"), filename: "vendor.js" } /*...*/}

Sử dụng CSS Loader

Sử dụng Webpack cho phép bạn thực hiện import hoặc require trong các dòng code Javascript của mình. Hơn nưa, bạn có thể dùng trong cả CSS, ví dụ trong file main.css:

import "base/typography.css";import "base/buttons.css";Điều kiện để làm được là bạn phải sử dụng RegExp để xác định mục tiêu file nào, chẳng hạn với CSS:

module.exports = { /*...*/ module: { rules: < { test: /\.css$/, use: "css-loader" }, }> } /*...*/}Thêm nữa, ta có thể có thêm lựa chọn cho riêng loader vừa gọi như sau:

module.exports = { /*...*/ module: { rules: < { test: /\.css$/, use: < { loader: "css-loader", options: { modules: true } } > } > }/*...*/}Bạn cũng có thể gọi nhiều loader khác nhau, ví dụ:

module.exports = { /*...*/ module: { rules: < { test: /\.css$/, use: < "style-loader", "css-loader", > } > } /*...*/}Trong ví dụ ở trên:

css-loader làm nhiệm vụ import file typography.css + buttons.css vàp trong 1 file CSS duy nhất.