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.

Webpack is the traditional module bundler — powerful and flexible but complex config and slow dev server (bundles the entire app on start); being replaced by Vite/Turbopack in new projects.

• Webpack is a module bundler that combines all assets (JS, CSS, images) into optimized bundle files.
• Core concepts: Entry — the starting point of the dependency graph (typically src/index.js); Output — where bundles are emitted (dist/bundle.js); Loaders — transform file types into modules (babel-loader converts JSX, css-loader parses CSS imports); Plugins — intervene in the build lifecycle (HtmlWebpackPlugin generates HTML, MiniCssExtractPlugin extracts CSS into separate files, DefinePlugin injects constants); Mode (development/production) — automatically applies optimizations.
• Dev server: webpack-dev-server serves bundles in-memory, HMR replaces modules without reloading the page.
• Code splitting with dynamic import(): Webpack automatically creates chunk files loaded on demand.
• Why it is being replaced: configuration is overly complex (webpack.config.js can be hundreds of lines), dev server is slow because it bundles the entire app on start and during HMR — Vite/Turbopack solve this with native ESM.
• Still widely used: many enterprise projects, Create React App (ejected), and custom build pipelines requiring high flexibility.