Webpack 5 - #1 Khái niệm tổng quát

Khái niệm tổng quát

Về cốt lõi, webpack là một gói mô đun tĩnh cho các ứng dụng Javascript hiện đại. Khi webpack xử lý ứng dụng của bạn, nó sẽ xây dựng nội bộ một biểu đồ phụ thuộc (dependency graph) ánh xạ mô đun mà dự án của bạn cần và tạo một hoặc nhiều gói (bundle)

Kể từ phiên bản 4.0.0, webpack không bắt buộc có file cấu hình bundle dự án của bạn. Tuy nhiên, bạn có thể cấu hình nó sao cho phù hợp với nhu cầu của bạn.

Để bắt đầu bạn chỉ cần hiểu những khái niệm cốt lỗi của nó:

• Entry
• Output
• Loaders
• Plugins
• Mode
• Browser Compatibility

Tài liệu này nhằm cung cấp một cái nhìn tổng quan ở mức độ cao về các khái niệm này, đồng thời cung cấp các liên kết đến những khái niệm cụ thể chi tiết.

Entry

Một đầu vào (entry point) cho biết mô đun webpack nên sử dụng file nào để bắt đầu xây dựng biểu đồ phụ thuộc bên trong nó. webpack sẽ tìm ra những mô đun và thư viện khác mà điểm mà điểm nhập phụ thuộc vào (trực tiếp và gián tiếp)

Giá trị mặc định của nó là ./src/index.js, nhưng bạn có thể xác định một (hoặc nhiều đầu vào) bằng cách cài đặt một đầu vào trong cấu hình webpack. Ví dụ:

webpack.config.js

Output

Thuộc tính output cho webpack biết chỗ để bỏ những bundles mà tạo ra và cách đặt tên cái file đó. Mặc định nó là ./dist/main.js cho file chính và đến thư mục ./dist cho những file khác được tạo.

Bạn có thể cấu hình phần này của quy trình bằng cách chỉ định trường output trong cấu hình của bạn.

webpack.config.js

Trong ví dụ ở trên, chúng ta sử dụng thuộc tính output.filename và output.path để nói cho webpack biết tên bundle và nơi mà chúng ta muốn để cái file đó. Trong trường hợp bạn thắc mắc về path mô đun được import ở trên đầu, nó là một mô đun Node.js được sử dụng thể thao tác với cái đường dẫn.

Loaders

Ngoài ra, webpack chỉ hiểu file Javascript và Json. Loaders cho phép webpack xử lý những loại file khác và chuyển chúng thành những mô đun có thể được sử dụng trong ứng dụng của bạn và thêm vào biểu đồ dependency graph (biểu đồ phụ thuộc)

👉 Lưu ý rằng khả năng import bất kỳ loại mô đun nào, ví dụ file .css là một tính năng dành riêng cho webpack và có thể không được hỗ trợ bởi các bundle hoặc tác vụ (task runner). Chúng cảm thấy tiện ích của ngôn ngữ này được đảm bảo vì nó cho phép nhà phát triển (developer_ xây dựng một biểu đồ phụ thuộc chính xác hơn.

Ở cấp độ cao hơn, loaders có hai thuộc tính trong cấu hình webpack:

1. Thuộc tính test xác định file hoặc nhiều file sẽ được chuyển đổi
2. Thuộc tính use chỉ định loader nên làm việc chuyển đổi đó.

webpack.configuration.js

Cấu hình ở trên đã định nghĩa thuộc tính rule cho một mô đun với hai thuộc tính bắt buộc: test và use. Nó cho trình biên dịch của webpack biết như sau:

"Ê trình biên dịch webpack, khi mày đi tới những đường dẫn mà có đuôi là .txt trong câu lệnh require() hoặc import, thì mày sử dụng raw-loader để chuyển đổi nó trước khi thêm vào bundle nha"

👉 Điều quan trọng là nhớ khi định nghĩa quy luật trong cấu hình webpack, bạn định nghĩa nó trong module.rules không là rules không. Để tốt cho bạn, webpack sẽ cảnh báo bạn nếu bạn làm không đúng.

👉 Hãy nhớ trong đầu khi sử dụng biểu thức chính quy để tìm file khớp, bạn không cần bỏ nó vô dấu nháy, ví dụ /\.txt$/ chứ không phải là '/\.txt$/' hoặc "/\.txt$/". Cái này /\.txt$/ nghĩa là nó sẽ tìm bất kỳ file nào mà kết thúc bằng .txt còn mà có dấu nháy đơn hoặc đôi là nó sẽ đi tìm đường dẫn tuyệt đối mà khớp với '.txt'; đây có thể không phải là ý định của bạn.

Plugins

Trong khi các loader được sử dụng để chuyển đổi một số loại của mô đun nhất định, các plugin có thể được tận dụng để thực hiện nhiều tác vụ hơn như tối ưu bundle, quản lý tài sản và đưa vào các biến môi trường.

Để sử dụng một plugin, bạn cần require() nó và thêm nó vào mảng plugin. Phần lớn các plugin được chỉnh bằng các tùy chọn (options). Khi bạn có thể sử dụng một plugin nhiều lần trong cấu hình cho nhiều mục đích khác nhau, bạn cần tạo một thực của nó bằng cách gọi nói với toán tử new

webpack.config.js

Ví dụ ở trên, html-webpack-plugin tạo file HTML cho ứng dụng của bạn bằng cách tự động thêm tất cả vào các bundle đã tạo

Sử dụng plugin trong cấu hình webpack rất đơn giản. Tuy nhiên, có nhiều trường hợp đáng để khám phá thêm

Mode

Cài đặt tham số mode là development, production hoặc none, bạn có thể bật tích hợp tối ưu hóa của webpack tương ứng với từng môi trường. Giá trị mặc định là production.

Browser Compatibility

webpack hỗ trợ tất cả trình duyệt là ES5-compliant (IE8 và thấp hơn không hỗ trợ). webpack cần Promise để import() và require.ensure(). Nếu bạn muốn hỗ trợ trình duyệt cũ hơn, bạn cần phải load một polyfill trước khi sử dụng những biểu thứ này

Environment

webpack 5 chạy trên Node.js phiên bản 10.13.0+

Nguồn: Webpack - Concepts