Лоадери во Webpack
За проширување на можностите на Webpack исто така се користат лоадери. Тие овозможуваат да се земат датотеки од одреден тип и да се извршат одредени операции со нив.
На пример, може да се земат сите датотеки со екстензија
.less, да се трансформира нивниот текст во CSS,
потоа добиениот CSS да се минимизира
и да се зачува во една заедничка датотека.
Ајде да ја погледнеме општата шема за работа со лоадер на пример од два имагинарни лоадери.
Ајде да го инсталираме првиот лоадер:
npm install test-loader1 --save-dev
Ајде да го инсталираме вториот лоадер:
npm install test-loader2 --save-dev
По инсталирањето на лоадерите можеме да ги искористиме во датотеката за конфигурација (не треба да се импортираат). Погледнете го синтаксата:
export default {
entry: './src/index.js',
module: {
rules: [
{
test: /\.css$/i, // тип на датотека
use: ['test-loader1', 'test-loader2'], // лоадери
},
],
},
};
Елементите на низата може да се запишат не во ред, туку во столб:
export default {
entry: './src/index.js',
module: {
rules: [
{
test: /\.css$/i,
use: [
'test-loader1',
'test-loader2'
],
},
],
},
};
За различни типови на датотеки може да се пишуваат различни правила:
export default {
entry: './src/index.js',
module: {
rules: [
{
test: /\.sass$/i,
use: [
'test-loader1',
'test-loader2'
],
},
{
test: /\.less$/i,
use: [
'test-loader3',
'test-loader4'
],
},
],
},
};
Лоадерите се извршуваат последователно. При тоа, редоследот започнува од крајот на низата. Тоа значи прв се извршува лоадерот, назначен како последен елемент од низата, потоа претпоследниот и така натаму.
