Loaders và Plugins trong Webpack khác nhau như thế nào?

Quy tắc kinh nghiệm: cần biến đổi một loại file → loader; cần can thiệp vào tiến trình build → plugin.

Loader biến đổi file thành module, hoạt động ở mức từng file trong pipeline resolve module. Thứ tự chạy là phải sang trái (dưới lên trên trong mảng config) — ['style-loader', 'css-loader', 'sass-loader'] chạy sass-loader trước tiên.

Loader hay gặp: babel-loader (ES6+/JSX → ES5), css-loader (parse @import và url()), style-loader (chèn CSS vào DOM), sass-loader (SCSS → CSS), file-loader/asset modules (ảnh, font), ts-loader/swc-loader (TypeScript). Viết loader riêng khá dễ: chỉ là một function nhận source string, biến đổi rồi trả về string mới.

Plugin móc vào vòng đời của Webpack compiler qua các hook (beforeRun, emit, done).

Plugin hay gặp: HtmlWebpackPlugin (sinh HTML kèm thẻ script), MiniCssExtractPlugin (tách CSS ra file riêng thay vì nhét vào JS), TerserPlugin (minify JS), DefinePlugin (thay hằng số lúc build, ví dụ NODE_ENV), BundleAnalyzerPlugin (nhìn thấy bundle nặng ở đâu).

Viết plugin riêng khó hơn loader: phải implement method apply(compiler) rồi tap vào các hook của compiler.