Ưu đãi trong tuần: Nhập mã UD50 giảm 50k cho đơn từ 300k!
Trang chủ
Đăng nhập
Xem tất cả kết quả
Menu
Đăng nhập Đăng ký miễn phí

Webpack 5: The Complete Guide For Beginners

Webpack 5: Hướng Dẫn Toàn Tập Cho Người Mới Bắt Đầu

Webpack 5: Hướng Dẫn Toàn Tập Cho Người Mới Bắt Đầu

Học Webpack 5 từ cơ bản nhất đến nâng cao! Sử dụng Webpack với JS, CSS, NPM, Module Federation và Micro Frontends.

4.6
(5,549 đánh giá)
28,609 học viên
Giảng viên
Viktor Pyskunov
Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao
50.000đ 349.000đ -86%
✓ Xem giỏ hàng và thanh toán
Bao gồm phụ đề tiếng Việt, tiếng Anh
5.0 giờ video
68 bài giảng
Truy cập vĩnh viễn
Học trên mọi thiết bị
Cập nhật: 18/03/2026
#Build Tools #Frontend Tooling #Javascript #Web Development

Bạn sẽ học được gì

Bắt đầu nhanh chóng, không có phần giới thiệu dài dòng và lan man.
Tạo cấu hình Webpack 5 đầy đủ chức năng, sẵn sàng cho môi trường production từ con số không.
Hiểu rõ bản chất cách Webpack hoạt động và khi nào nên sử dụng nó.
Tối ưu hóa bản build production của Webpack để nhỏ gọn và nhanh chóng.
Cải thiện trải nghiệm phát triển bằng cách bật Hot Module Replacement, xử lý lỗi tốt hơn, v.v.
Đi sâu vào Asset Modules, Loaders và Plugins của Webpack 5.
Sử dụng các tính năng JavaScript mới nhất với Webpack 5, Babel 7 và NPM.
Tổ chức code tốt hơn với ES Modules và Webpack Code Splitting.
Có khả năng hiểu và cải thiện các cấu hình Webpack hiện có.
Tích hợp Webpack 5 với NodeJS và framework Express.
Sử dụng Webpack cho cả Ứng dụng Trang Đơn (SPA) và Ứng dụng Nhiều Trang (MPA).
Có nền tảng vững chắc để học các tính năng nâng cao của Webpack.
Làm chủ tính năng Module Federation mới được giới thiệu trong Webpack 5.

Yêu cầu

Kiến thức cơ bản về JavaScript
Kiến thức cơ bản về HTML

Đối tượng phù hợp

Tất cả nhà phát triển có kiến thức JavaScript cơ bản

Nội dung khóa học

13 phần • 66 bài giảng
1 Giới thiệu
2 Những gì bạn cần cho khóa học này
1 Tại sao chúng ta cần Webpack
2 Thiết lập Ứng dụng của chúng ta
3 Cài đặt Webpack
4 Lưu ý nhỏ về Kho lưu trữ Github
5 Tích hợp Webpack vào Ứng dụng JS của chúng ta
6 Cấu hình Webpack Tùy chỉnh
1 Giới thiệu về Asset Modules
2 Xử lý Hình ảnh với Webpack
3 publicPath là gì?
4 Loại Module Asset/inline
5 Loại Asset Tổng quát
6 Loại Module Asset/source
1 Webpack Loader là gì?
2 Xử lý CSS với Webpack
3 Xử lý SASS
4 Sử dụng các Tính năng JavaScript Mới nhất với Babel
5 Các Tính năng JavaScript Thử nghiệm
1 Webpack Plugin là gì?
2 Thu gọn (Minification) Bundle Webpack kết quả
3 Trích xuất CSS thành một Bundle riêng với mini-css-extract-plugin, Phần 1
4 Trích xuất CSS thành một Bundle riêng, Phần 2
5 Bộ nhớ đệm trình duyệt (Browser Caching)
6 Cách làm sạch thư mục Dist trước khi tạo Bundle mới
7 Tạo Tệp HTML Tự động trong Quá trình Build Webpack
8 Tùy chỉnh Tệp HTML được tạo
9 Tích hợp với Handlebars
10 Thêm các Webpack Plugins khác
1 Giới thiệu
2 Chế độ (Mode)
3 Quản lý Cấu hình Webpack cho các trường hợp sử dụng Production và Development
4 Phát triển nhanh hơn với webpack dev server
5 Dọn dẹp một chút
1 Giới thiệu
2 Tạo Component KiwiImage
3 Tách Code trong Webpack: Nhiều Bundle JS và CSS
4 Cách tạo Nhiều Tệp HTML
5 Trích xuất các Phụ thuộc Chung khi Tách Code
6 Đặt Tùy chọn Tùy chỉnh cho Việc Tách Code
7 Cách Thiết lập Môi trường Phát triển cho Ứng dụng Nhiều Trang
1 Cách sử dụng Kho lưu trữ Github
1 Giới thiệu
2 Lấy Code cho Ứng dụng Trang Đơn
3 Tích hợp Express vào Ứng dụng của chúng ta
4 Phục vụ Trang HTML qua Express
5 Xử lý JS và CSS qua Express
6 Lấy Code cho Ứng dụng Nhiều Trang
7 Tích hợp Express.js vào Ứng dụng Nhiều Trang
1 Tạo 2 Ứng dụng riêng biệt, Phần 1
2 Tạo 2 Ứng dụng riêng biệt, Phần 2
3 Thiết lập Module Federation
4 Sử dụng các Module được Liên kết (Federated)
5 Các Module được Tải lúc Runtime
6 Tạo Micro Frontends
7 Micro Frontends trong Thực tế, Phần 1
8 Micro Frontends trong Thực tế, Phần 2
9 Component Thanh điều hướng (Navigation Bar)
10 Module Federation Lồng nhau. Phần 1
11 Module Federation Lồng nhau. Phần 2
1 Lấy Mã nguồn
2 Tích hợp với jQuery
1 Cấu hình ESLint
2 Thêm gợi ý về ESLint
1 Tổng kết
2 Bài giảng bổ sung

Giới thiệu khóa học

My main goal is to help you understand and master Webpack, particularly its latest version Webpack 5! This course was specifically designed for those who want to learn Webpack from scratch, and for those who are already working with Webpack, but don't fully understand how it works.

In this course we will build fully functional, production ready Webpack configuration from scratch. We will start from the very simple things and then gradually move towards more advanced topics. Each lesson builds on top of the previous ones, so it is easy to follow.

After this course you will definitely be able to use Webpack in your projects. You will be able to create your own Webpack configurations and improve existing ones. We will also cover using NPM and Babel in this course in order to use the latest JavaScript technologies. If you worked on a project with Webpack, but never touched the configuration, after this course you will be able to touch it, and even improve it :)

I am constantly updating this course, so you can always be sure that it is up-to-date and covers the latest features of Webpack.

If you have any questions regarding Webpack, feel free to post them in the Q&A section. Many people have already found answers to their questions there, and I will do my best to help you with your questions as well.

Most React and Angular boilerplates come with Webpack included, and most people are afraid to touch its default configuration. I strongly believe that you should not be scared of it. You should master it!

P. S. Made in Ukraine

Khóa học liên quan

Khám phá thêm các khoá học cùng chủ đề

Hiển thị tất cả khoá học Build Tools
Hiển thị tất cả khoá học Javascript
Hiển thị tất cả khoá học Web Development
Zalo
Tôi có thể tư vấn khoá học cho bạn 😊