Assets trong Webpack

Trong mỗi dự án đều có một số tài nguyên hoặc assets (assets). Các assets này có thể là hình ảnh, tệp phông chữ và những thứ tương tự.

Thông thường, chúng ta chỉ muốn di chuyển các tài nguyên từ thư mục dự án sang thư mục build. Nhưng lại phát sinh vấn đề về bộ nhớ cache. Ví dụ, trình duyệt lưu cache hình ảnh. Điều này có nghĩa là nếu chúng ta thay đổi hình ảnh mà không thay đổi tên tệp của nó, thì người dùng trang web sẽ thấy phiên bản cũ của hình ảnh, vì nó đã được lưu trong cache của họ.

Giải pháp cho vấn đề này, như bạn đã biết, là thêm hash vào tên tệp. Webpack cho phép sao chép các tệp tài nguyên vào thư mục build, đồng thời thêm hash vào chúng và, quan trọng nhất, thay đổi đường dẫn đến các tài nguyên này trong tất cả các tệp thành đường dẫn mới.

Trong Webpack, việc làm việc với assets được thực hiện bằng các module assets đặc biệt. Có bốn loại: asset/resource, asset/inline, asset/source, asset.

Module asset/resource sao chép các tệp từ thư mục dự án vào thư mục build và thay thế đường dẫn đến chúng bằng đường dẫn mới. Module asset/inline lấy các tệp từ thư mục dự án và trong code build thay thế đường dẫn đến tệp bằng base64. Module asset/source lấy các tệp từ thư mục dự án và trả về chúng dưới dạng chuỗi văn bản. Module asset tự chọn, sao chép tệp vào thư mục build hay chuyển nó thành base. Lựa chọn được thực hiện tùy thuộc vào kích thước tệp. Theo mặc định, các tệp lớn hơn 8kb sẽ được build thành các tệp riêng.

Sơ đồ ứng dụng chung của các module này trông như sau:

module: {
	rules: [
		{
			test: /\.png$/,        // các tệp
			type: 'asset/resource' // loại module
		}
	]
},

Hãy giải thích những gì được hiểu là assets.

Hãy tìm hiểu qua Google, base64 là gì và cách ứng dụng nó trong CSS.

Liệt kê 4 loại module cho assets.

Hãy giải thích mục đích của mỗi loại trong 4 loại module.