Webpack CLI: Giao Diện Dòng Lệnh Cho webpack

Webpack CLI Làm Được Gì

Webpack CLI là giao diện dòng lệnh chính thức cho webpack, được cài như package npm webpack-cli một khi webpack đã có sẵn trong dự án. Nó đưa các tuỳ chọn trong file cấu hình của webpack thành flag dòng lệnh — flag truyền lúc chạy lệnh sẽ ghi đè giá trị tương ứng trong file cấu hình — và chạy các lệnh build, serve, watch, configtest, info, và version mà nhà phát triển dùng hàng ngày khi làm việc với webpack.

Các Lệnh Và Tính Năng Cốt Lõi

• ✓`build` (bí danh `bundle`, `b`) chạy webpack và là lệnh mặc định — gõ `webpack-cli` mà không kèm lệnh con nào cũng sẽ bundle dự án.
• ✓`serve` (bí danh `server`, `s`) chạy webpack cùng một dev server tự tải lại khi file thay đổi.
• ✓`watch` (bí danh `w`) tự chạy lại webpack mỗi khi một file được theo dõi thay đổi, không khởi động dev server.
• ✓`configtest` (bí danh `t`) kiểm tra file cấu hình webpack có hợp lệ hay không.
• ✓`info` (bí danh `i`) in ra thông tin về môi trường cục bộ.
• ✓`version` (bí danh `v`) in số phiên bản của webpack, webpack-cli, webpack-dev-server, và các lệnh khác đã cài.
• ✓`help` (bí danh `h`) in hướng dẫn sử dụng cho một lệnh hoặc option.
• ✓Exit code tách riêng nguyên nhân cho script: `0` khi thành công, `1` khi lỗi đến từ chính webpack, `2` khi có vấn đề về cấu hình/option hoặc lỗi nội bộ.

Tối Ưu Quy Trình Làm Việc Với webpack

• •Bundle bản production bằng cách chạy `build` — hoặc không gõ gì cả, vì đó là lệnh mặc định — thay vì tự viết script Node quanh API của webpack.
• •Chạy vòng lặp dev cục bộ với `serve`, lệnh khởi động dev server và tự tải lại khi file thay đổi.
• •Bắt lỗi cấu hình webpack hỏng bằng `configtest` trước khi nó lọt vào CI hay máy đồng nghiệp.
• •Khởi tạo dự án webpack mới bằng `create-webpack-app init` thay vì copy `webpack.config.js` từ một bài hướng dẫn nào đó.
• •Lấy thông tin môi trường bằng `info` khi báo lỗi hoặc debug vấn đề lệch phiên bản.

Cài Đặt Webpack CLI

Nếu bạn đã làm theo hướng dẫn Getting Started của chính webpack, webpack CLI đã được cài sẵn — hướng dẫn đó tự kéo nó về cho bạn. Nếu bắt đầu từ đầu, hãy thêm nó làm dev dependency bằng `npm install --save-dev webpack-cli`, `yarn add webpack-cli --dev`, hoặc `pnpm add --D webpack-cli`. Bản thân webpack cũng phải có trong dự án, vì webpack CLI là công cụ đi kèm webpack chứ không phải một bundler độc lập.

Khởi Tạo Dự Án webpack Mới

Để bắt đầu một dự án từ con số không, chạy `npx create-webpack-app init` và trả lời các câu hỏi nó đưa ra — nó hỏi về các tuỳ chọn như SCSS, TypeScript, hay hỗ trợ PWA trước khi tạo dự án. Nếu bạn đã cài webpack theo hướng dẫn Getting Started của chính nó, bạn có thể bỏ qua bước scaffold này; webpack CLI đã có sẵn và các lệnh của nó dùng được ngay. Từ điểm xuất phát nào cũng vậy, `build` sẽ bundle dự án, `serve` chạy nó sau một dev server, và `watch` build lại khi bạn chỉnh sửa file.

Các CLI Công Cụ Build Khác

Câu Hỏi Thường Gặp

Vấn đề Webpack CLI giải quyết

Bản thân webpack chỉ cung cấp một API JavaScript — chạy build từ terminal theo cách khác nghĩa là phải tự viết script Node require webpack, dựng một compiler instance, và tự nối logic watch hay dev server. Webpack CLI biến việc đó thành các lệnh: build, serve, watch, và các lệnh còn lại tồn tại để một lệnh gõ ở terminal hay một script npm có thể điều khiển webpack thay vì code Node tự viết lại mỗi lần.

Ai nên dùng — và ai nên bỏ qua

Hãy thử Webpack CLI nếu bạn đã dùng webpack và muốn các lệnh `build`/`serve`/`watch`/`configtest` của nó thay vì tự viết script Node quanh API webpack — `create-webpack-app` cũng hữu ích lần đầu bạn dựng dự án. Đừng xem đây là một quyết định độc lập nếu bạn chưa chọn webpack: Webpack CLI tự nó không bundle được gì cả, nên câu hỏi thật sự là webpack có phù hợp với dự án của bạn hay không so với thứ như Vite hay esbuild, và Webpack CLI chỉ đi kèm khi bạn đã quyết định.

Repo liên quan