Loader trong Webpack
Để mở rộng khả năng của Webpack, người ta cũng sử dụng loader. Chúng cho phép lấy các tệp thuộc một loại nhất định và thực hiện các thao tác nhất định với chúng.
Ví dụ, có thể lấy tất cả các tệp có phần mở rộng
.less, chuyển đổi văn bản của chúng thành CSS,
sau đó thu nhỏ CSS thu được
và lưu vào một tệp chung.
Hãy cùng xem sơ đồ tổng quát làm việc với loader bằng ví dụ về hai loader tưởng tượng.
Hãy cài đặt loader đầu tiên:
npm install test-loader1 --save-dev
Hãy cài đặt loader thứ hai:
npm install test-loader2 --save-dev
Sau khi cài đặt loader, chúng ta có thể sử dụng chúng trong tệp cấu hình (không cần import chúng). Xem cú pháp:
export default {
entry: './src/index.js',
module: {
rules: [
{
test: /\.css$/i, // loại tệp
use: ['test-loader1', 'test-loader2'], // các loader
},
],
},
};
Có thể viết các phần tử của mảng không theo hàng ngang, mà theo cột dọc:
export default {
entry: './src/index.js',
module: {
rules: [
{
test: /\.css$/i,
use: [
'test-loader1',
'test-loader2'
],
},
],
},
};
Đối với các loại tệp khác nhau có thể viết các quy tắc khác nhau:
export default {
entry: './src/index.js',
module: {
rules: [
{
test: /\.sass$/i,
use: [
'test-loader1',
'test-loader2'
],
},
{
test: /\.less$/i,
use: [
'test-loader3',
'test-loader4'
],
},
],
},
};
Các loader được thực hiện lần lượt. Trong đó, thứ tự bắt đầu từ cuối mảng. Tức là loader được chỉ định là phần tử cuối cùng của mảng sẽ chạy đầu tiên, sau đó đến phần tử áp chót và cứ thế tiếp tục.
