Webpack là gì? Vai trò trong modern web development?

Webpack là module bundler gộp toàn bộ asset (JS, CSS, ảnh) thành các file bundle đã tối ưu.

Khái niệm cốt lõi:
- Entry — điểm bắt đầu của dependency graph, thường là src/index.js.
- Output — nơi ghi bundle ra, ví dụ dist/bundle.js.
- Loader — biến file thành module (babel-loader cho JSX, css-loader parse import CSS).
- Plugin — can thiệp vào vòng đời build (HtmlWebpackPlugin sinh HTML, MiniCssExtractPlugin tách CSS ra file riêng, DefinePlugin chèn hằng số).
- Mode (development/production) — tự bật bộ tối ưu tương ứng.

webpack-dev-server serve bundle từ bộ nhớ và HMR thay module mà không reload trang. Code splitting thì dùng import() động, Webpack tự cắt chunk và load khi cần.

Vì sao đang bị thay thế: config dài ra (file webpack.config.js hàng trăm dòng) và dev server chậm vì phải bundle cả app cả lúc khởi động lẫn lúc HMR — Vite/Turbopack giải bài này bằng native ESM.

Dù vậy Webpack vẫn còn phổ biến ở nhiều project enterprise, ở Create React App đã eject, và ở những build pipeline tự dựng cần độ linh hoạt cao.