Hướng dẫn cấu hình Webpack đơn giản

Webpack là gì? #

Webpack hiểu đơn giản là một công cụ giúp chúng ta đóng gói (bundle) các tài nguyên như js, css, images, fonts… thành một file hoặc nhiều file theo cách có tổ chức, gọn gàng, sạch sẽ, thơm tho…
Link trang chủ: https://webpack.js.org/

Đóng gói nhiều file JS, CSS thành một file duy nhất, điểm đặc biệt là Webpack sẽ tổ chức nội dung trong các file một cách khoa học hợp lí
Gói gọn các file JS và CSS thành dạng minify (nội dung file là một dòng duy nhất, loại bỏ các khoảng trống thừa hay comment trong code giúp file nhỏ gọn nhất)
Thực thi các file SCSS một cách tự động, nếu bạn nào làm việc nhiều với SCSS thì chắc chắn sẽ thích tính năng này
Tối ưu hóa Images, SVG, nén các file với dung lượng nhỏ nhất, hoặc chuyển đổi file thành URL (Base64) và chèn URL này vào Bundle
Giúp thao tác local, development hay server một cách thuận tiện như tự động loading (build) khi save, hay kiểm soát quá trình upload file tránh sai sót…
Cài đặt hàng loạt ứng dụng một cách đơn giản: SCSS, ReactJS…
Hàng loạt tính năng khác chờ bạn khám phá: biên dịch Babel ES6 sang ES5, biên dịch CoffeeScript sang Javascript, tách nhỏ thành nhiều file…
Và quan trọng là webpack hoàn toàn miễn phí