Công cụ xây dựng Webpack và hệ thống kiểm soát phiên bản Git trong phỏng vấn Frontend

1. Webpack là gì và khác biệt so với Grunt và Gulp như thế nào?

Webpack là một công cụ đóng gói mô-đun, trong đó mọi thứ đều được coi là mô-đun. Nó chuyển đổi tệp thông qua loader và chèn hook thông qua plugin, cuối cùng tạo ra các tệp được tổ hợp từ nhiều mô-đun. Webpack hoạt động như một máy đóng gói mô-đun: phân tích cấu trúc dự án, tìm các mô-đun JavaScript và các ngôn ngữ mở rộng khác mà trình duyệt không thể chạy trực tiếp, sau đó đóng gói chúng thành định dạng phù hợp cho trình duyệt.

Trong khi Gulp/Grunt là các công cụ tối ưu hóa quy trình phát triển frontend, Webpack là giải pháp mô-đun hóa. Grunt và Gulp hoạt động bằng cách chỉ định các bước cụ thể như biên dịch, kết hợp, nén trong tệp cấu hình, sau đó tự động hoàn thành các tác vụ này. Webpack xử lý dự án như một tổng thể, bắt đầu từ tệp chính (ví dụ: index.js) để tìm tất cả các phụ thuộc, xử lý chúng thông qua loader và đóng gói thành một hoặc nhiều tệp JavaScript mà trình duyệt có thể nhận diện.

2. Ưu điểm và nhược điểm của Webpack

Ưu điểm:

  • Tập trung vào xử lý dự án mô-đun, dễ sử dụng ngay từ đầu
  • Mở rộng thông qua plugin, tiện lợi và linh hoạt
  • Cộng đồng lớn mạnh, thường xuyên cập nhật tính năng mới
  • Trải nghiệm phát triển tốt

Nhược điểm duy nhất là chỉ áp dụng được cho các dự án sử dụng mô-đun hóa.

3. Giải thích về bundle, chunk, module

  • Bundle: Tệp được tạo ra bởi quá trình đóng gói của Webpack
  • Chunk: Khối mã, bao gồm nhiều mô-đun được kết hợp để hợp nhất và phân chia mã
  • Module: Mô-đun đơn lẻ trong quá trình phát triển, mỗi mô-đun tương ứng với một tệp, Webpack sẽ đệ quy từ entry để tìm tất cả các mô-đun phụ thuộc

4. Loader và Plugin là gì? Sự khác biệt giữa chúng?

Loader: Công cụ chuyển đổi mô-đun, chuyển đổi nội dung gốc của mô-đun thành nội dung mới theo yêu cầu. Thông qua các loader khác nhau, Webpack có thể chuyển đổi các loại tệp khác nhau thành tệp JS, ví dụ như CSS, ES6/7, JSX...

Plugin: Tiện ích mở rộng, chèn logic mở rộng vào các thời điểm cụ thể trong quá trình xây dựng của Webpack để thay đổi kết quả xây dựng hoặc thực hiện các tác vụ mong muốn. Plugin là một đối tượng có phương thức apply, tham gia vào tất cả các quy trình đóng gói của Webpack.

Loader chuyển đổi mã nguồn của mô-đun, trong khi plugin giải quyết các vấn đề mà loader không thể thực hiện. Plugin có thể được gọi ở bất kỳ giai đoạn nào và có thể xử lý đầu ra của loader.

5. Cập nhật nóng mô-đun là gì?

Cập nhật nóng mô-đun là tính năng của Webpack cho phép cập nhật mã mà không cần làm mới trình duyệt sau khi sửa đổi. Đây là phiên bản nâng cao của tính năng tự động làm mới.

Trong devServer, có thể kích hoạt thay thế mô-đun nóng thông qua thuộc tính hot:

// Thông qua tệp cấu hình
const buildTool = require('webpack');
const pathUtil = require('path');
let environment = process.env.NODE_ENV === "development" ? "development" : "production";
const configuration = {
  mode: environment,
  devServer: {
    hot: true
  },
  plugins: [
    new buildTool.HotModuleReplacementPlugin(), // Plugin tải nóng
  ],
};
module.exports = configuration;

6. Một số plugin và loader phổ biến

Plugin:

  • html-webpack-plugin: Tạo tệp HTML đầu vào và thêm tài nguyên bên ngoài
  • mini-css-extract-plugin: Tách tệp CSS
  • clean-webpack-plugin: Xóa tệp đóng gói
  • HotModuleReplacementPlugin: Ứng dụng cập nhật nóng
  • copy-webpack-plugin: Sao chép tệp tĩnh
  • terser-webpack-plugin: Nén mã ES6 thông qua TerserPlugin

Loader:

  • css-loader: Tải CSS, hỗ trợ mô-đun hóa, nén, nhập tệp
  • image-loader: Tải và nén tệp hình ảnh
  • babel-loader: Chuyển đổi ES6 sang ES5
  • style-loader: Chèn mã CSS vào JavaScript, tải CSS thông qua thao tác DOM
  • file-loader: Xuất tệp vào thư mục, tham chiếu tệp đầu ra thông qua URL tương đối
  • source-map-loader: Tải tệp Source Map bổ sung để thuận tiện cho việc gỡ lỗi

7. Làm thế nào để tự động tạo cấu hình Webpack?

Sử dụng các công cụ như webpack-cli, vue-cli...

8. Sự khác biệt giữa webpack-dev-server và máy chủ HTTP như nginx?

webpack-dev-server sử dụng bộ nhớ để lưu trữ các tệp được đóng gói trong môi trường phát triển của Webpack và hỗ trợ cập nhật mô-đun nóng, giúp quá trình phát triển đơn giản và hiệu quả hơn so với máy chủ HTTP truyền thống.

9. Quy trình xây dựng Webpack

Bắt đầu từ mô-đun được cấu hình trong entry, đệ quy phân tích tất cả các mô-đun phụ thuộc. Với mỗi mô-đun tìm thấy, sẽ sử dụng loader tương ứng theo quy tắc chuyển đổi đã cấu hình. Sau khi chuyển đổi mô-đun, tiếp tục phân tích các mô-đun phụ thuộc. Các mô-đun này được nhóm theo entry, một entry và tất cả các mô-đun phụ thuộc được nhóm thành một Chunk. Cuối cùng Webpack chuyển đổi tất cả các Chunk thành tệp đầu ra. Trong toàn bộ quy trình, Webpack sẽ thực thi logic được định nghĩa trong plugin tại thời điểm thích hợp.

10. Entry và Output là gì?

Entry: Điểm vào, cho biết Webpack nên sử dụng mô-đun nào làm điểm khởi đầu xây dựng dự án, mặc định là ./src/index.js

Output: Điểm ra, cho biết Webpack nên xuất mã đã đóng gói ở đâu và đặt tên như thế nào, mặc định là ./dist

11. Cách cấu hình ứng dụng một trang và đa trang với Webpack

// Ứng dụng một trang
module.exports = {
  entry: './path/to/my/entry/file.js'
}

// Ứng dụng đa trang
module.entries = {
  entry: {
    homePage: './src/homePage/index.js',
    aboutPage: './src/aboutPage/index.js'
  }
}

12. Cache dài hạn là gì? Làm thế nào để tối ưu cache dài hạn trong Webpack?

Khi người dùng truy cập trang web, trình duyệt lưu trữ các tài nguyên tĩnh để tăng tốc độ tải. Mỗi lần cập nhật mã cần trình duyệt tải mã mới, cách đơn giản nhất là giới thiệu tên tệp mới. Trong Webpack có thể chỉ định chunkhash trong output, đồng thời tách mã thường xuyên cập nhật khỏi mã khung. Sử dụng NameModulesPlugin hoặc HashedModuleIdsPlugin để giữ tên tệp không đổi khi đóng gói lại.

Phần Git

1. Sự khác biệt giữa Git và SVN

Git là hệ thống kiểm soát phiên bản phân tán, SVN là hệ thống tập trung (sự khác biệt cốt lõi). Ưu điểm của Git so với SVN là có thể kiểm soát phiên bản mà không cần mạng. Git lưu trữ nội dung theo cách dữ liệu, trong khi SVN lưu trữ theo tệp. Git có thể chia sẻ công khai, SVN chủ yếu truy cập nội bộ công ty. Git không phụ thuộc máy chủ trung tâm, SVN phụ thuộc máy chủ. Git không có số phiên bản toàn cục, SVN có.

2. Quy trình làm việc của Git

  1. Sửa đổi một số tệp trong thư mục làm việc
  2. Chụp ảnh các tệp đã sửa đổi và lưu vào khu vực tạm thời
  3. Cam kết cập nhật, lưu vĩnh viễn ảnh chụp tệp vào thư mục Git

3. Sự khác biệt giữa fetch, merge, pull

Pull tương đương với git fetch và git merge, cập nhật mã kho lưu trữ từ xa về kho cục bộ, sau đó hợp nhất vào nhánh hiện tại. Git fetch lấy phiên bản mới nhất từ xa về cục bộ nhưng không tự động hợp nhất. Git merge hợp nhất nội dung vào nhánh hiện tại. Git pull lấy phiên bản mới nhất từ xa và hợp nhất vào cục bộ.

4. Các lệnh liên quan đến nhánh

  • Tạo nhánh: git branch tên_nhánh
  • Xem nhánh: git branch
  • Chuyển nhánh: git checkout tên_nhánh
  • Tạo và chuyển nhánh: git checkout -b tên_nhánh
  • Hợp nhất nhánh: git merge
  • Xem nhánh đã hợp nhất/chưa hợp nhất: git branch --merged / git branch --no-merged
  • Xóa nhánh đã hợp nhất/chưa hợp nhất: git branch -d tên_nhánh / git branch -D tên_nhánh

5. Sự khác biệt giữa git merge và git rebase

Cả hai đều đại diện cho việc hợp nhất. Git merge tạo một commit mới trên nhánh hiện tại và giữ lại tất cả lịch sử thao tác, sắp xếp theo thứ tự thời gian commit. Rebase không sắp xếp lịch sử theo thứ tự thời gian commit, một khi commit được công bố lên kho công cộng, không nên thực hiện rebase trên nhánh đó.

6. Giải quyết xung đột hợp nhất nhánh

Xung đột xảy ra khi nhánh A sửa đổi một câu trong tệp, sau đó chuyển sang nhánh chính cũng sửa đổi cùng câu đó, sử dụng git merge để hợp nhất sẽ tạo ra xung đột cần giải quyết.

Cách giải quyết:

  1. Dùng git status để xem tệp xung đột
  2. Mở tệp xung đột bằng trình soạn thảo, Git đánh dấu nội dung khác nhau bằng <<<<<<<, =======, >>>>>>>
  3. Sửa nội dung tệp
  4. Cam kết: git add tệp; git commit -m ""
  5. Xem biểu đồ hợp nhất nhánh: git log --graph

7. Cấu hình Git

8. Các lệnh Git phổ biến

/*
1) Clone dự án từ kho lưu trữ từ xa
   git clone địa_chỉ_dự_án

2) Từ vùng làm việc đến vùng tạm thời
   git add tên_tệp, git add . thao tác nhiều tệp

3) Từ vùng tạm thời đến vùng phiên bản
   git commit -m"thông_tin_giải_thích"

4) Tải tệp vùng phiên bản lên kho lưu trữ từ xa
   git push origin master

5) Kéo/tải tệp từ kho lưu trữ từ xa
   git pull origin master

6) Xem lịch sử hiện tại, xem tất cả bản ghi thao tác
   git log, git reflog

7) Xem trạng thái tệp
   git status

8) Xem thông tin phiên bản
   git version

9) Xem thông tin cấu hình
   git config --list

10) Tạo kho mã Git mới trong thư mục hiện tại (tạo tệp ẩn .git)
    git init

11) Quay lại phiên bản
    git reset --hard id_phiên_bản

12) Xem nội dung đã sửa đổi của tệp xx
    git diff xx

13) Xóa tên tệp
    git rm tên_tệp

14) Phục hồi tệp
    git checkout

15) Liên kết kho lưu trữ từ xa
    git remote add [địa_chỉ_git_kho_lưu_trữ_từ_xa]

16) Hủy liên kết kho lưu trữ từ xa
    git remote remove [địa_chỉ_git_kho_lưu_trữ_từ_xa]

17) Tạo nhánh
    git branch tên_nhánh

18) Xem số lượng nhánh
    git branch

19) Chuyển nhánh
    git checkout tên_nhánh

20) Tạo và chuyển nhánh
    git checkout -b tên_nhánh

21) Chuyển nhánh khi tệp bị sửa đổi
    git stash lưu tạm tệp

22) Hợp nhất nhánh
    git merge

23) Hợp nhất nhánh chỉ định vào nhánh hiện tại
    git merge [nhánh]

24) Xem nhánh đã hợp nhất
    git branch --merged

25) Xem nhánh chưa hợp nhất
    git branch --no-merged

26) Xem nhánh từ xa
    git branch -r

27) Xóa nhánh chưa hợp nhất
    git branch -D tên_nhánh

28) Xóa nhánh đã hợp nhất
    git branch -d

29) Xóa nhánh từ xa
    git branch -d tên_nhánh

30) Tạo gói nén có thể phát hành
    git archive
*/

9. Fork là gì? Sự khác biệt giữa fork, branch và clone?

Fork là sao chép kho lưu trữ. Clone là bản sao cục bộ của kho lưu trữ từ xa, thực tế là sao chép toàn bộ kho nguồn bao gồm tất cả lịch sử và nhánh. Branch là cơ chế xử lý thay đổi trong kho lưu trữ đơn lẻ, cuối cùng nhằm mục đích hợp nhất với phần còn lại của mã.

10. Khi nào nên sử dụng "git stash"?

Lệnh git stash lưu các sửa đổi chưa cam kết để sử dụng sau, sau đó có thể khôi phục từ bản sao làm việc.

Thẻ: Webpack git frontend-interview module-bundling version-control

Đăng vào ngày 7 tháng 6 lúc 16:20

Thẻ Phổ Biến

©2026 Thành phố Cuồng loạn