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

Webpack là module bundler truyền thống — mạnh và linh hoạt nhưng config phức tạp và dev server chậm (bundle toàn bộ app khi start); đang bị thay thế bởi Vite/Turbopack trong projects mới.

• Webpack là module bundler tổng hợp tất cả assets (JS, CSS, images) thành bundle files tối ưu.
• Core concepts: Entry — điểm bắt đầu của dependency graph (thường src/index.js); Output — nơi emit bundles (dist/bundle.js); Loaders — transform file types thành modules (babel-loader chuyển JSX, css-loader parse CSS imports); Plugins — can thiệp vào build lifecycle (HtmlWebpackPlugin tạo HTML, MiniCssExtractPlugin tách CSS ra file riêng, DefinePlugin inject constants); Mode (development/production) — tự động apply optimizations.
• Dev server: webpack-dev-server serve bundles in-memory, HMR thay module mà không reload page.
• Code splitting với dynamic import(): Webpack tự tạo chunk files, load on demand.
• Tại sao đang bị thay thế: config quá phức tạp (webpack.config.js dài hàng trăm dòng), dev server chậm vì bundle toàn bộ app khi start và khi HMR — Vite/Turbopack giải quyết vấn đề này với native ESM.
• Vẫn phổ biến: nhiều enterprise projects, Create React App (eject), custom build pipelines cần flexibility cao.